London, 7 April 2023 | | 1

SASS

Installation

Download .exe file from the following URL:

http://rubyinstaller.org/downloads/

Install and run the command prompt with ruby

Sass -- watch style.sass:style.css

Sass – watch <sass filename>:<css filename>

SASS

• SASS (Syntactically Awesome Stylesheets) is a stylesheet language designed by Hampton Catlin and developed by Nathan Weizenbaum.

• SASS is a scripting languages and it is interpreted to CSS.

• SASS uses indentation to separate code blocks and semicolons to separate rules

Variables

•SASS allows variables. Variables are defined with “$” dollar sign and variable assignment is done using “:” colon. They can be used throughtout the stylesheet.

•Variables can be arguments or results of the several functions. During translation, the values of the variables are inserted in the output css

Examples

$red : #ff0000

$margin : 16px

.nav

border-color : $red

margin: $margin / 2

OUTPUT:

.nav {

border-color: red;

margin: 8px; }

Nesting

•It allows code to be inserted within each othertable.hl

margin: 2em 0

td.ln

text-align: right

OUTPUT:

table.hl {

margin: 2em 0; }

table.hl td.ln {

text-align: right; }

Mixins

•Mixins is defined with directive “@mixin”

•Variables can be arguments or results of the several functions. During translation, the values of the variables are inserted in the output css

Examples 1

@mixin table-base {

th {

text-align: center;

font-weight: bold;

}

td, th {padding: 2px}

}

.data {

@include table-base;

}

OUTPUT:

.data th {

text-align: center;

font-weight: bold;

}

.data td, .data th {

padding: 2px;

}

Example 2

@mixin spacing($dist)

margin: 0 $dist 0 $dist

.content

@include spacing(10px)

@mixin primNav

display: inline-block

width: 100%

border-top: 1px solid #e6e6e6

border-bottom: 1px solid #e6e6e6

.nav ul li

@include primNav

OUTPUT:

.content {

margin: 0 10px 0 10px; }

.nav ul li {

display: inline-block;

width: 100%;

border-top: 1px solid #e6e6e6;

border-bottom: 1px solid #e6e6e6; }

Selector inheritance

• Allows the selector to inherit all the properties to another selector

• Duplication of code can be avoided

Example1

.heading

color: red

.big-heading

@extend .heading

font-size: 48px

OUTPUT:

.heading, .big-heading {

color: red; }

.big-heading {

font-size: 48px; }

Example2

clearfix

content: "."

display: block

height: 0

clear: both

visibility: hidden

.data:after

@extend .clearfix

OUTPUT:

.clearfix, .data:after {

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden; }

Advantages

• Css styles can be reused

• Common css styles can be brought together through nesting

• It includes features like nesting, variables, mixins which makes it more manageable

Disadvantages

• Need thorough learning to understand sass

• Generated css is not aligned properly

• Difficult to understand since the syntax has no curly braces to distinguish and very confusing since all the styles are written one after another.

Links referred

•https://gist.github.com/674726

•http://sass-lang.com/

End