Using SCSS Files
See also: Working With Web Resources, Style Sheet Configuration, How Styles Is Applied, SCSS Editor
CSS (Cascading Style
Sheets) allows developers to define style, layout and everything required to
design stunning looking websites. But it does not take long before style sheets
can get very large and complex and hard to work with. They often contain
repetition with styles and making a change something like color
can cause problems locating all the places it needs to be changed. SASS is used
to simplify CSS writing.
SASS (Syntactically Awesome Style Sheets) is a CSS pre-processor that allows you to use variables, mixins, loops, functions, imports and other functionality that makes CSS writing more powerful and easier to manage. SASS is really an extension to CSS but introduces the concepts of a basic programming language.
SASS will compile the SCSS code and generate CSS output that the browser can understand.
There are two syntaxes for SASS. The first is known as SCSS (Sassy CSS) which is an extension of CSS and has a file extension of .scss. The second syntax is SASS which uses indentation instead of brackets and new lines instead of semicolons. This is commonly known as just SASS has a file extension of .sass. Verj.io supports just the SCSS syntax.
At runtime the SCSS file is compiled and the generated CSS file is sent back to the browser. If there is an error compiling the SCSS then the error is send back to the browser instead. The generated CSS file is cached for subsequent calls unless the file has been changed. If the SCSS file has been changed, then the file is compiled again and cached again.
To get the most out of SCSS you need to know the basics.
To declare a variable in SCSS you use the $ followed by the name of the variable:
$myColor :
#eeffcc;
body {
background : $myColor;
}
SCSS has variable scope, for example if you change a color in a selector, it will change the color only within the selector:
$myColor :
#eeffcc;
body {
$myColor : #cccccc;
background : $myColor;
}
p
{
color: myColor;
}
//when
compiled the paragraph selector color is #eeffcc;
Click here for more information on variables.
Unlike CSS, SCSS allows mathematical expressions. This is very useful for computing values within markup.
Supported operations:
+ |
Addition |
- |
Subtraction |
/ |
Division |
* |
Multiplication |
% |
Modulo |
== |
Equality |
!= |
Inequality |
Note that you cannot mix units. So you cannot do something like 100px * 20%:
$container-width:
100%
.container-1 {
width :
$container-widget / 2;
}
//container-1 width
compiles to 50%
Click here for more information on operators.
SCSS has built in functions available. A full list can be found here. The list of functions is very extensive and can make developing CSS much more powerful.
This is a very useful feature of SCSS and gives the ability to nest declarations. Basic nesting can be achieved by:
.container
{
width : 100%
h1 {
color : red;
}
}
//is
the same as writing in CSS
.container
{
width : 100%
}
.container
h1 {
color:
red
}
Click here for
more information on Nesting.
In SCSS you can import other
SCSS files. This way you can group together styles and reuse them elsewhere. To
do this we use the @import directive:
@import
“mycolors.scss”
.h1
{
background : $myRed; //myRed is declared in myColors.scss
}
SCSS is intelligent enough to know that the import directive is
another .scss file so you do not have to include the
file extension:
@import
“mycolors”
…
Click here for
more information on Import.
The mixin
directive allows you to include styles the same way @extend
would, but with the ability to interpret arguments. SCSS uses @mixin to define mixins
and @include to use
them.
//define
the mixin
@mixin transform($property)
{
-webkit-tranform : $property;
-ms-transform :
$property;
transform : $property;
}
//to
use
.container
{ @include transform(rotate(30deg));}
Click here for
more information on Mixins.