Sass is a CSS preprocessor that allows nesting, variables, mixins and more. It can be written using either the indented Sass or SCSS syntax. Sass files are compiled into normal CSS files. Sass supports variables, nesting, mixins, inheritance and other features to help organize large CSS projects and make them more maintainable. Some key Sass directives include @import, @media, @mixin, @if, @for and @each which provide control structures for conditionally including styles and generating repetitive code.
1. SASS
S Y N TA C T I C A L LY AW E S O M E S T Y L E S H E E T
2. AGENDA
a) What is Sass? b) Difference Between SASS and SCSS?
c) How to use comments in SASS and SCSS? d) General Guidelines for Proper Syntax.
e) How to Compile Sass Files f) Variables
g) Nesting h) Interpolation
i) Data Types j) Operations
k) Sass Directives l) Useful Links
3. WHAT IS A SASS ?
• SASS stand for Syntactically Awesome Style Sheets.
• SASS is a CSS Preprocessor.
• SASS can be written in either the sass or scss syntax.
• SASS files compile into CSS files.
4. WHAT IS A PREPROCESSOR
Now the question arises WHAT IS A PREPROCESSOR ?
A Preprocessor is a program that takes one type of data and converts it to
another type of data. In the case of HTML and CSS, some of the more popular
preprocessor languages include Haml and Sass .
Haml is processed into HTML and Sass is processed into CSS.
5. INSTALLATION
There are a couple of ways to start using Sass:
1. Application (Third party apps)
2. Command line
6. 1. APPLICATION (THIRD PARTY)
There are good many applications that will get you up and running with Sass in a
few minutes for Mac, Windows, and Linux.
Codekit (Paid)
Compass.app (Paid, Open Source)
LiveReload (Paid, Open Source)
Koala (Open Source)
Scout (Open Source)
Prepros (Paid)
‘’ Koala and Scout are Open Source Applications. ’’
7. 2. COMMAND LINE
1
First, Install Ruby
2
Open comment
line check
whether ruby
installed or not.
3
Type - > gem
install sass
4
If SASS
successfully
installed then
use it
5
Create a folder
and .scss file
and run it by
using
-> sass –-watch
file.scss:file.css
8. DIFFERENCE BETWEEN SASS AND
SCSS?
• Sass, also known as the indented syntax.
• Scss, a CSS-like syntax.
• Scss uses brackets and semicolons to indent the code.
• In other hand Sass uses spaces and new lines to indent the code.
18. INTERPOLATION
• It provides SassScript variables in selectors and property names using
#{ } syntax. You can specify variables or property names within the curly braces.
• Syntax->
#{name}
Where, $name is the name of the variable or property name.
19.
20. DATA TYPES
Sass supports Seven data types.
1. Numbers (e.g. 1.2, 13, 10px)
2. Strings of text, with and without quotes (e.g. “abc", ‘xyz', abc)
3. Colors (e.g. blue, #04a3f9, rgba(255, 0, 0, 0.5),hsl(), rgb())
4. Booleans (e.g. true, false)
5. Maps from one value to another (e.g. (key1: value1, key2: value2));
6. Lists of values, separated by spaces or commas (e.g. 1.5em 1em 0 2em, Helvetica,
Arial, sans-serif)
7. Nulls (e.g. null)
30. HOW TO RUN
THE FOLDER
• First, set your folder
path
• Set your folder
• Run like comment
->sass –watch
master.scss:master.css
31. @IMPORT
• We can import multiple
files in a single import.
• We can only use files
name without extension.
• Always remember the
files order in import.
• Also import the url
• For example-
@import
url(“href="https://fonts.goo
gleapis.com/css?family=Rob
oto" ”);
49. @DEBUG
• The @debug directive prints the value of a Sass expression to the standard
error output stream.
For Example:-
@debug 10px + 20px;
• When I save the file the output is written to the output stream of my watch
command.
50.
51. @WARN
• The @warn directive prints the value of a Sass expression to the standard
error output stream.
$wrn: 20px;
@warn: “#{$wrn}”;
• It will display the value of the expression as well as the line number of the
warning.
52.
53. @ERROR
• The @error directive gives the value of a Sass expression as an error, again to
the standard error stream.
$test: 1px;
@error “#{$test}”;
• This will display, line number , and value in the standard error stream.