Put on your lofi hip hop beats to study and relax to, we’re talking about SCSS

Syntactically Awesome Style Sheets

Since I know you aren’t taking me seriously, I’ve linked a youtube channel that streams lofi hip hop beats 24/7 until eternity. You’re welcome.

Something that has always been interesting to experience is the fact that as projects scale and become more complex, they reveal faults within the systems we use to try and maintain them. One example of this is CSS. While CSS is an important tool to understand and use, it isn’t enough when projects become complex. I isn’t practical to have a CSS sheet with 100,000 lines of CSS and no way to navigate it.

This is where SCSS comes in.

What is SCSS?

SCSS stands for Syntactically Awesome Style Sheet. It is a way to maintain CSS code in an more organized and compartmentalized fashion. It helps to solve various obstacles one may face in using vanilla CSS by incorporating variables, mixins, inheritance, and more. I will be going over variables, mixins, and nesting. All the examples shown below will be utilized with the LESS preprocessor and the syntax shown in the coding examples will be formatted as so.

Variables

Variables are a way to store information. They are simply containers for information in JavaScript and they are the same conceptually with SCSS. You are able to store colors, fonts, font size, and other css values in variables.

@width: 10px; 
@height: @width + 10px;  
#header {   
width: @width;   
height: @height; 
}

Output after LESS processes the SCSS:

#header {   
width: 10px;   
height: 20px; 
}

You can see form the examples above that You are able to reuse these variables throughout your code. The best part? There is one source of truth, the variable. Changing the value of the the @width variable would change all the values output by the LESS preprocessor. This helps you manage large code bases without having to change every instance of the value. This saves time and in an organization or business, time is money. These are important tools to utilize when approaching any large project.

Nesting

Nesting allows you to nest CSS selectors within other CSS selectors. This helps with specificity and can help you to further organize and compartmentalize your code without messing up the output.

#header {   
color: black;   
.navigation {     
   font-size: 12px;   
   }   
.logo {     
   width: 300px;   
   }
}

Nesting helps to keep code condensed and concise and easier to follow and read. It also is able to follow the structure of your HTML.

Mixins

Mixins allow you to put multiple multiple properties and CSS rules into another rule set.

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

putting the mixins into other rules:

#menu a {   
color: #111;   
.bordered(); 
}  
.post a {   
color: red;   
.bordered(); 
}

Now the .bordered CSS rule properties will appear in the #menu a and the .post a .

View Website I made using these concepts and the LESS preprocessor

Sarah Mendez is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Web & App Development. The following article relates to Web Development in the DGM2780 Course and is representative of the skills learned.