CSS LESS http lesscss org Stylus http styluslang

Найвідоміші CSSпрепроцесори: • LESS http: //lesscss. org/ • Stylus http: //stylus-lang. com/ • SASS http: //sass-lang. com/

Встановлення LESS: 1) встановити Node. JS 2) npm install -g less 3) lessc styles. less styles. css

Встановлення LESS: <script src="//cdnjs. cloudflare. com/ajax/libs/ less. js/2. 7. 1/less. min. js"></script> <link data-dump-line-numbers="all" data-global-vars='{ myvar: "#ddffee", mystr: ""quoted"" }' rel="stylesheet/less" type="text/css“ href="less/styles. less">

1) можливість вкладання стилів: SCSS #main p { color: #00 ff 00; width: 97%; . redbox { background-color: #ff 0000; color: #000000; } } #main p { color: #00 ff 00; width: 97%; } #main p. redbox { background-color: #ff 0000; color: #000000; } #main { width: 97%; p, div { font-size: 2 em; a { font-weight: bold; } } pre { font-size: 3 em; } } #main { width: 97%; } #main p, #main div { font-size: 2 em; } #main p a, #main div a { font-weight: bold; } #main pre { font-size: 3 em; }

2) можливість посилатися на батьківський селектор: SCSS a { font-weight: bold; text-decoration: none; &: hover { text-decoration: underline; } body. firefox & { font-weight: normal; } } a { #main { color: black; a { font-weight: bold; &: hover { color: red; } } } #main { color: black; } #main a { font-weight: bold; } #main a: hover { color: red; } font-weight: bold; text-decoration: none; } a: hover { text-decoration: underline; } body. firefox a { font-weight: normal; }

3) використання змінних: SCSS $font-stack: Helvetica, sans-serif; body { $primary-color: #333; font: 100% Helvetica, sans-serif; body { color: #333; font: 100% $font-stack; } color: $primary-color; } $link: #15157 d; $link_bottom: $link; $input_font_size: 13 px; $content_bg: #F 1 F 1 F 1; $input_color: #4 E 4 D 4 D; $input_color_placeholder: #959595; $text_color: black; a { color: $link; } span. link { color: $link; text-decoration: underline; } a { color: #15157 d; } span. link { color: #15157 d; text-decoration: underline; }

4) математичні операції: SCSS $block_width: 500 px; $block_padding: 5 px; $block_border: 1 px; . block { padding: $block_padding; border: $block_border solid black; width: $block_width-($block_padding*2)– ($block_border*2); } p { $width: 1000 px; font: 10 px/8 px Arial; width: $width/2; height: (500 px/2); margin-left: 5 px + 8 px/2 px; } CSS. block { padding: 5 px; border: 1 px solid black; width: 488 px; } p { font: 10 px/8 px Arial; width: 500 px; height: 250 px; margin-left: 9 px; }

5) домішки: SCSS @mixin large-text { font: { family: Arial; size: 20 px; weight: bold; } color: #ff 0000; }. page-title { @include large-text; padding: 4 px; margin-top: 10 px; } CSS . page-title { font-family: Arial; font-size: 20 px; font-weight: bold; color: #ff 0000; padding: 4 px; margin-top: 10 px; }

6) домішки з параметрами: SCSS @mixin my-border($color, $width) { border: { color: $color; width: $width; style: dashed; } } p { border-color: blue; border-width: 1 in; border-style: dashed; } p { @include my-border(blue, 1 in); }

SCSS @mixin borderradius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; }. box { @include border-radius(10 px); } CSS . box { -webkit-border-radius: 10 px; -moz-border-radius: 10 px; -ms-border-radius: 10 px; }

7) можна оголошувати функції: SCSS $grid-width: 40 px; $gutter-width: 10 px; @function grid-width($n) { @return $n * $grid-width + ($n - 1) * $gutter-width; } #sidebar { width: grid-width(5); } CSS #sidebar { width: 240 px; }

8) оператор if: SCSS $type: monster; p { @if $type == ocean { color: blue; } @else if $type == matador { color: red; } @else if $type == monster { color: green; } @else { color: black; } } CSS p { color: green; }

Існує також функція if SCSS . one { padding-top: if(true, 1 px, 2 px); padding-top: 1 px; padding-left: if(false, 1 px, 2 px); padding-left: 2 px; } }

9) оператор for: SCSS @for $i from 1 through 3 {. item-#{$i} { width: 2 em * $i; } } CSS . item-1 { width: 2 em; }. item-2 { width: 4 em; }. item-3 { width: 6 em; }

9) оператор for: SCSS @for $i from 1 through 3 {. item-#{$i} { width: 2 em * $i; } } CSS . item-1 { width: 2 em; }. item-2 { width: 4 em; }. item-3 { width: 6 em; }

10) списки SCSS $horse-types 1: pony horse mini-horse maxi-pony; $horse-types 2: pony, horse, mini-horse, maxi-pony; $horse-types 3: "pony", "horse", "mini horse", "maxi pony"; $hrs: pony #996633, horse #fff, mini-horse #333, maxi-pony #cc 9849;

11) Оператор @each SCSS @each $item in $hrs {. hrs-photo-#{$item} { background: url("img/horses/#{$item}. png") no-repeat; } }

12) Оператор @while SCSS $i: 6; @while $i > 0 {. item-#{$i} { width: 2 em * $i; } $i: $i - 2; } CSS. item-6 { width: 12 em; }. item-4 { width: 8 em; }. item-2 { width: 4 em; }

13) Наслідування SCSS . message { border: 1 px solid #ccc; padding: 10 px; color: #333; }. success { @extend. message; border-color: green; }. error { @extend. message; border-color: red; }. warning { @extend. message; border-color: yellow; } CSS . message, . success, . error, . warning { border: 1 px solid #cccccc; padding: 10 px; color: #333; }. success { border-color: green; }. error { border-color: red; }. warning { border-color: yellow; }

4) використання у PHPStorm/Web. Storm: File -> Settings Tools -> File Watchers