Introduction
Sass, or "Syntactically Awesome StyleSheets", is a language extension of CSS. It gives your basic CSS the power to do programmable things, which make it easier for you to simplify and maintain the style sheets for your projects.
In this blog, we'll learn how to store data in variables, nest CSS, create reusable styles with mixins, add logic and loops to your styles, and more.
I understood Sass but what is Scss then?
The most popularly used Sass syntax is SCSS(Sassy CSS). and It uses the exact same CSS syntax which we all know and then gives it features of Sass.
Yes, you are right!
Every CSS is also a valid SCSS.
Just change the extension to .scss and you're writing Scss now.
<style type='text/scss'>
$main-fonts: Arial, sans-serif;
$headings-color: green;
h1 {
font-family: $main-fonts;
color: $headings-color;
}
</style>
The alternative option we have is .sass syntax. This was made to make CSS effective by using Indentation of lines instead of curly-braces and brackets
<style type='text/sass'>
$main-fonts: Arial, sans-serif
$headings-color: green
h1
font-family: $main-fonts;
color: $headings-color;
</style>
Well, you can choose Sass or Scss as per your coding style. If you choose Saas, just go through their Documentation once
I will be going to use Scss here because Indention style coding is not my type.
It shares syntax with Css and has a great community too.
Creating Variables -
One feature of Sass that's different than CSS is it uses variables. They are declared and set to store data, similar to JavaScript.
In JavaScript, variables are defined using the let and const keywords. In Sass, variables start with a $ followed by the variable name. Here's an example:
/* scss */
$main-fonts: Arial, sans-serif;
$headings-color: green;
/* And to use the variables: */
h1 {
font-family: $main-fonts;
color: $headings-color;
}
These variables are useful when a number of elements have the same color. If that color is changed, the only place to edit the code is the variable value.
Nesting CSS using Sass -
Sass allows nesting of CSS rules, which is a useful way of organizing a style sheet.
Normally, each element is targeted on a different line to style it, like so:
/* CSS */
nav {
background-color: red;
}
nav ul {
list-style: none;
}
nav ul li {
display: inline-block;
}
For a large project, the CSS file will have many lines and rules. This is where nesting can help organize your code by placing child style rules within the respective parent elements:
/* Sass */
nav {
background-color: red;
ul {
list-style: none;
li {
display: inline-block;
}
}
}
Eliminate Repetitive CSS with Mixins -
In Sass, a mixin is a group of CSS declarations that can be reused throughout the style sheet.
Mixins are like Functions to CSS, here`s how to write one:
/* creating a mixin */
@mixin square($size){
width: $size;
height: $size;
}
The definition starts with @mixin followed by a custom name. The parameters such as ( $size in the example above) are optional. Now any time a square is needed, only a single line calling the mixin replaces having to type all the vendor prefixes. A mixin is called with the @include directive:
/* calling a mixin */
.avatar {
@include square(100px);
}
Using if/else -
The @if, @else if and @else directives in Sass is useful to test for a specific case - it works just like the if, else if and else statements in JavaScript.
@mixin text-effect($val) {
@if $val == danger {
color: red;
}
@else if $val == alert {
color: yellow;
}
@else if $val == success {
color: green;
}
@else {
color: black;
}
}
Creating a Sass Loop with @for
The @for directive adds styles in a loop and is similar to a for loop in JavaScript.
@for is used in two ways:
- Start through end - Includes the end part as part of the count.
@for $i from 1 through 5 { .text-#{$i} { font-size: 15px*$i; } } - Start to end - Excludes the end part as part of the count.
@for $i from 1 to 6 { .text-#{$i} { font-size: 15px*$i; } }
The #{$i} part is the syntax to combine a variable (i) with text to make a string. When the Sass file is converted to CSS, it looks like this:
.text-1 {
font-size: 15px;
}
.text-2 {
font-size: 30px;
}
...
.text-5 {
font-size: 75px;
}
This is a powerful way to create a grid layout. Now you have twelve options for column widths available as CSS classes.
Splitting Code with Partials -
Partials in Sass are separate files that hold segments of CSS code. These are imported and used in other Sass files. This is a great way to group similar code into a module to keep it organized.
Names for partials start with the underscore (_) character, which tells Sass it is a small segment of CSS and not to convert it into a CSS file. Also, Sass files end with the .scss file extension. To bring the code in the partial into another Sass file, use the @import directive.
For example, if all your mixins are saved in a partial named "_mixins.scss", and they are needed in the "main.scss" file, this is how to use them in the main file:
@import 'mixins'
Underscore and file extension are not needed in the import statement - Sass understands it is a partial. Once a partial is imported into a file, all variables, mixins, and other code are available to use.
Forget Copy/Paste -
Sass has a feature called extend that makes it easy to borrow the CSS rules from one element and build upon them in another.
$red: #f44336;
.alert {
padding: 20px;
color: white;
margin-bottom: 15px;
}
.error {
@extend .alert;
background-color: $red;
}
Wrap Up -
You may reach this point and think that we have covered quite a bit of Sass, but really it is just the tip of the iceberg. Sass is an extremely powerful tool that you can do some really incredible things with. I recommend you to don't just stop here and check out some of the resources below:
Resources -
- freecodecamp - A short course by freecodecamp on SASS.
- Their Documentation - The quickest way to get your hands dirty with Sass
That's it for the blog guys!
If you have any questions, feel free to leave them in the replies!