If you want to set a font-stack as a variable in Sass you could do something like $fonts: Helvetica, Arial, sans-serif in a single variable. Later you could assign the font stack with font-family: $fonts; However what if you only wanted to assign one of the fonts and not the whole stack? Sass lists might be your answer.
Tag: sass
Manipulating Sass Colors With HSL And Opacity Functions
One of my favorite aspects of Sass is how easy the functions make it to work with colors. When I’ve studied color as a designer I learned color in HSL. When I’ve worked with color in CSS, it’s been either hexadecimal or rgb(a) values. The color functions in Sass helped me to bridge the gap between the different notations.
Manipulating Sass Colors With Operators And RGB Functions
It’s been a few years since I started working with Sass and while there are a lot of reasons why I continue to use it, the built-in color functions are easily among my favorite features of the language. You can use them to mix two colors or lighten or darken another color. You can even use them to build complex color schemes from a single color.
Working With Strings In Sass
Much of what you write in CSS is a string of some kind. Whether you’re setting a font-family as “lucida grande” or declaring a class as the selector .masthead, you’re working with strings. Despite how often strings are used in CSS, the language offers no way to manipulate them. Fortunately Sass does.
Working With Numbers In Sass
You work with numbers all the time in CSS. 16px. 50%. 0.875em. Unfortunately CSS doesn’t give you a lot of options for manipulating them. There is the calc() function that offers some basic math, but it is limited in what it can do. Sass, on the other hand, offers more ways to work with the number data type.