You can use the parent selector reference &, it will be replaced by the parent selector after compilation: For your example: .container { background:red; &.desc{ background:blue; } } /* compiles to: */ .container { background: red; } .container.desc { background: blue; } The & will completely resolve, so if your parent selector is nested itself, … Read more
Sass 3.2 and older The only thing you can do is reverse your nesting or not nest at all: .social-media { /* … */ .twitter { /* … */ } .facebook { /* … */ } } ul.social-media { /* … */ } Sass 3.3 and later You can do that using interpolation and the … Read more
This is simply not possible. Since the trigger @media screen and (max-width: 1170px) happens on the client-side. Achieving your expected result would only be possible if SASS grabbed all rules and properties in your stylesheet containing your $base_width variable and copied/changed them accordingly. Since it won’t work automatically you could do it by hand like … Read more
The trick is to use * 1px when you want to add a unit. Using +px or interpolation (#{$numericValue}px) turns it into a string. $numericValue: 30; $pixelValue: $numericValue * 1px; $calc: $pixelValue * 2;
You’re generating files that don’t need to be generated. screen.scss -> screen.css base.scss -> base.css catalog.scss -> catalog.css The catalog file is being compiled on its own. Since it is not importing base.scss, the variables are not set. Your screen.scss file generates as you expect because it is importing all of the necessary information. What … Read more