Introduction
Sass (Syntactically awesome style sheets) is the CSS extension language that allows you to use things like variables, nested rules, inline imports and more. It helps to keep things organized and allow you to write CSS faster.
Setup
You can now write a SASS file, but you need to convert it to CSS file since the browser cannot read SASS.
To convert there are many ways:
Use command
sass --watch input.scss output.css. Here input.scss is the sass file and output.css is the css file. --watch (watch flag) tells Sass to watch your source files for changes, and re-compile CSS each time you save your Sass.We can also use
sass --watch app/sass:public/stylesheetscommand. Here input directory and output directory is seperated by :. Sass would watch all files in the app/sass folder for changes, and compile CSS to the public/stylesheets folder.If you are using VS Code as a code editor. You can use Live Sass Compiler
Now when you create a file with .scss, you will see a Watch SASS at the lower left. Click on it and your Sass will be converted into css and will get save in the same folder.
Syntax
There are two syntax that SASS allows:
SCSS(Sassy CSS)
- Similar to CSS(use curly braces and semicolons)
- CSS is also valid
- .scss extension
Sass(Syntactically awesome style sheets)
- Use indentation
- CSS code is not valid
- .sass extension
Variables
You can store things like colors, font stacks, or any CSS value you think you'll want to reuse. Sass uses the $ symbol to make something a variable.
When Sass is converted into CSS the variable are not converted but the property is stored directly.
Maps
Maps in Sass hold pairs of keys and values, and make it easy to look up a value by its corresponding key.
Nesting
Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML.
In the above example ul is nested in class .nav
In the above image some more ways to nest are shown. & always refers to the upper selection.
Partials
You can create partials containing small snippets of css or sass. It can be very useful in maintaining large modules. A partial file is named leading underscore like _partial.scss. And it can be used in other file by @use rule or @import rule.
@use
The @use rule loads mixin, functions, and variables from other Sass stylesheets, and combines CSS from multiple stylesheets together. Stylesheets loaded by @use are called "modules". Sass also provides built-in modules with useful functions.
@import
Sass extends the @import rule is like @use. Unlike plain CSS imports, which require the browser to make multiple HTTP requests as it renders your page, Sass imports are handled entirely during compilation. This makes everything global.
Because of some properties of @import, using @use is more preferred
@mixin
It allows you to define style that can be used several times.
We can pass arguments in mixin that makes it customizable every single time we call. We can also set default argument value like in the example below.
@function
The features allow you to define complex operations on the Sass Script values which you can reuse throughout your stylesheet. They facilitate the abstraction of common formulas and behavior in a clear way. Like every other function syntax it follows the same.
In the above image we have created a sum function.
Although it is technically feasible for functions to have side effects like setting global variables, this is strongly discouraged. Use functions just to compute values and mixin for rest.
@extend
There are times when we have to use all the styles of another class and we have to add just some specific properties. This is the case when we use @extend.
Operators
We can also do some math operations using sass.
For performing operations the quantities must have same unit like px, rem or %.
All basic things are included. There are some other properties like @ error, @warn, @debug, @at-root, etc. But they are not used most of the times.
For more information read the official documentation or comment below.
Top comments (0)