Clever Geek Handbook

SASS is only distributed as root

I recently met ... the "thing" in the land of SASS. And maybe you guys know a trick or something to "fix" it.

I have this class .icon

. It contains some basic styles for my icons (used for the icon). These icons can be placed in the markup wherever I want. For example, in button

. But inside the button, this icon needs some extra styling. So I am doing the following:

.icon {
  // Basic styling
}

button {
  .icon {
    // Additional styling
  }
}

It compiles to this css:

.icon {
  // Basic styling
}

button .icon {
  // Additional styling
}

Everything is fine so far. But now I want to expand .icon

to the after element inside all my elements .foo

, for example:

.foo:after {
  @extend .icon;
}

It now compiles to this css:

.icon, .foo:after { // This is good, exactly what I want
  // Basic styling
}

button .icon, button .foo:after { // But I don't need the second half of this line
  // Basic Additional
}

Now the foo element not only extends the "root" "sign" class, but also the icon-class button under the button and any additional styles. But I don't need that. I don't want this element to have this extra styling. This does not lead to problems yet. But perhaps this can happen later. So I was curious if it was possible to extend just .icon

from the root by omitting the nested .icon

in button

and possibly more nested icon classes in other elements later.

My first thought was to use the abstact class for example %icon

and extend from it, but the above icon-class and the file it is placed in is generated by grunt-webfont. So I can't just change the style of the icon-class, because it gets overwritten all the time.

What can I do? Is there some other SASS extension feature that I am not aware of? Or is there a completely different way?

Thanks for any help.

DECISION:

Using all the awesome help and advice, I found a way to avoid this problem: Grunt-Webfont suggests using i-tag

to display icons. Font-Awesome does the same. So, I do just that. And I don't usually use it for anything else. This allows a i-tag

pod button

to be used for my extra style, not class .icon

. This way, the class .icon

is only used once in the generated file and then never again.

.icon {
  // Basic styling
}

button {
  i { // <= Previously '.icon'
    // Additional styling
  }
}
+3


source to share


3 answers


Have you tried something like this?

.icon {
  //some styles from external (ie: grunt webfont)
  color: red;
}

%icon {
  @extend .icon;
}

button {
  .ico {
    @extend %icon;
    //add some additional styles
  }
}

.foo:after {
  @extend %icon;
  //add some more
}

Then you would avoid generating a foo: after rule for .icon inside the button.

EDIT2 - you need to create an additional class that you can use inside your styles, so only one .icon class will be defined (css generated in your grunt-webfont). Then just use the .ico class in your styles and make the% icon bigger as shown above.



EDIT - have you solved this problem in your grunt-webfont generator? From the documentation it seems that you can customize the output like this:

options: {
      stylesheet: 'scss',
      mixinPrefix: 'mixin-'

Then just use a mixin to define the styles for your desired classes?

+2


source


I think this is the result you are looking for? A bit messy though.

Method: Create a placeholder style and add it to the .icon to begin with.

%icon-styles{
  basic: styling;
}

.icon {
  @extend %icon-styles;
}

.foo:after {
  @extend %icon-styles;
}

button .icon {
  @extend %icon-styles;
  additional: styling;
}


It compiles to:

.icon, .foo:after, button .icon {
  basic: styling;
}

button .icon {
  additional: styling;
}
0


source


You can also use your own template with grunt-webfont. Itll will give you a lot more control over the generated CSS.

0


source






More articles:


All Articles