Препроцессор как новый супер герой

Препроцессор как новый супер герой

Собрал в кучу и поделился Михаил Синяков

Что мы имеем?

Sass 5%
Scss 13%
LESS 23%
Stylus 3%
I don't like any of them 7%
I don't have a preference 2%
I've never tried any of them 46%
Other 1%

Причина выбора SASS

Переменные

Sass

        $mainColor: #0982c1
        $siteWidth: 1024px
        $borderStyle: dotted
      

Хэши (maps)

Sass

        $map: (key1: value1, key2: value2, key3: value3)
        .btn
          background: map-get($map , key2)
      

CSS

.btn {background: value2;}

Вложенность

Sass CSS
            ul
             background: green
             li
              float: left
              a
               opacity: .5
            
              ul {background: green;}
              ul li {float: left;}
              ul li a {opacity: 0.5;}
            

Миксины

Sass CSS
            @mixin sexy-border($color, $width)
              border:
                color: $color
                width: $width
                style: dashed
            p
              @include sexy-border(blue, 1in)
            
              p {
                border-color: blue;
                border-width: 1in;
                border-style: dashed;
              }
            

Наследование(@extend)

Sass CSS
              .module
                color: red
              .anothe-module
                @extend .module
                boreder: 1px
            
              .module, .anothe-rmodule {
                color: red;
              }
              .anothe-module {
                boreder: 1px;
              }

            

Тихие селекторы(%placeholder)

Sass CSS
              %module
                color: red
              .anothe-module
                @extend %module
                boreder: 1px
            
              .anothe-rmodule {
                color: red;
              }
              .anothe-module {
                boreder: 1px;
              }

            

Импорты(@import)

Sass
              @import '_reset'
              @import '_variables'
              @import '_colors.json'
              @import 'modules/_header'
              @import 'modules/_body'
              @import 'modules/_footer'
            

Математика:

Операторы(Operators)

Sass CSS
             .container
               width: 100%
             article[role="main"]
               float: left
               width: 600px / 960px * 100%
             aside[role="complimentary"]
               float: right
               width: 300px / 960px * 100%
            
              .container {
                width: 100%;
              }
              article[role="main"] {
                float: left;
                width: 62.5%;
              }
              aside[role="complimentary"] {
                float: right;
                width: 31.25%;
              }

            

Работа с цветами()

Sass
  • lighten($color,10%)
  • darken($color,10%)
  • complement($color)
  • saturate($color,80%)
  • desaturate($color,80%)
  • fade-out($color,.2)
  • fade-in($color,.3)
  • grayscale($color)
  • rgba($color,.2)
  • mix($color,$color1,70%)
  • etc...

Циклы

Sass CSS
                $colors_list: red, blue, green
                $n: 2
                @for $i from 0 to $n
                  div:nth-of-type(#{$i+1})
                    background: nth($colors_list,
$i % length($colors_list) + 1);

              
              div:nth-of-type(1) {
                background: red;
              }
              div:nth-of-type(2) {
                background: blue;
              }
            

Оружие(инструменты):