Scribd
Upload
115 views12 pages

Sass

SASS (Syntactically Awesome Stylesheets) is a CSS preprocessor that allows for variables, nesting, mixins and inheritance. It has two syntax options, SASS and SCSS. SASS uses indentation for structure while SCSS uses brackets and semicolons like regular CSS. Both compile to valid CSS. SASS allows variables, nesting selectors, extends for inheritance, and mixins for reusable styles. Math operations can be done on variables, including those with units like pixels. Files can be imported and partials used to organize code into multiple files that compile to one CSS file.

Uploaded by

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

Sass

SASS (Syntactically Awesome Stylesheets) is a CSS preprocessor that allows for variables, nesting, mixins and inheritance. It has two syntax options, SASS and SCSS. SASS uses indentation for structure while SCSS uses brackets and semicolons like regular CSS. Both compile to valid CSS. SASS allows variables, nesting selectors, extends for inheritance, and mixins for reusable styles. Math operations can be done on variables, including those with units like pixels. Files can be imported and partials used to organize code into multiple files that compile to one CSS file.

Uploaded by

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

SASS(Syntactically

Awesome
Stylesheets)
What is SASS?

 Syntactically Awesome Stylesheets


 Smarter CSS
 Gives you variables and methods (mixins) for CSS
 Lets you nest declarations • Provides selector inheritance
 Lets you do math with your variable values
 Works by compiling .sass or .scss files into normal valid .css
 Commonly used in Ruby on Rails applications but can be used
in any web project

2
SASS and SCSS
Two available syntaxes
SASS SCSS
• HAML-style indentation • Semi-colon and bracket
• No brackets or syntax
semicolons, based on • Superset of normal
indentation CSS
• Less characters to type • Normal CSS is also
• Enforced valid SCSS
conventions/neatness • Newer and
recommended

3
SASS and SCSS
Two available syntaxes

SASS $txt-size: 12px SCSS


$txt-color: #333 $txt-size: 12px;
$link-color: #999 $txt-color: #333;
#main $link-color: #999;
font-size: $txt-size #main{
color: $txt-color font-size: $txt-size;
a color: $txt-color;
color: $link-color a{
color: $link-color;
}
}
⋆ Both syntaxes have the same functionality
⋆ Both of the previous examples compile to
#main{
font-size: 12px;
color: #333333;
}
#main a{
color: #999999;
}
⋆ Already demonstrated basic variable usage and nesting

5
You can also extend other CSS declarations
with
@extend Resulting CSS
.error{ .error, .seriousError
color: red; {
} color: red;
.seriousError } .seriousError
{ {
@extend .error; font-weight: bold;
font-weight: bold; }
}
6
Mixins are sets of reusable styles, almost
like methods in other languages
@mixin awesome-text{ Resulting CSS
font-size: 24px; p{
font-weight: bold; font-size: 24px;
color: blue; font-weight: bold;
} color: blue;
P }
{
@include awesome-text;
}
7
Mixins can also take parameters

SCSS Resulting CSS


@mixin awesome-text($size) p{
{ font-size: 24px;
font-size: $size; font-weight: bold;
font-weight: bold; color: blue;
color: blue; }
} li{
p{ font-size: 18px;
@include awesome-text(24px); } font-weight: bold;
li{ color: blue;
@include awesome-text(18px); } }
8
You can do simple math operations with your
variable values, even if they have units
$page-width: 500px;
$sidebar-width: 100px; Resulting CSS
$content-width: $page-width - #main{
$sidebar-width; width: 500px;
#main{ }
width: $page-width; #main #sidebar{
#sidebar{ width: 100px;
width: $sidebar-width; }
} #main #content{
#content{ width: 400px;
width: $content-width; }
}
}
9
Importing other SASS files
 Import other .sass or .scss files using
 @import – @import “reset”; – @import “reset.css.scss”; //
File extension also allowed
 You can also create partials that will only be imported to
other files and not compiled to .css files themselves – Just
name the partial with an underscore in the front, such as
 _sample.css.scss – Now import the same way: @import
“sample”;
 Handy for organizing styles into multiple files but compiling
to only one file for use on the web

10
Color operations
You can also do mathematic operations on
color values
• How this is computed
#010203 + #040506 = #050709
01 + 04 = 05

11
Thanks!

12

You might also like