Introduction

Mon, 01 Jan 0001 00:00:00 +0000

Introduction

SASS is a styling framework which sits on top of CSS, which allows you to use loops, variables …

Every css file is a valid scss file (i.e. if you have a bunch of css files already you can simply convert them to .scss files to get started).

Installation on Mac

SASS is written in Ruby, hence you need to download Ruby to use SASS. The two programmes required to use SASS are Ruby and Ruby Gems (a package manager for Ruby).

Usage

Mon, 01 Jan 0001 00:00:00 +0000

Variables

Variables are intuitive as in any other programming language. The syntax for variables is like the below.

$my-color = "blue"

.my_class {
 color: $my-color;
}

Nesting

This is also intuitive but a very useful feature of scss. You can nest css classes. This is much more readable when you have several nested elements.

main article p {
 color: yellow
}

scss equivelant:

main {
 article {
 p {
 color: yellow;
 }
 }
}

Partials and Imports

You can create a partial in scss by naming your file with a leading _ (i.e. _header.scss). Then import the file with:

SCSS Notes on mattanalytix

Introduction

Introduction

Installation on Mac

Usage

Variables

Nesting

Partials and Imports