Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

@extend not compiling in css #122

Open
kayetter opened this issue Sep 6, 2018 · 2 comments
Open

@extend not compiling in css #122

kayetter opened this issue Sep 6, 2018 · 2 comments

Comments

@kayetter
Copy link

kayetter commented Sep 6, 2018

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
Copy link

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
Copy link

dyllandry commented Aug 12, 2019 •
edited
Loading

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 [email protected].

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>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@dyllandry @kayetter @diverent2