In order to design a visually attractive website, CSS is important. Style, design, typography, color schemes, and page layouts are all controlled by CSS on a simple HTML page. It defines how HTML elements will appear on the web-page. However, when you begin working on increasingly complicated projects, you may begin to question whether there is a more efficient way to write and handle CSS. Don’t be concerned; SASS is the answer.
An Introduction To SASS
In simple words, SASS is a CSS pre-processor which extends CSS’s capabilities as a basic programming language. SASS allows the use of variables, mathematical operations, functions, imports, mixins, loops, and other capabilities that make CSS writing considerably more effective. As a result, SASS will compile your code and provide CSS output that web browsers can read.
Programmers will have no problem grasping the concepts of SASS. If you don’t know how to code, the process will take a bit longer for you. You won’t need to code CSS from scratch after learning SASS.
Without further ado, let us look at the advantages of using SASS:
Supports CSS Syntax
SASS is similar to CSS. Basically two syntaxes are included in SASS: SASS and SCSS, which is the most often used of the two. Because SCSS syntax is CSS compatible, simply change the extension of your .css file to .scss and that’s it! your first SCSS file is ready.
At this point, it is obvious that you are not leveraging any of the features that SASS provides, but at the very least, you are not required to spend time learning SASS from the ground up. You’ll be able to explore SASS syntax as you go from here.
You Can Define Variables
Using SASS as a CSS pre-processor gives you the option to use variables. It is possible to reuse values stored in variables across your SASS files indefinitely, no matter where they are used. Using it is simple, yet powerful.
Assume you’re creating a website and you are using red colour for everything, including buttons, menus, icons, and containers. You’re also utilising two fantastic fonts: Roboto and Open Sans. Using conventional CSS would necessitate repeating the same code, however SASS enables you to store these values as variables:
$red: #FF0000;
$roboto-font: 'Roboto', sans-serif;
$open-sans-font: 'Open Sans', sans-serif;After you’ve created the variables, you may utilise them as follows:
body {
color: $red;
font: $roboto-font;
}
div {
background-color: $red;
font: $open-sans-font;
margin: 10px;
}When the SCSS file are compiled, SASS will replace the variable names with their corresponding values. If you want to change the color’s value, just update the variable content and recompile. “Find and Replace” method using the text editor is now outdated.
Supports Nested Syntax
Another wonderful advantage of CSS pre-processors is their enhanced syntax. You may utilise nested syntax in SASS, which is code placed within another piece of code that has a wider scope. Nesting is a useful feature in SASS since it makes it easier to target specific elements. CSS selectors are used to nest HTML elements.
Nesting has several advantages, the syntax is more natural and easier to read. Saves time by not requiring selectors to be rewritten numerous times. Because of its better visual hierarchy, the code is easier to maintain.
div {
color: $red;
font: $open-sans-font;
p {
padding-right: 1.5rem;
a {
margin: 6px;
text-decoration: none;
font-size: 1rem;
span {
font-weight: 600;
}
}
}
}Be careful, though, that nesting excessively deep is not a great approach. Increasing the depth of a nest increases its verbosity and hence the size of compiled CSS file, as nesting is flattened in process of compilation.
Use Of Mixins
Just like variables, what if you have code blocks that repeat in your style sheet multiple times? We use mixins to do this. Mixins are similar to functions in other programming languages. Mixins can acceps arguments, including default parameters, and return a value or a value set. Do not mistake a mixin with a functions in SASS because SASS also has functions. For example:
@mixin set-font( $family: 'Roboto' , $weight: 600 , $style: italic ) {
font-family: $family , sans-serif;
font-style: $style;
font-weight: $weight;
}Once you’ve defined your mixin, you may use it wherever you like. Keep in mind that no parameters are required because default values have been declared:
p {
@include set-font;
color: $red;
}As a result of this, we will have:
p {
font-family: 'Roboto', sans-serif;
font-style: italic;
font-weight: 600;
color: #FF0000;
}To make changes to the default mixin variables, just pass the different arguments to the @include call.
p {
@include set-font('Open Sans', 400);
color: $blue;
}Use Of Import
Your stylesheets will get more complicated as your project expands. You could add comments to your thousand line style sheet and then use a text editor to search and edit the code, However, that is not a viable option. You may also divide your CSS file into ten or twenty pieces, however this would result in importing each .css file by an HTTP request. That’s something you also don’t want to happen.
Using the @import rule, you may import many small SASS files, making your code more modular and easier to maintain. Apart from CSS @import rule, this SASS @import rule combines all the SCSS imported files in just one CSS file, thus just one HTTP call will be requested since you are sending a unique CSS file to the web server. An illustration of this would be:
@import "assets/";
@import "assets/slick";
@import "assets/bootstrap4";
As you can see, there’s no need to specify the file extension name, and the import path can include folders as well, so you can arrange your SASS directory as you like.
Good Support And Documentation Available
Another benefit of adopting SASS is the extensive online documentation. SASS provides everything you’ll need to become an expert, including courses and books. Visit their documentation page to get started. The SASS community page has an a lot of useful information as well.
Even Bootstrap Developed With SASS
With Bootstrap experience, knowing SASS will allow you to alter the web framework by just altering the SASS code. It sounds incredible, don’t you think? Changing the values of a few variables is all it takes.
Let’s assume, for example, you’re not satisfied with the default breakpoints provided by Bootstrap and want to add another or alter the existing. To alter the existing breakpoints, just edit the $grid-breakpoints mapping variable in the _variables.scss file. We’ve included an extra 1440px and changed the “sm” breakpoint to 300px in the following example:
$grid-breakpoints: (
xs: 0,
sm: 300px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1440px
) !default;Now xxl will be added to all responsive classes generated by Bootstrap when the original Sass files are compiled and sm breakpoint value is cjanged to 300px. For instance, if Bootstrap’s default responsive classes “col-sm-4,” you’ll now be able to use “col-xxl-4” as well. It is just to illustrate how the default aspects of Bootstrap can be altered; you can change colors, fonts, and so on in the same way.
