SassError: There is no module with the namespace “math”
Figured it out. I needed to add @use ‘sass:math’; at the top of the file.
sass
Sass calculate percent minus px
Sass cannot perform arithmetic on values that cannot be converted from one unit to the next. Sass has no way of knowing exactly how wide “100%” is in terms of pixels or any other unit. That’s something only the browser knows. You need to use calc() instead. Check browser compatibility on Can I use… .foo … Read more
Using Sass Variables with CSS3 Media Queries
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
Making a Sass mixin with optional arguments
A DRY’r Way of Doing It And, generally, a neat trick to remove the quotes. @mixin box-shadow($top, $left, $blur, $color, $inset:””) { -webkit-box-shadow: $top $left $blur $color #{$inset}; -moz-box-shadow: $top $left $blur $color #{$inset}; box-shadow: $top $left $blur $color #{$inset}; } SASS Version 3+, you can use unquote(): @mixin box-shadow($top, $left, $blur, $color, $inset:””) { … Read more
Sass .scss: Nesting and multiple classes?
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 Nesting for :hover does not work [duplicate]
For concatenating selectors together when nesting, you need to use the parent selector (&): .class { margin:20px; &:hover { color:yellow; } }