csstools/precss

@extend not compiling in css

kayetter opened this issue · 2 comments

kayetter commented

Here is my simple css

%bee-color {
  background: blue;
}

#bee-cluster-1 {

  .bee-1 {
        @extend %bee-color;

  }
}

This is compiling to

#bee-cluster-1 .bee-1 { @extend %bee-color: ; }

Which gives me an unnamed property error in browser. Setting it with an @include mixin will result in correct compiling.

diverent2 commented

Running the current version 4.0.0, it works fine for me.

//compiles to

#bee-cluster-1 .bee-1 {
    background: blue
}

Please consider upgrading to a newer version and provide your project version next time for better debugging :)

PS: In my experience 🐝s are rather black and yellow/gold, and so are their hives, but that´s just my experience ^^

dyllandry commented

Fix for me: Don't put : after @extend. 😭 Will leave this here for others to maybe find useful.

Hmm, it's not transforming for me either. I'm using precss@4.0.0.

This...

%constrain-content-width {
  max-width: 1100px;
  margin: 0 auto;
}

.header {
  @extend: %constrain-content-width;
}

compiles to...

.header {
  @extend: %constrain-content-width;
}

Variables are compiled fine, though. I just can't get extend to work.

If it helps, I am using PostCSs & precss in the context of Hugo. So, the way I'm using it is this:

<head>
  ...
  {{ $style := .Resources.GetMatch "styles.pcss" | resources.PostCSS (dict "use" "precss") }}
  <style>{{ $style.Content | safeCSS  }}</style>
</head>