Color definitions:
First you create a new color definition:
$selected_bg_color: #3584e4;
You can use them like this:
background-color: $selected_bg_color
Nested nodes:
CSS:
button {color:yellow};
button:active { color: red};
button:active:hover {color:green};
SCSS:
button{
color:yellow;
&:active {
color:red;
&:hover { color:green}
}
}
Mixings:
_drawing.scss:
//t = state of the nise, c= bg_color, tc= fg_color
@mixin button($t,$c, $tc) {
@if t==normal {
background-color: $c;
color:$tc;
}
@if t==active {
background-color: $selected_bg_color;
color:$tc;
}
}
_common.scss
button{
@include button(normal, $bg_color,$fg_color);
&:active {
@include button(active,donotread,$selected_fg_color}
}
In css:
button { color: $fg_color; background-color: $bg_color};
button:active{color: $selected_fg_color; background-color:$selected_bg_color};
Extends:
Scss
%funnycode {
color:white,
background-color:#fff;
}
button {
&,&:hover{
@extend %funnycode}}
Css:
button, button:hover {
color: white, background-color:white}