SASS Basics - Lena Design

A CSS preprocessor is a program that lets you generate CSS from the pre-processors own unique syntax. There are many CSS preprocessors to choose to learn, however the most popular around right now the pre-processors is Sass.

Before you continue you should have a basic understanding of the following:

HTML
CSS

What is Sass?

Sass (short for syntactically awesome style sheets) is a style sheet language. Sass reduces the repetition of CSS and therefore saves time.

Why Use Sass?

Stylesheets are getting larger, more complex, and harder to maintain. This is where a CSS pre-processor can help.

Sass lets you use features that do not exist in CSS, like variables, nested rules, mixins, imports, inheritance, built-in functions, and other stuff.

How Does Sass Work?

A browser does not understand Sass code. Therefore, you will need a Sass pre-processor to convert Sass code into standard CSS. This process is called transpiling. So, you need to give a transpiler (some kind of program) some Sass code and then get some CSS code back.

Note: Sass files have the “.scss” file extension.

Sass Installation

There are a good many applications that will get you up and running with Sass in a few minutes for Mac, Windows, and Linux. You can download most of the applications for free but a few of them are paid apps: https://sass-lang.com/install (I am working with the Koala app).

Sass Variables

Variables are a way to store information that you can re-use later.

With Sass, you can store information in variables, like:

Strings
Numbers
Colors
Booleans
Lists
Nulls

Sass uses the $ symbol, followed by a name, to declare variables:

Sass Variable Syntax:

$variablename: value;

The following example declares 3 variables named myFont, myColor, and myFontSize. After the variables are declared, you can use the variables wherever you want:

Note: I am working with the Koala app, and Adobe Dreamweaver CC HTML Editor, however, you can use any app and any HTML editor and it will work fine too.

HTML

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>SASS</title>
	<link rel="stylesheet" href="test.css">
</head>

<body>
	<h1>Hello!</h1>
	<p>How are you?</p>
</body>
</html>

SASS

$myColor: green;
$myFont: Helvetica, sans-serif;
$myFontSize: 20px;

body{
	font-family: $myFont;
	font-size: $myFontSize;
        color: $myColor;
}

Output:

CSS Output:

So, when the Sass file is transpiled, it takes the variables (myFont, myColor, etc.) and outputs normal CSS with the variable values placed in the CSS, like this (you don’t need to do anything in your CSS sheet):

body {
  font-family: Helvetica, sans-serif;
  font-size: 20px;
  color: green; }

Sass Variable Scope

Sass variables are only available at the level of nesting where they are defined.

SASS

$myColor: green;

h1 {
  $myColor: blue;
  color: $myColor;
}

p {
  color: $myColor;
}

The other definition, $myColor: blue; is inside the <h1> rule, and will only be available there.

Output:

Using Sass !global

The default behaviour for a variable scope can be overridden by using the !global switch.

!global indicates that a variable is global, which means that it is accessible on all levels.

Example:

SASS

$myColor: blue;

h1 {
  $myColor: red !global;
  color: $myColor;
}

p {
  color: $myColor;

Now the color of the text inside a <p> tag will be red.

Hope this helps!

CSS Advanced

CSS Grid

CSS Columns

Share this: