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
If your Rails version is between > 3.1.0 and < 4, place your fonts in any of the these folders: app/assets/fonts lib/assets/fonts vendor/assets/fonts For Rails versions > 4, you must place your fonts in the app/assets/fonts folder. Note: To place fonts outside of these designated folders, use the following configuration: config.assets.precompile << /\.(?:svg|eot|woff|ttf)\z/ For Rails … Read more
Update 2022 (Bootstrap 5) Generally speaking, customizing Bootstrap 5 SASS works the same way as it did in Bootstrap 4. However, some of the maps have changed (and new ones have been added) so you should follow the Bootstrap SASS documentation for details on how to add, remove or modify any of the maps. Recent … 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;
After having the same issue, I got confused with all the answers here and the comments over the repository of sass in github. I just want to point out that as December 2014, this issue has been resolved. It is now possible to import css files directly into your sass file. The following PR in … Read more
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
This is actually possible to do using SASS maps instead of variables. Here is a quick example: Referencing dynamically: $colors: ( blue: #007dc6, blue-hover: #3da1e0 ); @mixin colorSet($colorName) { color: map-get($colors, $colorName); &:hover { color: map-get($colors, #{$colorName}-hover); } } a { @include colorSet(blue); } Outputs as: a { color:#007dc6 } a:hover { color:#3da1e0 } Creating … Read more
Sass is a CSS pre-processor with syntax advancements. Style sheets in the advanced syntax are processed by the program, and turned into regular CSS style sheets. However, they do not extend the CSS standard itself. CSS variables are supported and can be utilized but not as well as pre-processor variables. For the difference between SCSS … Read more
I don’t have enough reputation points to comment, so adding this as an answer. Run npm install –save-dev node-sass before serving or compiling the code.