Изучаем Sass за 15 минут

Если вы пишете обильное количество CSS кода, препроцессор может значительно уменьшить уровень стресса и сэкономить много драгоценного времени. Такие инструменты, как Sass, Less, Stylus или PostCSS помогают упростить поддержку больших и сложных таблиц стилей и делают их более понятными. Благодаря таким функциям, как переменные, функции и примеси, код становится более организованным, что позволяет разработчикам работать быстрее и допускать меньше ошибок.

В прошлой статье мы изучали LESS за 15 минут.

Sass файлы не могут быть интерпретированы в браузере, поэтому они нуждаются в компиляции стандартного CSS, прежде чем их можно будет использовать в Интернете. Поэтому вам понадобится специальный инструмент, который поможет перевести .scss файлы в .css. Для этого у нас есть несколько вариантов:

  • Самым простым решением будет использовать инструменты браузера для написания и компиляции Sass - SassMeister.
  • Использовать десктопное приложение 3rd party, у которого есть платные и бесплатные версии.
  • Если вы работаете с CLI, вы можете установить Sass на вашем компьютере и компилировать файлы вручную.

Если вы захотите воспользоваться командной строкой, вы можете установить Sass в его первоначальном виде (написанной на Ruby), или же можете портировать его из Node.js. Так как мы любим Node.js, мы будем работать с ним.

Для компиляции из Sass в CSS воспользуйтесь следующей командой:

node-sass input.scss output.css

Кроме того, самое время отметить, что Sass предлагает два различных синтаксиса - Sass и SCSS. Они оба делают одно и то же, только написаны по-разному. SCSS - более новый и как правило, считается лучше, поэтому мы будем работать с этим.

Sass Переменные

Переменные в Sass работают аналогично любому другому языку программирования, в том числе принципы, такие как типы данных и области. При определении переменной мы храним в ней определенное значение, которое обычно является чем-то, что будет часто повторяться в CSS, например цветовая палитра, стиль шрифта или целые спецификации для box-shadow.

Ниже я привел простой пример создания переменных.

  • $title-font: normal 24px/1.5 'Open Sans', sans-serif;
    $cool-red: #F44336;
    $box-shadow-bottom-only: 0 2px 1px 0 rgba(0, 0, 0, 0.2);
    
    h1.title {
      font: $title-font;
      color: $cool-red;
    }
    
    div.container {
      color: $cool-red;
      background: #fff;
      width: 100%;
      box-shadow: $box-shadow-bottom-only;
    }
  • h1.title {
      font: normal 24px/1.5 "Open Sans", sans-serif;
      color: #F44336; 
    }
    
    div.container {
      color: #F44336;
      background: #fff;
      width: 100%;
      box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.2);
    }

Основная идея состоит в том, что мы можем в дальнейшем получить быстрый доступ к тем же значениям, либо если необходимо изменить какой-либо стиль, нам не придется искать одно и тоже значение по всему CSS коду, а просто поменяем значение в переменной.

Sass Примеси

Вы можете думать о примесях, как об упрощенной версии конструктора классов в языках программирования - вы можете получить целую группу CSS деклараций и повторно использовать их везде, где только захотите, чтобы установить для элемента определенный набор стилей.

Примеси могут даже принимать аргументы с возможностью установки значений по умолчанию. В приведенном ниже примере мы определяем примесь square, а затем используем его для создания квадратов разных размеров и цветов.

  • SCSS

    @mixin square($size, $color) {
      width: $size;
      height: $size;
      background-color: $color;
    }
    
    .small-blue-square {
      @include square(20px, rgb(0,0,255));
    }
    
    .big-red-square {
      @include square(300px, rgb(255,0,0));
    }
  • CSS

    .small-blue-square {
      width: 20px;
      height: 20px;
      background-color: blue; 
    }
    
    .big-red-square {
      width: 300px;
      height: 300px;
      background-color: red;
    }

Еще один эффективный способ использования примесей, это добавление различных префиксов.

  • SCSS

    @mixin transform-tilt() {
      $tilt: rotate(15deg);
    
      -webkit-transform: $tilt; /* Ch <36, Saf 5.1+, iOS, An =<4.4.4 */
          -ms-transform: $tilt; /* IE 9 */
              transform: $tilt; /* IE 10, Fx 16+, Op 12.1+ */
    }
    
    .frame:hover { 
      @include transform-tilt; 
    }
  • CSS

    .frame:hover {
      -webkit-transform: rotate(15deg);  /* Ch <36, Saf 5.1+, iOS, An =<4.4.4 */
      -ms-transform: rotate(15deg);  /* IE 9 */
      transform: rotate(15deg);  /* IE 10, Fx 16+, Op 12.1+ */ 
    }

Sass Extend

Далее перейдем к функции @extend, которая позволяет наследовать CSS свойства одного селектора к другому. Работает также, как системы примесей, но предпочтительнее создавать логическую связь между элементами на странице.

Расширение следует использовать, когда необходимы одинаково стилизованные элементы, которые отличаются в некоторых деталях. Например, создадим диалоговое окно, с двумя кнопками - одна для принятия, вторая для отмены.

  • SCSS

    .dialog-button {
      box-sizing: border-box;
      color: #ffffff;
      box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
      padding: 12px 40px;
      cursor: pointer;
    }
    
    .confirm {
      @extend .dialog-button;
      background-color: #87bae1;
      float: left;
    }
    
    .cancel {
      @extend .dialog-button;
      background-color: #e4749e;
      float: right;
    }
  • CSS

    .dialog-button, .confirm, .cancel {
      box-sizing: border-box;
      color: #ffffff;
      box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
      padding: 12px 40px;
      cursor: pointer; 
    }
    
    .confirm {
      background-color: #87bae1;
      float: left; 
    }
    
    .cancel {
      background-color: #e4749e;
      float: right; 
    }

В CSS коде, вы увидите что для элементов .confirm и .cancel, применились стили элемента .dialog-button.

Sass Вложенные правила

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

  • SCSS

    ul {
      list-style: none;
    
      li {
        padding: 15px;
        display: inline-block;
    
        a {
          text-decoration: none;
          font-size: 16px;
          color: #444;
        }
    
      }
    
    }
  • CSS

    ul {
      list-style: none; 
    }
    
    ul li {
      padding: 15px;
      display: inline-block; 
    }
    
    ul li a {
      text-decoration: none;
      font-size: 16px;
      color: #444; 
    }

Sass Операторы

В Sass вы можете добавить математическую операцию прямо в таблицу стилей, это также просто, как добавить простой арифметический символ.

  • SCSS

    $width: 800px;
    
    .container { 
      width: $width;
    }
    
    .column-half {
      width: $width / 2;
    }
    
    .column-fifth {
      width: $width / 5;
    }
  • CSS

    .container {
      width: 800px; 
    }
    
    .column-half {
      width: 400px; 
    }
    
    .column-fifth {
      width: 160px; 
    }

Sass Функции

Sass предлагает длинный список встроенных функций. Они служат для любых целей, включая манипулирование строками, операции с цветом и некоторые удобные математические методы, такие как random() и round().

Используя одну из самых простых функций Sass, мы создадим небольшой компонент, который использует darken($color, $amount), для установки свойств при наведении.

  • SCSS

    $awesome-blue: #2196F3;
    
    a {
      padding: 10 15px;
      background-color: $awesome-blue;
    }
    
    a:hover {
      background-color: darken($awesome-blue,10%);
    }
  • CSS

    a {
      padding: 10 15px;
      background-color: #2196F3; 
    }
    
    a:hover {
      background-color: #0c7cd5; 
    }

Заключение

Некоторые из вышеперечисленных функций, в будущем добавят в стандартной CSS, но пока лишь присутствуют только в препроцессорах. Препроцессоры являются отличным способом улучшить написание CSS кода, а Sass станет хорошим выбором среди них.

 

Перевод статьи Learn Sass In 15 Minutes

Тэги: sassscss

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.