SASS - CSS with super powers

Introduction

Sass (Syntactically Great Style Sheets) is a CSS extension language that allows you to use things like variables, nesting rules, inline imports, etc. It helps to keep things organized and allows you to write CSS faster.

Step

• Install SASS
• Write a SASS file, but you need to convert it to a CSS file because the browser cannot read SASS
• There are many ways to convert
  • Use the 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 for changes to the source file and recompile the CSS every time Sass is saved
  • We can also use the sass --watch app/sass:public/stylesheets command. Here the input directory and output directory are separated by:. Sass will monitor the changes of all files in the app/sass folder and compile the CSS to the public/stylesheets folder
  • If you use VS Code as your code editor. You can use Live Sass Compiler Now, when you create a file with .scss, you will see Watch SASS on the bottom left. Click it and your Sass will be converted to css and saved in the same folder

Syntax

SASS allows two syntaxes:

SCSS(Sassy CSS)

1. Similar to CSS (using curly braces and semicolons)
2. CSS is also valid
   3.. scss extension

Sass (style sheet with great syntax)

1. Use indentation
2. Invalid CSS code
3. .sass extension

Variable

You can store things like colors, font stacks, or whatever CSS values ​​you think you want to reuse. Sass uses the $ symbol to make certain things variable.

When Sass is converted to CSS, the variables will not be converted, but the properties will be stored directly.

Map

The map in Sass stores key and value pairs, and you can easily find the value by the corresponding key.

Nesting

Sass allows you to nest CSS selectors to follow the same visual hierarchy of HTML. In the above example, ul is nested in the class .nav. The above figure shows more nesting methods. & Always refers to the above selection.

Partials

You can create sections that contain css or sass snippets. It is very useful when maintaining large modules. Partial files are named with leading underscores, such as _partial.scss. And it can be used in other files through @use rules or @import rules.

@use

The @use rule loads mixins, functions, and variables from other Sass style sheets, and combines CSS from multiple style sheets. The style sheet loaded by @use is called a "module". Sass also provides built-in modules with useful functions.

@import

Sass extends the @import rule just like @use. Unlike ordinary CSS imports, which require the browser to issue multiple HTTP requests when rendering the page, Sass imports are handled entirely during compilation. This makes everything global.
Due to some attributes of @import, using @use is preferable

@mixin

It allows you to define styles that can be used multiple times. We can pass parameters in the mixin so that it can be customized every time it is called. We can also set default parameter values, as shown in the following example.

@function

These features allow you to define complex operations on Sass script values, which you can reuse throughout the style sheet. They promote the abstraction of common formulas and behaviors in a clear way. Like all other function syntax, it follows the same rules. In the figure above, we have created a sum function.

Although it is technically feasible for functions to have side effects such as setting global variables, it is strongly recommended not to do so. The function is used just to calculate the value and mix the rest.

@extend

Sometimes we have to use all the styles of another class, and we only need to add some specific attributes. This is the case when we use @extend.

Operators

We can also use sass to perform some mathematical operations. In order to perform the operation, the quantity must have the same unit, such as px, rem, or%