Some common use cases of Sass

Some common use cases of Sass

In an earlier post, we covered getting set up with Sass and being able to convert your files to standard CSS. In this post we’ll cover some of the most common techniques for getting the most out of Sass — making a variety of style rules significantly easier to write.

Mixins

With varying levels of browser support for different CSS properties, it’s common to have to provide different vendor prefixes to properties, in order to ensure cross-browser compatibility (especially when support for Internet Explorer is necessary):

p {
  -webkit-transform: scale(2); 
      -ms-transform: scale(2);
          transform: scale(2);
}

 

This can be a pain to have to do repeatedly for each property with varying levels of support. Using a Sass Mixin can simplify the process whenever having to repeat large sections of code.

Using the code for the transform property above as an example, we can easily turn this into a reusable mixin whenever we want to use a transform: scale() rule:

@mixin transform-scale($x) {
    -webkit-transform: scale($x);
        -ms-transform: scale($x);
            transform: scale($x);
}

 

With the mixin above, we define the amount we want to scale each transform with the $x argument. This mixin can then be used in any Sass code block, by using the @include statement beforehand:

p {
    @include transform-scale(2);
}

 

For Loops

Similar to programming languages such as JavaScript, PHP or Python, Sass allows you to create a for loop, to iterate over a defined number of times. Defined using the @for keyword, the length of Sass for loops can be indicated in two different ways: “x through y” or “x to y”, where x is the starting point and y is the end point. When defining the loop with through, the loop will include the end value (so for example, 1 through 10 would include 10 in the loop), whereas using to would have the loop go up to but not including the end value (i.e. 1 to 10 would only go from 1 to 9). As an example of using 1 through 10:

@for $i from 1 through 10 {
    .col-#{$i} { width: 100% / 10 * $i; }
}

 

The @for loop above would apply a width calculation to 10 different CSS classes (each starting with .col- followed by a number between 1 and 10). The loop would set a width for each CSS class, defined by 100% / 10 multiplied by the classes number (1 through 10). This would result in the following rule sets for each of the classes:

.col-1 {
    width: 10%;   
}
.col-2 {
    width: 20%;
}
.col-3 {
    width: 30%;
}
.col-4 {
    width: 40%;
}

...

.col-10 {
    width: 100%;
}

 

This is a quick and easy way to define columns in a basic grid structure.

Partials

When working with Sass, it’s often a good idea to organize your code into reusable sections or files based on the type of styles they apply (for example, having a file for your grid layout, another file for mixins, another for color schemes, etc.). Sass encourages this modular workflow by using what is referred to as partials. A partial would be any Sass file that begins with an underscore (_), for example _grid.scss. You can then have a directory of all of your partials, then one main Sass file to import these into, such as main.scss.

To import these partials into your main file, you would simply use an @import statement at the top of the file:

// main.scss file

@import 'grid'
@import 'mixins'

 

When working with partials, you don’t need to supply the underscore or filename extension. Sass will automatically detect these. This makes it easy to use partials to better organize your code.

Resources

Post a Comment

Comments are moderated. Your email is kept private. Required fields are marked *

© 2019 Sunlight Media LLC