Is it possible to redefine a numerical attribute in SASS by increment or decrement? Consider something like this:
h1 {
font-size: 10px;
}
h1.important {
font-size: += 10px;
}
I know that I can work around that by defining a variable. Is it possible to do this without?
Even though nesting is coming to CSS, the Sass version is here today and it has more features than the native CSS nesting will have. For instance, we don't need the & in Sass, making it feel more intuitive. And we can nest media queries inside selectors. And we can use nesting to generate incremental class names.
A couple of hours, there isn't really much to learn once you know mixins, includes, variables and your down with nested selectors. It's worth it alone for structuring projects with includes and nested selectors, for such a little investment it makes such a different cleaning up and improving frontend work flow.
"Responsiveness", "UI components" and "Consistent" are the key factors why developers consider Bootstrap; whereas "Variables", "Mixins" and "Nested rules" are the primary reasons why Sass is favored.
SASS offers a galore of features that make it a better tool than CSS for developers. Some of its major highlights are: Compatibility with CSS: One of the major features of SASS is its high compatibility with cascading style sheets, which means SASS provides support for many versions of CSS.
Not sure if the +=
works, but you could use a base variable and then add on to it in another class.
$baseFontSize: 10px
h1
font-size: $baseFontSize
.border
font-size: $baseFontSize + 10px
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With