Sass
-
Upload
bharti-gurav -
Category
Technology
-
view
311 -
download
2
description
Transcript of Sass
![Page 1: Sass](https://reader035.fdocuments.us/reader035/viewer/2022062613/545061bcaf7959d40b8b57a7/html5/thumbnails/1.jpg)
London, 7 April 2023 | | 1
![Page 2: Sass](https://reader035.fdocuments.us/reader035/viewer/2022062613/545061bcaf7959d40b8b57a7/html5/thumbnails/2.jpg)
SASS
![Page 3: Sass](https://reader035.fdocuments.us/reader035/viewer/2022062613/545061bcaf7959d40b8b57a7/html5/thumbnails/3.jpg)
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>
![Page 4: Sass](https://reader035.fdocuments.us/reader035/viewer/2022062613/545061bcaf7959d40b8b57a7/html5/thumbnails/4.jpg)
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
![Page 5: Sass](https://reader035.fdocuments.us/reader035/viewer/2022062613/545061bcaf7959d40b8b57a7/html5/thumbnails/5.jpg)
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
![Page 6: Sass](https://reader035.fdocuments.us/reader035/viewer/2022062613/545061bcaf7959d40b8b57a7/html5/thumbnails/6.jpg)
Examples
$red : #ff0000
$margin : 16px
.nav
border-color : $red
margin: $margin / 2
OUTPUT:
.nav {
border-color: red;
margin: 8px; }
![Page 7: Sass](https://reader035.fdocuments.us/reader035/viewer/2022062613/545061bcaf7959d40b8b57a7/html5/thumbnails/7.jpg)
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; }
![Page 8: Sass](https://reader035.fdocuments.us/reader035/viewer/2022062613/545061bcaf7959d40b8b57a7/html5/thumbnails/8.jpg)
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
![Page 9: Sass](https://reader035.fdocuments.us/reader035/viewer/2022062613/545061bcaf7959d40b8b57a7/html5/thumbnails/9.jpg)
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;
}
![Page 10: Sass](https://reader035.fdocuments.us/reader035/viewer/2022062613/545061bcaf7959d40b8b57a7/html5/thumbnails/10.jpg)
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; }
![Page 11: Sass](https://reader035.fdocuments.us/reader035/viewer/2022062613/545061bcaf7959d40b8b57a7/html5/thumbnails/11.jpg)
Selector inheritance
• Allows the selector to inherit all the properties to another selector
• Duplication of code can be avoided
![Page 12: Sass](https://reader035.fdocuments.us/reader035/viewer/2022062613/545061bcaf7959d40b8b57a7/html5/thumbnails/12.jpg)
Example1
.heading
color: red
.big-heading
@extend .heading
font-size: 48px
OUTPUT:
.heading, .big-heading {
color: red; }
.big-heading {
font-size: 48px; }
![Page 13: Sass](https://reader035.fdocuments.us/reader035/viewer/2022062613/545061bcaf7959d40b8b57a7/html5/thumbnails/13.jpg)
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; }
![Page 14: Sass](https://reader035.fdocuments.us/reader035/viewer/2022062613/545061bcaf7959d40b8b57a7/html5/thumbnails/14.jpg)
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
![Page 15: Sass](https://reader035.fdocuments.us/reader035/viewer/2022062613/545061bcaf7959d40b8b57a7/html5/thumbnails/15.jpg)
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.
![Page 16: Sass](https://reader035.fdocuments.us/reader035/viewer/2022062613/545061bcaf7959d40b8b57a7/html5/thumbnails/16.jpg)
Links referred
•https://gist.github.com/674726
•http://sass-lang.com/
![Page 17: Sass](https://reader035.fdocuments.us/reader035/viewer/2022062613/545061bcaf7959d40b8b57a7/html5/thumbnails/17.jpg)
End