Sass
-
Upload
bharti-gurav -
Category
Technology
-
view
311 -
download
2
description
Transcript of Sass
London, 7 April 2023 | | 1
SASS
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>
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
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
Examples
$red : #ff0000
$margin : 16px
.nav
border-color : $red
margin: $margin / 2
OUTPUT:
.nav {
border-color: red;
margin: 8px; }
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; }
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
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;
}
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; }
Selector inheritance
• Allows the selector to inherit all the properties to another selector
• Duplication of code can be avoided
Example1
.heading
color: red
.big-heading
@extend .heading
font-size: 48px
OUTPUT:
.heading, .big-heading {
color: red; }
.big-heading {
font-size: 48px; }
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; }
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
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.
Links referred
•https://gist.github.com/674726
•http://sass-lang.com/
End