Structuring SASS Code and its Advantages

shruti.sheth
vyasamit2007

Do you recall when we used to do everything with nothing more than a plain old CSS? All we had was a single CSS file, longer than a sleepless night. Thousands and thousands of line poorly written of CSS where we were struggling to find the one value we had to change to fix some obscure and frustrating bug.

This is where a need arise for using a CSS preprocessor having the ability to split our code into several files without impacting performance. Splitting of code means structuring and organization of your CSS code in your SASS partials. This solution helps to overcome the above problem with maximum speed and optimum resource utilization.

As we all are aware of that ‘A well begun is half done’. Structuring of SASS code at very basic level of theme setup is one of the most crucial steps required from design implementation point of view. More than 50% of your theming efforts can be reduced by proper structuring.

This session will highlight on following bulletins,

  • Basic Design Analysis

  • Defining Variables

  • Defining Mixins

  • Adding global styles

  • Adding specific components styles

  • Adding breakpoints

  • Advantages of Structuring SASS Code

Session Track

Frontend

Experience Level

Intermediate

Drupal Version