Preprocessors
SASS
LESS
Stylus
Syntax
/* style.scss or style.less */ h1 { color: #0982C1; }
/* style.sass */ h1 color: #0982c1
/* style.styl */ h1 { color: #0982C1; } /* omit brackets */ h1 color: #0982C1;
/* omit colons and semi-colons */h1 color #0982C1 Variables
SASS
$mainColor: #0982c1; $siteWidth: 1024px; $borderStyle: dotted; body { color: $mainColor; border: 1px $borderStyle $mainColor; max-width: $siteWidth; }
LESS
@mainColor: #0982c1; @siteWidth: 1024px; @borderStyle: dotted;
body { color: @mainColor; border: 1px @borderStyle @mainColor; max-width: @siteWidth; }mainColor = #0982c1
siteWidth = 1024px
$borderStyle = dotted
body
color mainColor
border 1px $borderStyle mainColor
max-width siteWidthCompiled CSS
body {
color: #0982c1;
border: 1px dotted #0982c1;
max-width: 1024px;
}Nesting
section {
margin: 10px;
}
section nav {
height: 25px;
}
section nav a {
color: #0982C1;
}
section nav a:hover {
text-decoration: underline;
}ALL 3
section { margin: 10px; nav { height: 25px; a {
color: #0982C1; &:hover { text-decoration:underline;
} } } }
}Mixins
SASS
@mixin error($borderWidth: 2px) {
border: $borderWidth solid #F00;
color: #F00;
}
.generic-error {
padding: 20px;
margin: 4px;
@include error();
}
.login-error {
left: 12px;
position: absolute;
top: 20px;
@include error(5px);
}.error(@borderWidth: 2px) {
border: @borderWidth solid #F00;
color: #F00;
}
.generic-error {
padding: 20px;
margin: 4px;
.error();
}
.login-error {
left: 12px;
position: absolute;
top: 20px;
.error(5px);
} error(borderWidth = 2px) {
border: @borderWidth solid #F00;
color: #F00;
}
.generic-error {
padding: 20px;
margin: 4px;
error();
}
.login-error {
left: 12px;
position: absolute;
top: 20px;
error(5px);
}
Compiled CSS
.generic-error {
padding: 20px;
margin: 4px;
border: 2px solid #f00;
color: #f00;
}
.login-error {
left: 12px;
position: absolute;
top: 20px;
border: 5px solid #f00;
color: #f00;
}Color functions
ALL
lighten($color/@color/color, 10%); /*returns a color 10% lighter than $color */
darken($color/@color/color, 10%); /* returns a color 10% darker than $color */
saturate($color/@color/color, 10%); /* returns a color 10% more saturated than $color */
desaturate($color/@color/color, 10%); /* returns a color 10% less saturated than $color */
SASS
grayscale($color); /* returns grayscale of $color */
complement($color); /* returns complement color of $color */
invert($color); /* returns inverted color of $color */
mix($color1, $color2, 50%); /* mix $color1 with $color2 with a weight of 50% */
LESS
spin(@color, 10); /* returns a color with a 10 degree larger in hue than @color */
spin(@color, -10); /* returns a color with a 10 degree smaller hue than @color */
mix(@color1, @color2); /* return a mix of @color1 and @color2 */
Operations
body {
margin: (14px/2);
top: 50px + 100px;
right: 100px - 50px;
left: 10 * 10;
}Preproces
By Serejka Simanovich
Preproces
- 816
