Dear all, welcome to this new tutorial dedicated to Sass, an outstanding
CSS extension that eases the creation and management of long and complex
CSS codes attached to your HTML document! In just 11 minutes we are going
to see everything you need to know to start coding with it!
Sass stands for 'Syntactically Awesome StyleSheets' and it is a very
powerful language to realize complex CSS files in no time.
To follow this video a basic knowledge on HTML and CSS coding is mandatory.
Make sure to catch our HTML tutorial to recover these basics!
Let's start with this simple HTML document. To code with Sass you can use
any textual editor, such as the free Notepad++. Just create a new file and
define the first variables by typing $, the variable name, : and then the
correct value, ending the statement with ; .
At the bottom let's pick the body tag - such as the entire text of your
HTML document - and set its properties within {}, such as the font color
equal to the $myColor variable and the font size to the $myFontSize
variable (22 pixels). The properties syntax does not change between Sass
and CSS.
Once your Sass code is ready, save it in a .SCSS file. This won't be ready
to use since browsers are not able to read Sass codes. You first need to
convert the Sass code into a CSS file by using a transpiler.
The official Sass page suggest several transpilers you can use on Windows,
MacOS and Linux with also the option to install Sass on the command line,
although we do not recommend this for beginners. In this video we will use
the free and simple Scout-App.
After installing Scout-App specify the project HTML folder, the Input
Folder (where your .SCSS files are located) and the Output Folder (where
the resulted CSS files are saved). It is very useful to have the project
and the Output folder the same in order not to use relative paths as you
code with Sass.
As you click on the Play button on the left Scout-App converts your Sass
codes into .CSS files, in this case a single one. You can also leave the
application free running to get your .CSS files always updated until you
stop the process.
The resulted .CSS file applies the properties defined in the Sass code.
You just need to attach it to your HTML document within the head tag by
adding the standard link tag with the .CSS file name as href attribute
(without relative paths, since it is located within the HTML project
folder), 'stylesheet' as rel attribute and 'text/css' as type attribute.
So here it is the result!
In this second example we assign to the body tag Lucida Console as font
family, 18 pixels as font size and red as font color according to the
variables defined above. For the paragraph (p) tag, we apply bold text
with $FontWeight and another font color, this time defined with its
hexadecimal code. Then transpile the code to update the attached CSS file
and check the result.
Scout-App shows several formats for the resulted CSS file. For example
you can select Compressed to get the most compact .CSS code or choose
Nested to get the most comprehensive code instead. The format changes but
not the final result on the HTML appearance.
You can also assign properties to specific ID selectors. Type #, the ID
selector name (special) and all its properties under {}, such as the
font color equal to the $ThirdColor value. Save the Sass code, transpile it
and then add this ID selector to any paragraph with id, = and special under
"". You will get the new color on such paragraph as you refresh
the browser.
You can also define properties inside other properties. For example let's
take the body text with body, : and then its properties under {}. Instead
of using font-family and font-size you can type font, : and then set
family size within {}.
You can also define properties for entire classes. Just type . , the class
name (main-title) and then its properties under {}, in this case the
$ThirdColor variable as font color. If you save the Sass code, transpile it
and associate this new class to an h1 heading tag with class, = and
main-title under "", this title assumes the class colors as defined.
The directives are one of the most powerful features inside Sass. These
are indeed functions (with or without input parameters) that realize
operations when they get called within the code.
In this video we are going to see some useful ones, so make sure to visit
our dedicated link in the video description for a more comprehensive list
of the available Sass directives!
Let's create a main-p class with its properties and then another
secondary-p class with a centered text alignment. If you also add @extend
with the .main-p class name you import all the main-p class properties into
the second class, without repeating the statements. As you save and
transpile you get the two classes identical except for the centered
alignment of the secondary-p class at the bottom side of the page.
Another useful directive is the @mixin. Type @mixin followed by a proper
name (my-format) and several properties under {}. As you define again the
.main-p class you can add @include and then my-format to call the function
above, in order to import its saved set of properties.
With another directive called @import you can import the content of a
.SCSS file into another. For example if you set a red font color to the h1
tag and save the Sass code as Ex2.scss you can import its content in
another code with @import and the Ex2 file name without any extension and
within "". The simple name is sufficient since both Sass codes are located
within the same Input folder.
When you save and transpile multiple .SCSS files Scout-App generates a
.CSS file for each of these, although you just need the main .CSS file
that you have attached to your HTML document. In this example you get the
red heading title from the Ex2 Sass file and the blue body tag from the
main Sass code.
These directives can also admit input parameters. For example you can type
@mixin, txt-set as name and two parameters within () called $val1 and
$val2 separated by commas. So when you call the directive with @include
you must also specify the values to assign in the same order within (),
so red for the $val1 color and center for the $val2 text alignment.
Keep in mind at the special # character in Sass, realizing a string
interpolation. Instead of assigning values to variables you can store
CSS properties to them, using # and the variable name within {} when
calling the CSS property.
The @if directives are very useful when you want to run a set of statements
only in case a specific condition is true. With the input parameter $val
above type @if, the variable name ($val), == to say 'equal' and the value
to verify (soft), followed by the statements to run under {} if $val is
indeed soft.
You can also continue with @else if to specify another condition such as
$val equal to dark, with another set of statements under {}. You can also
verify if $val is different than dark with !=. Finally you add an @else
directive without conditions to apply other properties in case none of the
conditions above is true.
At this point define the .text class to fix a font size of 18 pixels and
the font color from the @mixin function, depending on the value assigned
to the input parameter $val.
The @for directive is very useful to realize a FOR cycle, such as a
repetitive cycle running a list of statements for a fixed number of times
defined in advance.
For example let's consider this HTML document with four text lines. In a
new .SCSS file type @for and then a $i variable that is used as counter,
such as a numerical value that starts from 1 and gets incremented at each
cycle up to 6. Then define all the statements within {}, in this case
creating a new class named line, - and then a number taken from the counter
through the #. Each new class also gets a font size at 10 pixels multiplied
(*) by the counter value at each cycle. You can also run other basic math
operations with +, - and / .
The result of this cycle is a .CSS file with five classes, each with its
font size incrementing. The cycle stops when the counter reaches 6, so you
get five classes in total.
There are also other useful cycles in Sass, make sure to open our video
description to learn more!
These are the basics you need to start with Sass! In the video description
you can also download this simple Sass code that shows how this language
can be very powerful in respect to standard CSS files.
A @mixin directive named colors runs an @if that assigns a different
background and text color depending on the $template variable value between
dark and bright. This way you can easily generate two different .CSS files:
one using bright colors and another using dark ones for the whole
HTML page.
Thank you very much for watching this tutorial! Visit our YouTube channel
and our website to get more free and outstanding tips on other coding
languages and programming!