Препроцессоры CSS позволяют использовать переменные, вложенные правила, миксины, функции и другие возможности, которые делают написание CSS более мощным и управляемым. SASS и LESS являются двумя наиболее популярными препроцессорами.

1. SASS (Syntactically Awesome Stylesheets)

SASS расширяет возможности стандартного CSS, добавляя переменные, вложенность, миксины, наследование и функции.

Основные функции SASS

• Переменные:

  $primary-color: #333;
  $font-stack: Helvetica, sans-serif;
  
  body {
    font: 100% $font-stack;
    color: $primary-color;
  }
  
  

• Вложенность:

  nav {
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
  
    li { display: inline-block; }
  
    a {
      display: block;
      padding: 6px 12px;
      text-decoration: none;
    }
  }
  
  

• Миксины:

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

• Наследование:

  .message {
    border: 1px solid #ccc;
    padding: 10px;
    color: #333;
  }
  
  .success { @extend .message; border-color: green; }
  .error { @extend .message; border-color: red; }
  .warning { @extend .message; border-color: yellow; }
  
  

• Функции:

  @function pow($base, $exponent) {
    $result: 1;
    @for $i from 1 through $exponent {
      $result: $result * $base;
    }
    @return $result;
  }
  
  .result {
    width: pow(2, 3) * 1px; // 8px
  }
  
  

Компиляция SASS

SASS файлы с расширением .scss или .sass нужно компилировать в CSS.

• Установка SASS:

  npm install -g sass
  
  

• Компиляция файла:

  sass input.scss output.css
  
  

2. LESS

LESS (Leaner Style Sheets) также является популярным препроцессором CSS, который добавляет переменные, вложенность, миксины и функции.

Основные функции LESS

• Переменные:

  @primary-color: #333;
  @font-stack: Helvetica, sans-serif;
  
  body {
    font: 100% @font-stack;
    color: @primary-color;
  }
  
  

• Вложенность:

  nav {
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
  
    li { display: inline-block; }
  
    a {
      display: block;
      padding: 6px 12px;
      text-decoration: none;
    }
  }
  
  

• Миксины:

  .border-radius(@radius) {
    -webkit-border-radius: @radius;
       -moz-border-radius: @radius;
        -ms-border-radius: @radius;
            border-radius: @radius;
  }
  
  .box { .border-radius(10px); }
  
  

• Наследование и Примеси:

  .message {
    border: 1px solid #ccc;
    padding: 10px;
    color: #333;
  }
  
  .success { .message; border-color: green; }
  .error { .message; border-color: red; }
  .warning { .message; border-color: yellow; }