Styling applications made easy with Sass
CSS (Cascading Style Sheets) is widely popular because of the simplicity it offers while presenting web applications. It comprises style sheets which are long lists that have rules to describe how your web page should look like. If you’re into web designing then you must have heard the term ‘Sass’. It is very important for any developer working on web apps to understand exactly what Sass is and how it works.
Sass stands for Syntactically Awesome Style Sheets and is a preprocessor that allows you to use features that are not a part of the extensive CSS standard. It is also responsible for adding special features like variables, nested rules, and mixins (occasionally referred to as syntactic sugar) into the regular CSS. The main objective is to make the coding procedure easier and more structured. With Sass, you can write styling requirements in .scss or .sass files, which later will be compiled into a regular CSS file. It is the newly compiled file that will be loaded in the browser to style the web application and will help the browser apply the styles to your web page in the right way. Let me explain this in detail with practical examples. But first, let’s see why you should go for Sass.
Why Sass?
CSS syntax compatibility: Sass uses two different syntaxes that are Sass and SCSS. If you are thinking that you will have to spend hours to start using the SCSS, then let me tell you that the SCSS syntax is fully compatible with CSS. So, whenever you want to create an SCSS file, simply rename the .css file to .scss.
Variables for all your requirements: Consider a scenario where you want to repeat a certain style element like color or font. What will you do? You will copy that code or value and paste it wherever you want throughout the code. No! Thanks to Sass, you can just store these values as variables and repeat them wherever you want just by calling these variables instead of writing the whole code. Use them anywhere, any number of times throughout the Sass file. Also, if you want to change the value, just update it in the variables, recompile, and done. Now, that is what makes Sass easy and powerful.
Nested syntax: Nested structure is one of the oldest yet one of the most powerful structures in coding. It allows you to declare one structure inside another. The basic advantage of nested syntax is it makes it easy to maintain the code with better readability and structure. CSS pre-processors have improved their ability with the nested syntax. This ability has provided Sass to perform a broader function. You can target the elements cleanly and you can use the nested structure for HTML elements.
Mixins: There are times when a block of code is repeated in style sheet more than once. So, to save you from all the hassle of writing it all over again, you can use mixins. This may sound like functions in other programming languages so do not get confused between mixins and functions because Sass also has functions. The basic difference is that the output of mixins is compiled directly into CSS styles, whereas functions return a value that can then become the value for a CSS property. Another advantage of mixins is that if you want to change the value in the block, just change the default mixins value using the @include call.
Let’s see how you can install Sass in your application.
How to Install Sass?
The first step of using any scripting language is to set it up for your project. Here are some of the easy ways to install Sass:
- Install Sass using the command line
Run compile .sass file and .scss files to .css files. “my-directory/styles/index.scss/styles/inline.css’’
- Use Node.js to install the Sass
Use the npm run command: npm install -g sass’
Now, let me explain how easy it is to use Sass with actual code.
How to use Sass variables?
Sass can store the information in variables such as numbers, strings, lists, colors, and boolean values. Here is how you can use Sass variables:
Syntax:
$myvariablename: value of variable;
Example of using Sass variables:
Let’s take an example of variables for primary colors which is one of the most important factors for any web application's look and branding -
‘’$my-color: #a2b9bc”
Use variables for the primary colors
.main-header {
color: $my-color;
}
How to use nested rules in Sass?
One of the reasons for using Sass over CSS is it allows you to use nested structures that let you combine multiple CSS rules within one another. Let’s see how you can do that with an actual example:
Syntax:
{
//css attributes
{
//css attributes
}
{
// CSS attributes
{
//css attributes
}
}
}
Example:
.main-container{
h1{
font-size:25px;
color:#E45456;
}
.card{
h1{
font-size:25px;
color:#E45456;
}
p{
font-size:25px;
color:#3C7949;
}
}
}
How to import Sass files?
Import directive is used to copy your SCSS code from one file to another file. There are certain rules to use import directives, such as the extension of the file should be .css and the file name must start with http://
Syntax:
@import <SCSS-File-Name.scss>;
Let’s take an example, assume that you have an SCSS file which is named "variables.scss" Here is what the file will be like:
File Name -> variables.scss $font-color: #eeeeee; $main-font-family: “Helvetica”, sans-serif;
To import the " style.scss" file into another file, call "home.scss".
File Name -> home.scss
@import "variables.scss";
body {
font-family: $main-font-family;
color: $font-color;
}
Sass mixin and @include directives:
Mixin is another feature that can reduce redundancy and makes it possible for you to reuse codes in your applications and websites. The role of a mixin directive is to create CSS code. It can contain anything that is allowed in CSS or Sass and is more powerful than @extend because you can pass arguments to the mixin and freedom to modify the styles whenever you use them.
Include directive is used for including mixin to your code. It can be defined using @mixin directive:
Syntax:
@mixin name {
property_name: value;
property-name: value;
}
Use @include directive to include a mixin:
Selector-name {
@include mixin-name;
}
Example:
.container {
@include outline-stylesheet;
Border-color: red;
}
Use of @extend directive in Sass:
The Sass @extend directive gives an easy way to a selector by allowing it to inherit the styles of another one. When it comes to component-based CSS architecture, the Sass @extend directive is quite useful, it lets you easily create variations from a component just by extending it.
Given below is a Sass example that can be used to create a basic style for your textbox:
Syntax:
@extend <class-name>
Example:
.simple-textbox {
height:10px;
padding: 20px 10px;
}
.textbox-report {
@extend .simple-textbox;
border-color: green;
}
Use of Sass functions:
Functions give you the authority to define complex operations on SassScript values that can later be used throughout your stylesheet. Functions can easily abstract out the common formulas and behaviors for you in a readable manner. You can also create your functions and then call them by using the function name and its parameter values.
Syntax:
function-name($args){
Return value;
}
Example:
In the example given below, let’s take two variables -
$total-grid: 8
$total-columns:3
Here is the function ->
column-height( ) {
$return percentage($total-grid/total-columns)
}
In the above example, the function cannot take any arguments, and the $total-grid is divided by $total-columns. Here, I have used the built-in function, i.e., percentage. Now, let’s see how to call the function:
.col-12 {
height: column-height()
}
The function can now compile the code, and the output achieved will look like this:
.col-12{
height:37.5%
}
Sass includes various functions for string, numeric, list, map, selector, and color.
Apart from the features I mentioned, there is more to Sass, like inheritance, control directives, data types, interpolation, etc. Sass enhances the inherent capabilities of CSS because of these features. And it lowers the burden of writing the same code again and again. So, try out Sass now to make your front-end development smoother.