Sass Basics
Contents
Sass
Sass : Syntactically Awesome Style Sheets (Web)
We can write structured style and compile as .css
Install
sass command requires Ruby, if you don’t have Ruby, please install.
sudo gem install sass
Style(.sass, .scss)
Sass has 2 styles
Variable
Add $ before variable name
$abc : 10px; $var : 10%; $var1 : red; $red-shadow : 0 0 1px red; div { color: $var1; height: $abc + 10px; }
&
& indicates parent
Example
a.btn { border-radius: 15px; background-color: red; &:hover { background-color: white; } }
In this case, & is a
Inheritance
Include other’s parameters
.var1 { color: red; border: 10px solid; } .var2center { @extend .var1; /* include var1 style */ text-align: center; }
Mixin
Mixin is mini template. It’s like
@mixin round-btn { border: 1px solid white; border-radius: 5px; } @mixin btn-color($color) { @include round-btn; color : $color; } .red-btn { @include btn-color(red); }
We can use default value
@mixin transition($duration:3s){ -webkit-transition:$duration ease-out; -moz-transition:$duration ease-out; -ms-transition:$duration ease-out; -o-transition:$duration ease-out; transition:$duration ease-out; }
Partial
Import file itself. It;s like mixin and extend, but not compiled just import
The name starts _ Example is _base.scss
@import "base"; // relative path