We all get a little frustrated when styling large scale applications, especially using plain CSS. Things can get very messy easily. Things can get a lot easier using SASS. I have listed the primary and most useful features of SASS along with some very precise descriptions and tiny code snippets. But before that, I assume you are aware of the following:
- Commonly used CSS properties
- Basic understanding of programming (if/else, loops)
Alright! Let us get started.
Variables and Partials
You can use the variables feature in SASS to avoid writing and modifying repetitive style properties. Let’s consider you have a specific text colour as #000 to be used in multiple areas across your website’s elements. You can declare a variable in the following manner:
$text-color: #000
To use the property, use the following syntax anywhere in you SCSS file:
color: $text-color
You can define the common properties in a separate file and use the importstatement to use them in your actual stylesheet.
Note: The file name starts with an underscore. These files are known as partials in SASS. The underscore indicates the SASS compiler that they do not contain any CSS style to be translated, only reusable variables or mixins defined. We will look into mixins later.
To import the variables in your actual SCSS file, you could use the following syntax:
#ux #front-end-development #css #ui-design #sass
