IT:AD:SASS:Concepts:Syntax
Summary
File Extensions
- Used to be
*.sass
. Used intentation, etc. Depracated. - Now, use
*.scss
Variables
Variables are:
* prefixed with $
:
Example:
$myBackground: #F0F0FF;
Functions
They can be directly referenced, or used within SASS specific Functions
* Ref
Example:
darken ($myBackground,20%);
Nesting
SASS saves a lot of time by allowing nesting. Instead of the more tedious:
table.MyExample { ... } table.MyExample tr { ... } table.MyExample tr td { ... }
One can nest the elements more succinctly:
table.MyExample { ... tr { ... td { ... } } }
Inheritence
Instead of the following:
.info {...} .info .warning {...}
One can use the @extends
keyword to do:
.info {...} .warning { @extends .info; ... }
Mixins
Mixins are the hip
concept of SASS, allowing reuse.
@mixin table-base { th { text-align: center; font-weight: bold; } td, th { padding: 2px; } } @mixin left($dist) { float: left; margin-left: $dist; }
Then include them:
#data { @include left(10px); @include table-base; }
Imports
@import
allow the including of other files.
It extends the class CSS command, therefore can be used to include other css files,
but also or other *.scss
files (otherwise known as partials
).
By default, it looks for a Sass file to import directly, but there are a few circumstances under which it will compile to a CSS @import rule:
If the file’s extension is .css
.
If the filename begins with http://
.
If the filename is a url()
.
If the @import
has any media queries.
If you have a file called “_mylib.scss
”, (the underscore stops it from becoming translated first into a “.css
”) you can import that file, with all its variables, and mixins.
@import "mylib" //same as @import "mylib.scss"