Kr Mangalam university

SAAS(syntactically awesome style

sheets)

Submitted by : Shagun
Yadav
Submitted To : Ms. Neetu
Roll no : 2101010004
(Web programming with
Course : B.Tech (CSE)
python and javascript)
IV Semester
 What is SAAS(syntactically
awesome style sheets)
•Sass stands for Syntactically Awesome Stylesheet
•Sass is an extension to CSS
•Sass is a CSS pre-processor
•Sass is completely compatible with all versions of CSS
•Sass reduces repetition of CSS and therefore saves time
•Sass was designed by Hampton Catlin and developed by Natalie Weizenbaum in
2006
•Sass is free to download and use
 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.
Sass File Type :
Sass files has the ".scss" file extension.

SAAS Comments
Sass supports standard CSS comments
/* comment */ , and in addition it
supports inline comments // comment
:
 SAAS EXAMPLE

 /* define primary colors */

$primary_1: #a2b9bc;
$primary_2: #b2ad7f;

/* use the variables */

.main-header {
background-color: $primary_1; // here you can put an inline
comment
}
 Sass Installation
•
❮ Previous
Operating system - Sass is platform independent
• Browser support - Sass works in Edge/IE (from IE 8), Firefox,
Chrome, Safari, Opera
• Programming language - Sass is based on Ruby

Official Sass Web Site :

Read more about Sass at the official Sass web
site: https://sass-lang.com/
 Sass Variables
 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;
 SAAS FUNCTIONS
 Sass string
 Sass numeric
 saas list
 Saas map
 Saas Selector
 Saas Introseption
 Saas colour
 Sass String Functions

 The string functions are used to manipulate and get information

about strings.
 Sass strings are 1-based. The first character in a string is at index 1,
not 0.
 Sass Numeric Functions

Function Description & Example

abs(number) Returns the absolute value

of number.

Example:
abs(15)
Result: 15
abs(-15)
Result: 15
Sass List Functions

Function Description & Example

append(list, value, Adds a single value to
[separator]) the end of the
list. separator can be
auto, comma, or space.
auto is default.

Example:
append((a b c), d)
Result: a b c d
append((a b c), (d),
comma)
Result: a, b, c, d
Sass Map Functions
❮ Prev

Function Description & Example

map-get(map, key) Returns the value for
the specified key in the
map.

Example:
$font-sizes: ("small":
12px, "normal": 18px,
"large": 24px)
map-get($font-sizes,
"small")
Result: 12px
 Sass Selector Functions

Function Description & Example

is-superselector(super, sub) Checks whether
the super selector matches all
the elements that sub matches.

Example:
is-superselector("div",
"div.myInput")
Result: true
is-superselector("div.myInput",
"div")
Result: false
is-superselector("div", "div")
Result: true
Sass Introspection Functions

Function Description & Example

call(function, arguments...) Calls a function with
arguments, and returns the
result.
content-exists() Checks whether the current
mixin was passed a @content
block.

feature-exists(feature) Checks whether feature is

supported by the current Sass
implementation.

Example:
feature-exists("at-error");
Result: true
 Sass Color Functions

Function Description & Example

rgb(red, green, blue) Sets a color using the Red-Green-
Blue (RGB) model. An RGB color
value is specified with: rgb(red,
green, blue). Each parameter
defines the intensity of that color
and can be an integer between 0
and 255, or a percentage value
(from 0% to 100%).

Example:
rgb(0, 0, 255); // rendered as blue
because the blue parameter is set
to its highest value (255) and the
others are set to 0