Absolutely all experienced typesetters use preprocessors. There are no exceptions. If you want to succeed in this activity, do not forget about these programs. At first glance, they can cause a quiet horror for a beginner - this is already too much like programming! In fact, you can figure out all the features of CSS preprocessors in about a day, and if you try, then in a couple of hours. In the future, they will greatly simplify your life.
How CSS preprocessors came about
To better understand the features of this technology, briefly dive into the history of the development of visual presentation of web pages.
- , . . , . , - , . – , , .
1994 , HTML-. W3C, . CSS. , … : .
CSS . , , .
. -, . CSS . JavaScript Ruby , – CSS, .
CSS :
:
: CSS . , : , , , , . .
, W3C CSS. , calc(), . , . , .
CSS. Sass
2007 . Haml – HTML. CSS Ruby on Rails, . Sass , : , , (, , ).
Sass
$. , : “$borderSolid: 1px solid red;”. borderSolid 1px solid red. , CSS border 1px, . . . , $redColor #FF5050. CSS, - , : p { color: $redColor; }. ? darken lighten. : p { color: darken($redColor, 20%); }. redColor 20 % .
Sass . , – .
. , div, p, , , span. div red, p – yellow, span – pink. CSS :
div {
color: red;
}
div p {
color: yellow;
}
div p span {
color: pink;
}
CSS :
div {
color: red;
p {
color: yellow;
.span {
color: pink;
}
}
}
«» .
@import . , fonts.sass, . style.sass: @import ‘fonts’. ! , .
. . :
@mixin largeFont {
font-family: ‘Times New Roman’;
font-size: 64px;
line-height: 80px;
font-weight: bold;
}
, @include. , h1. : h1 { @include: largeFont; }
h1.
Less
Sass . , CSS , Less. 2009 . – CSS, .
@. : @fontSize: 14px;. , Sass. : .largeFont() { font-family: ‘Times New Roman’; font-size: 64px; line-height: 80px; font-weight: bold; }. – . : h1 { .largeFont; }.
Stylus
. 2011 , Jade, Express .
- . : font = ‘Times New Roman’; – . $font = ‘Times New Roman’ – . . : redColor() color red. , : h1 redColor();.
Stylus . «» ? , . , «» CSS. «» .
?
… . , . :
- – , Sass;
- – , Less;
- , Stylus.
, . Sass Compass – . , . . , . . – .