Brandon Pretelt
Published in

Brandon Pretelt

Getting /sassy/ with Sass

Sass: Syntactically Awesome Style Sheets

The namesake of this technology is truly, well, awesome. Sass is what’s called a CSS Preprocessor. Essentially, it takes all the good parts of an actual programming / scripting language and throws it into regular, ol’ CSS. Sass can help developers write CSS that is less repetitive (following the DRY concept) by being able to use mixins (which are basically functions), write CSS that is basically component-ized by separating different style sheets into different files and then bringing them into a master style sheet, which makes code a lot cleaner and easier to read and organize.

With that out of the way, let’s get into why I love Sass.

Nesting

One of the reasons why I love to use Sass is that you can nest CSS declarations within each other. As seen below…

div {
/* Hi, I am the parent element */
display: block;
width: 100vw;
background-color: #000;
a {
/* Hi I am the child */
display: inline-block;
color: #fff;
}
}

What this compiles down to is the following

div {
/* Hi, I am the parent element */
display: block;
width: 100vw;
background-color: #000;
}

div a {
/* Hi I am the child */
display: inline-block;
color: #fff;
}

Why is this useful? Well, you can easily find out which element is the parent or child of another element. If you have proper naming conventions for your IDs and classes, it makes it a lot easier to read through your code and find what you need to modify.

Something else that I love about using this syntax is that you can also use the following code to apply pseudo-element and pseudo-classes

div {
/* Hi I am the parent */
display: block;
width: 100vw;
background-color: #000;
a {
/* Hi I am the child */
display: inline-block;
color: #fff;
&:hover {
/* I am a pseudo class */
text-decoration: none;
}
}
}

What the ampersand (&) is saying here is to select the parent that it is a child of and apply the :hover pseudo-class. The output becomes the following

div {
/* Hi, I am the parent element */
display: block;
width: 100vw;
background-color: #000;
}

div a {
/* Hi I am the child */
display: inline-block;
color: #fff;
}

div a:hover {
/* Hi I am the pseudo class */
text-decoration: none;
}

However, while that does seem like a pro, it can quickly become spaghetti code if you’re not careful with how you write your sass. One way to alleviate that is separating everything into partials….

Particularly Partial to Partials

Aah, partials. One of the best parts about writing Sass. What partials do is you can break a big file into, essentially, components and then import all those components into one file using only a few lines of code. Why is this important? Consider you’re working on a large project and you need to update a certain part of the layout but, you’re working in a regular, boring ol’ CSS file. Well, this CSS file has all the layout code mixed in with the typography which is then mixed in with your utility classes and all of a sudden, you have a huge headache trying to find where the specific part of code you want to update is. This is where partials come into play.

As you can see in the screenshot above, you have all your partials prefixed with an _ (underscore) and in the styles.scss file, you can write the following

 @import ‘./partials/reset’;
@import ‘./partials/variables’;
@import ‘./partials/small-default’;
@import ‘./partials/medium’;
@import ‘./partials/large’;

This will import everything into the styles.scss and will compile everything, top down, in order and cascaded, into the main CSS file that will be served to your site.

Conclusion

Sass is an amazing tool that will, along with CSS frameworks, help make developers lives easier and keep their code more organized than ever. Even as CSS gains features that include what Sass, or preprocessors in general, can do, I feel that it won’t be going anywhere anytime soon.

— —

Brandon Pretelt is a student in the Digital Media Program at Utah Valley University, Orem Utah, studying Web & App Development. The following article relates to (Preprocessors) in the (DGM 2740 Course) and representative of the skills learned.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store