Using SCSS Files

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.

What is SASS?

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.

SCSS Basics

To get the most out of SCSS you need to know the basics.

Variables

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.

Math

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.

Functions

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.

Nesting

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.

Imports

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.

Mixins

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.