Scribd
Upload
6 views4 pages

SASS

SASS (Syntactically Awesome Style Sheets) is a CSS preprocessor that enhances CSS functionality by allowing the use of variables, nested rules, functions, and mixins, and is written in Ruby. It supports two syntaxes: SASS and SCSS, with SCSS being more widely used due to its compatibility with CSS syntax. SASS also includes features like variable interpolation, various data types, maps, and mixins for reusable styles, making it a powerful tool for efficient stylesheet creation.

Uploaded by

N
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
6 views4 pages

SASS

SASS (Syntactically Awesome Style Sheets) is a CSS preprocessor that enhances CSS functionality by allowing the use of variables, nested rules, functions, and mixins, and is written in Ruby. It supports two syntaxes: SASS and SCSS, with SCSS being more widely used due to its compatibility with CSS syntax. SASS also includes features like variable interpolation, various data types, maps, and mixins for reusable styles, making it a powerful tool for efficient stylesheet creation.

Uploaded by

N
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

Syntactically Awesome Style Sheet or simply called as SASS is a CSS preprocessor.

 It enables you to create style sheets faster.

 Extends the functionality of CSS by allowing you to use variables, nested rules, functions, and
mixins.

 SASS is written in Ruby language


 LESS, Stylus and PostCSS are few other popular CSS preprocessors.

 Sass is more stable, powerful and compatible with all versions of CSS.

 It is an open source preprocessor.

 It has its own syntax, which compiles to readable CSS. Hence you can write CSS easily (less code
in less time).

You must know that SASS supports two types of syntax:

 SASS Syntax
 SCSS Syntax
SASS Syntax

It uses indentation to identify code blocks and newline to separate lines within a block. These files are
saved with the .sass extension.

Sample:
.new
color:#ff0055
font-weight:bold
span
text-transform:uppercase

SASS syntax is not widely used.

SCSS syntax

An extension of CSS syntax is SCSS (Sassy syntax). It uses braces to identify code blocks and semicolons to
separate lines within a block. These files are saved with the .scss extension.

Sample:

.new {
color:#00ff55;
font-weight:bold;
}
span {
text-transform:uppercase;}
SASS variables are used to store information.

Variables are defined with a dollar sign ($ ) followed by a variable name

$color: red;

Variables can be a string, color, boolean, null or a list of values.

Variable Interpolation
Variables can be used anywhere in the SASS file.

They can be used (interpolated) in class, property or inside string of a plain text.

Example:

SCSS file

$car: Benz;
$speed: averagespeed;
.#{$car}
{ #{$speed}:336km/h; }
CSS file
.Benz { averagespeed: 336km/h; }

Sass script enables you to compute CSS selector, property or value using Sass expression.

A Sass expression is the combination of values and operators.

Sass transpiler will evaluate the sass expression before producing the CSS output.

Example:

SCSS file

$car: Benz;

{ car-name: $car; }

CSS file

{ car-name: Benz; }
SASS Datatypes

Supported datatypes

 Numbers

 Strings

 Colors

 Booleans and Nulls

 Lists

 Map

Chunking

The process of dividing sentences into segments that do not overlap is known as text chunking.

Specific extraction of noun phrases is known as Noun phrase chunking or NP chunking. Noun phrases
are important as they are often the keywords and are highly useful in information retrieval systems.

Examples of chunks include "the azure blue sky", "world's largest river", etc

Sass can recognize numeric datatype such as integer or real but it cannot recognize standard units such
as em or px.

Example:

add: 43 + 6; //"plain" numbers added together

add: 43px + 6; //"plain" number added to a pixel value

add: 22em + 8em; //two "em" values added together

add: 22px + 8em;// error

Sass strings are mentioned within single quotes, double quotes or without quotes.

Example:

SCSS file

$default-font: 'Arial';

p { font-family: $default-font, "Verdana", Georgia; }


CSS file

p { font-family: 'Arial', "Verdana", Georgia; }

Map

Maps are key-value pairs.

 They are wrapped within parenthesis.

 The map never writes their output directly to the CSS file, but map functions do.

Example:

SCSS file

$red-map: (light: #e57373, medium: #f44336, dark: #b71c1c);

p { color: map-get($red-map, light);}

CSS file

p { color: $e57373; }

Mixins

Mixins are used to create a group of styles, which are re-usable throughout the stylesheet.

They can be used to store multiple values or parameters, and are used to call the function as well. Helps
avoid repetitive coding.

@include Directive

The directive used to include the mixin in your document is @include.

You might also like