Please enable JavaScript.
Coggle requires JavaScript to display documents.
SCSS (directives (function (example: function($cols){ return (@cols-3)…
SCSS
directives
import
can be used inside namespaces (like div , li etc) not only in root level
extend
extends the existing rule and adds own data, multiple inheritance is supported
mixin
font-large { ...rule set...} and when you want to use it u just specify
include
font-large
parameters and default values are also supported like in LESS
function
example:
function($cols){
return
(@cols-3
) /2 +5px;
}
don't need
include
keyword, can be invoked directly like mixins in LESS
control directives
if
h1 {
if $var_name > 15px {
color: blue;
}
}
else
if
var_name
=7px {
color: yellow
}
else
{ color: white}
for
for
$var from 1 through 4 {
.col#{$name} {
width: 200px/ $var
}
}
each
each
$item in firs, second, third, fourth { .....}
while
$i:1;
while
$i <5 {
$i: $i+1;
}
built-in functions
round, ceil, floor percentage
operation inferring is available, like: height: 12px +5;
all the color functions like in LESS, e.g. saturate, lighten, darken, fade_in, fade_out, quote ($var_name), unquote($var_name).
Good to know
SASS was based on indentation and not every CSS was valid SASS
SCSS is much like LESS, not based on indentation
variables syntax
$var_name: value
if statement
$var_name: if(true, val1, val2)
Dynamic Stylesheet Language
interpolation is much like in LESS e.g. #{$var_name}blabla.jpg but we can also use it in class names like here
.#{$class_name} {rule1: val1;}
Same hierarchical syntax can be applied to SCS files, parent selectors (&) as well