To write CSS professionally, we have to learn one of the CSS preprocessor like SASS, SCSS, LESS, … Because when using one of them, we do not repeat code, easily maintain CSS code, …
So, in this article, we will discuss about SASS preprocessor.
Table of contents
- Introduction to SASS
- Nested Rules
- Import files
- Variables
- Use @mixin
- Function in SASS
- Extend properties in SASS
- Placeholder in SASS
- Condition statements
- Loop statement
- Functions for processing number
- Wrapping up
Introduction to SASS
SASS is an acronym of Syntactically Awesome Stylesheets, and is an extension of CSS that adds power and elegance to the basic language. It allows us to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax.
The coding convention of SASS is as same as with CSS. It also have curly bracket to include all properties of elements, and use semicolon to end up code of properties, and some the other things.
Beside SASS syntaxes in SASS, there is a SCSS syntaxes. So, we will have some differences between SASS syntaxes and SCSS syntaxes.
- Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.
- Sass has two syntaxes. The new main syntax (as of Sass 3) is known as “SCSS” (for “Sassy CSS”), and is a superset of CSS3’s syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss.
- The second, older syntax is known as the indented syntax (or just “Sass”). Inspired by Haml’s terseness, it’s intended for people who prefer conciseness over similarity to CSS. Instead of brackets and semicolons, it uses the indentation of lines to specify blocks. Although no longer the primary syntax, the indented syntax will continue to be supported. Files in the indented syntax use the extension .sass.
Nested Rules
SASS will let us nest our CSS selectors in a way that follows the same visual hierarchy of our HTML.
Be aware that overly nested rules will result in over-qualified CSS that could prove hard to maintain and is generally considered bad practice.
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Language</a></li>
<li><a href="#">Technologies</a></li>
<li><a href="#">About me</a></li>
</ul>
</nav>
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
Import files
When our css file is more bigger than before, we have to think about splitting up css files into smaller files. Because it keeps things easier to maintain.
A convention name of Sass file is with a leading underscore. We might name it something like _partial.scss
.
The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the @import
directive.
The drawback of using @import
is that each time we use @import
in CSS it creates another HTTP request.
Sass builds on top of the current CSS @import
but instead of requiring an HTTP request, Sass will take the file that you want to import and combine it with the file you’re importing into so you can serve a single CSS file to the web browser.
For example:
/* _reset.scss */
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
/* base.scss */
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}
Variables
Syntax:
$variable_name: value;
Example:
$bkgr-color: #ffffff;
Use @mixin
In programming language, using function will make our program do not repeat so much time again. Our program will easily maintain, readable, apply Don’t Repeat Yourself principle, and Keep It Simple, Stupid principle in SOLID.
So, in CSS, using @mixin
will play the same role with function in Programming.
Syntax:
-
No parameters
@mixin mixin_name { ... }
-
Parameters
@mixin mixin_name(parameter_list) { ... }
-
Using
@mixin
@include mixin_name
Example for mixin:
-
No parameters
SASS file
@mixin menu{ #menu { a { background: #333; text-decoration: none; } li { height: 30px; line-height: 30px; } } } @include menu;
CSS file
#menu a { background: #333; text-decoration: none; } #menu li { height: 30px; line-height: 30px; }
-
Parameters
SASS file
@mixin nav($backgroud, $color){ background: $backgroud; color: $color; } .nav{ @include nav(red, white); border: solid 1px; }
CSS file
.nav { background: red; color: white; border: solid 1px; }
-
Default parameters
@mixin nav($backgroud, $color : white){ background: $backgroud; color: $color; } .nav{ @include nav(red); border: solid 1px; }
-
Pass parameter’s name that is as same as variable’s name
@mixin nav($background, $color){ background: $background; color: $color; } .nav{ @include nav($color : blue, $background : red); border: solid 1px; }
-
Insert additional properties into
@mixin
@mixin nav($border){ border: $border; @content; } .nav{ @include nav(solid 1px red 1231 ){ padding: 20px; }; }
After finding out about
@mixin
, we see that@mixin
is used to combined a code segment into one. It is as same asprocedure
in programming language, because it does not return value.
Function in SASS
Syntax:
@function function_name($first_var, $second_var, ...) {
...
@return value;
}
Using @function
, we have to return value. If we do not want to return value, using placeholder
or @mixin
.
Extend properties in SASS
To get an example about extend in SASS, we will think about buttons’s other styles such as .btn-success
, .btn-primary
, .btn-danger
, …
All buttons will have common properties, and each button still has the other properties such as background-color
, …
Example for button in Bootstrap:
-
SCSS file will have:
.btn { border: solid 1px; text-align: center; font-size: 16px; padding: 20px 10px; } .btn-primary { @extend .btn; } .btn-success { @extend .btn; background-color: blue; } .btn-danger { @extend .btn; background-color: yellow; }
-
After compiled, CSS file will have:
.btn, .btn-primary, .btn-success, .btn-danger { border: solid 1px; text-align: center; font-size: 16px; padding: 20px 10px; } .btn-success { background-color: blue; } .btn-danger { background-color: yellow; }
Finally, we will have hierarchical inheritance.
SCSS file
.floatLeft {
float: left;
width: 50%;
}
.columnLeft {
@extend .floatLeft;
backgroud: #ffffff;
}
.boxLeft {
@extend .columnLeft;
color: #000;
}
CSS file
.floatLeft, .columnLeft, .boxLeft {
float: left;
width: 50%;
}
.columnLeft, .boxLeft {
backgroud: #ffffff;
}
.boxLeft {
color: #000;
}
Placeholder in SASS
In the above section - Extend properties in SASS, we will find that .btn
is redundant. Because we will not use it in html.
<button class="btn-primary">Click me</button>
<button class="btn-success">Here</button>
So, to reduce this problem, we will use PlaceHolder
, then, SASS will not compile this .btn
to selector of CSS.
Syntax of PlaceHolder:
%placerName {
...
}
Using placeholder, we have:
**SCSS file”
%btn {
border: solid 1px;
text-align: center;
font-size: 16px;
padding: 20px 10px;
}
.btn-primary {
@extend .btn;
}
.btn-success {
@extend .btn;
background-color: blue;
}
.btn-danger {
@extend .btn;
background-color: yellow;
}
After compiled SASS file, we have:
CSS file
.btn-primary, .btn-success, .btn-danger {
border: solid 1px;
text-align: center;
font-size: 16px;
padding: 20px 10px;
}
.btn-success {
background-color: blue;
}
.btn-danger {
background-color: yellow;
}
When we will not use selector in html, we will declare this selector is placeholder.
Condition statements
Syntax:
-
Using if … else
@if ($condition) { ... } @else { ... }
-
Using if … else if … else
@if ($first_condition) { ... } @else if ($second_condition) { ... } @else { ... }
For example:
$with-nav : 500px;
@if ($with-nav < 280px){
h1 {
display: none;
}
}
@else{
h1 {
display: block;
}
}
Loop statement
Syntax:
-
for statement
@for $i from $begin_value through $end_value { ... }
To get the value of
$i
, we will use#{$i}
.sOr
@for $i from $begin_value to $end_value { ... }
With the above loop statement, we will omit the last value -
$end_value
.For example:
@for $i from 1 through 4 { #item-#{$i}{ background: red } }
-
while statement
@while condition { ... }
-
each statement
@each $value in $values { ... }
$values
is a list data type. List data type is an array of values that is splitted up by space. Each value has a curly branket or not.Example:
$borders: "solid 2px" "solid 3px"; @each $border in $borders { .btn { border: #{$border}; } }
So
@each
will used to iterate an array of values, when using for statement, while statement can not do that.
Operators
The operators in SASS will be derscribed in the below table:
Types | Operators |
---|---|
Assignment | : |
Mathmetical | + - * / % |
Comparator | == != > >= < <= |
Logical | and or not |
append string | + |
color | + |
Functions for processing number
Funtions | Description |
---|---|
percentage($number) | transform $number into percentage (%) |
round($number) | |
ceil($number) | |
floor($number) | |
abs($number) | get the absolute value of $number |
min($numbers…) | find min number from $numbers - list data type |
max($numbers…) | find max number from $numbers - list data type |
random([$limit]) | create random number that do not reache $limit |
Wrapping up
- All of these are fundamental knowledge about SASS.
- Beside understanding SASS, we have to master about accessing selectors.
Thanks for your reading.
Refer:
https://medium.com/@awesome_sayrah/introduction-to-sass-scss-and-less-7ff7e494e798