CSS Preprocessors
What are they?
CSS preprocessors let us write CSS rules in a structured way which get converted to pure CSS by any compiler or loader.
CSS Preprocessors compile the code which is written using a special compiler. Browsers don't understand SASS so they need it translated into CSS.
Once compiled they then use that to create a CSS file, which can then be referenced by the main HTML document.
Most popular CSS preprocessors:
SASS - Syntactically Awesome Style Sheet
Benefits of using them
Preprocessors let us write more flexible styles by using variables, functions, conditional statements that make our development easier.
We can join multiple stylesheets into one by importing all of them into the main CSS file. This allows us to organise our files to keep on top of CSS for large projects.
Repetition can be avoided by writing the common rules together and using that as a mixin or function.
Darken and Lighten functionality to create night mode to completely change up your website at a click of a button.
All of these features help us to write CSS with less effort and time but efficiently.
- Some, such as SASS, has specific style standards which are meant to make the writing of the document even easier, such as the freedom to omit braces if you want.
SASS ( Syntactically-awesome style sheets)
This appears to be the most popular choice for developers, it was first written in Ruby and then other languages.
How to use Sass
There are many tutorials available to get a feel of using SASS.
If you would like to learn without using an automatic compiler you could use:
How to use Sass - Step by Step guide - (Between 1 and 2 hours)
For an in-depth look into SASS with using an automatic compiler:
Sass Tutorial for Beginners - (2 hour video plus coding time. I would recommend putting aside half a day)*
SASS Tutorial - Net Ninja Course - 1 hour video plus coding time. This is my favourite tutorial)*
How to install
Install node-sass
In terminal install globally
npm install node-sass -g
Create:
Folder: SASS-Demo
File in folder: index.html
File in folder: style.scss
Dont forget to link the style file to html 😊
Then add
<body>
<div>
<h1> Sass Demo</h1>
<button class="save"> Save </button>
<button class="cancel"> Cancel </button>
</div>
</body>
Variables
Variables help you centralize CSS properties. You can assign them once at the top of a file and use them throughout the file. These variables are like placeholders for a CSS property’s value. In Sass, a variable name must start with a $ sign.
Create in style.css file $h1-color and $h1-height variables.
$h1-color : blue;
$h1-height : 50px;
h1{
color : $h1-color;
height : $h1-height;
}
Open terminal in the demo folder and execute
node-sass style.scss style.css
This will create a style.scss file
You can then open the index.html in browser
Operators
Sass provides basic math operators like addition +, subtraction -, multiplication * and division/.
You can use variables and operators together to manipulate CSS properties.
$h1-color : blue;
$h1-font : 50px;
$div-width : 500px;
div{
width: $div-width;
}
h1{
color : $h1-color;
height : $h1-font;
padding : $div-width / 10;
}
Mixins
Mixins group related properties and can be reused in style blocks. They can pass variables.
@mixin border-radius($radius){
-webkit-border-radius : $radius;
-moz-border-radius : $radius;
-ms-border-radius : $radius;
border-radius : $radius;
}
div{
width : $div-width;
border : 2px solid grey;
@include border-radius(20px);
}
Here we used the @mixin directive to define a mixin named border-radius. This mixin contains all the possible properties to set the radius of a border. We also passed a parameter to this mixin. Whenever you need to set the radius of an element, include this mixin with the @include keyword.
To apply these changes you have to compile the script once again
node-sass style.scss style.css
Nesting
You can nest selectors to apply classes using hover, focus and active
div{
>h1{
color: blue;
&:hover{
color: greenyellow;
}
}
}
Inheritance
We can create a parent style for items that share most of their characteristics such as padding, font-size, margin.
%common-button{
padding: 16px 8px;
border: none;
font-size: 18px;
}
.save{
@extend %common-button;
background-color: blue;
color: white;
}
.cancel{
@extend %common-button;
background-color: goldenrod;
color: white;
}
To declare a parent style, use the % sign. Use the @extend directive to inherit a child block.
Import
Sass can create partial files to create small modular Sass files to make files more organised and easier to maintain
The naming convention for partial files is to prefix the file name with an underscore _.
Create a file called _buttonpartial.scss
then use
@import '_buttonpartial';
h1{
color:blue;
}
In the root Sass script
Loop
Iteration is one of the most frequently used programming mechanisms. Sass script allows you to iterate over variables. You can use various directives like @for, @each and @while.
$totalButton: 2;
@for $i from 1 through $totalButton{
.button-#{$i} {
width: 50px * $i;
height: 120px / $i;
}
}
Stop needing to compile everytime!
There is a fancy way to avoid repetitive compiling: a task runner. Visual Studio Code has a built-in task runner, but you can use any task runner of your choice. Gulp is another popular task runner. For compiling Sass script with Gulp, you would need gulp sass compiler instead.
Or you can download PrePros
Set up instructions can be found here: (How to set up React and Sass using Prepros)
https://dev.to/nass84/how-to-set-up-react-and-sass-using-prepros-22m1
Documentation
SASS - Syntactically Awesome Style Sheet
Top comments (0)