Add Conditional Logic To Sass With Control Directives

One of the ways CSS can be limiting is the lack of conditional logic and loops. You’re limited in your ability to set a style if one condition is true or while another remains true. There are media queries which offer some conditional logic, but odds are you’ve wished you could test against more conditions than media queries allow.

Continue reading

Building Better Data Structures With Sass Maps

One downside of working with lists in Sass is you have to access values by an index you may not know. Maps solve that problem and allow you to access values based on key names you assign to them.

Continue reading

Manipulate And Retrieve Data With Sass List Functions

Lists are a series of values stored together as a data structure. On their own they’re not any more useful than regular Sass variables, however they become more useful when using the built-in functions Sass provides for working with them.

Continue reading

How To Store Data In Sass Lists

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.

Continue reading

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.

Continue reading