Препроцессор Sass — с чего начать новичку

Мы уже рассказывали про препроцессоры для CSS — что это такое, зачем нужны и как работают. На всякий случай напомним.

Что делаем

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

Преимущество препроцессора в командной строке в том, что в ней всё выполняется плюс-минус одинаково на любом компьютере с любой операционной системой. Но если есть желание, можно установить что-то с графическим интерфейсом:

Установка Sass в Windows

Самый простой способ установить Sass на компьютер под управлением Windows — установить Ruby, а потом с его помощью поставить Sass. 

Для этого идём на сайт c установщиками Ruby для Windows и выбираем версию и архитектуру процессора. Так как нам не нужна полноценная разработка, выбираем версию без инструментария разработчика:

Когда файл скачается, запускаем его и соглашаемся со всеми параметрами по умолчанию. В конце установки появится командная строка с настройками — просто нажимаем Энтер, и Ruby сама скачает всё, что ей нужно:

Когда всё завершится, идём в меню «Пуск» и находим там Ruby → Start Command Prompt with Ruby:

Перед нами откроется командная строка Ruby. Устанавливаем Sass командой:

gem install sass

После установки проверяем, что Sass появился и доступен для работы, — используем для этого команду sass -v. Если всё в порядке, мы увидим номер версии Sass:

На этом установка Sass в Windows закончена, можно приступать к работе.

Установка Sass в MacOS

Тут будет немного легче, чем в Windows, потому что на маках Ruby уже установлена заранее. Самый быстрый и практичный способ установить Sass на MacOS — установить менеджер пакетов brew, а с его помощью установить всё остальное.

Для установки brew открываем терминал и пишем такое:

/bin/bash -c «$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)»

Теперь устанавливаем Sass одной командой:

brew install sass/sass/sass

Различия между Sass и SCSS

Изначально в Sass был только один вариант написания кода — с отступами, как в Python, и без фигурных скобок:

table.hl 
  margin: 2em 0
  td.ln 
    text-align: right
  
li 
  font: 
    family: serif
    weight: bold
    size: 1.3em

При этом с самого начала нужно выбрать для отступов что-то одно: или табы, или пробелы. Некоторые препроцессоры откажутся переводить код в CSS, если в документе будут табы вместе с пробелами.

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

Вот тот же код на SCSS:

table.hl {
  margin: 2em 0;
  td.ln {
    text-align: right;
  }
}

li {
  font: {
    family: serif;
    weight: bold;
    size: 1.3em;
  }
}

При переводе в CSS оба препроцессора выдадут один и тот же результат.

В дальнейших проектах мы разберём основные возможности Sass: работу с переменными, циклы, вложенности и привязки. Пока для затравки вот пример организации цикла для красивой анимации:

@keyframes glitch-before {
  $steps: 20;
  @for $i from 0 through $steps {
    #{percentage($i*(1/$steps))} {
      clip: rect(random(150) + px, 350px, random(150) + px, 30px);
    }
  }
}

А вот что получится при переводе этого кода в CSS:

@keyframes glitch-before {
  0% {
    clip: rect(45px, 350px, 56px, 30px);
  }
  5% {
    clip: rect(102px, 350px, 52px, 30px);
  }
  10% {
    clip: rect(30px, 350px, 93px, 30px);
  }
  15% {
    clip: rect(122px, 350px, 91px, 30px);
  }
  20% {
    clip: rect(52px, 350px, 69px, 30px);
  }
  25% {
    clip: rect(89px, 350px, 141px, 30px);
  }
  30% {
    clip: rect(80px, 350px, 24px, 30px);
  }
  35% {
    clip: rect(21px, 350px, 3px, 30px);
  }
  40% {
    clip: rect(87px, 350px, 13px, 30px);
  }
  45% {
    clip: rect(5px, 350px, 106px, 30px);
  }
  50% {
    clip: rect(138px, 350px, 115px, 30px);
  }
  55% {
    clip: rect(91px, 350px, 105px, 30px);
  }
  60% {
    clip: rect(92px, 350px, 25px, 30px);
  }
  65% {
    clip: rect(69px, 350px, 108px, 30px);
  }
  70% {
    clip: rect(67px, 350px, 20px, 30px);
  }
  75% {
    clip: rect(42px, 350px, 46px, 30px);
  }
  80% {
    clip: rect(94px, 350px, 48px, 30px);
  }
  85% {
    clip: rect(11px, 350px, 101px, 30px);
  }
  90% {
    clip: rect(135px, 350px, 104px, 30px);
  }
  95% {
    clip: rect(128px, 350px, 69px, 30px);
  }
  100% {
    clip: rect(26px, 350px, 116px, 30px);
  }
}

Как переводить файлы SCSS и Sass в CSS

Чтобы преобразовать SCSS- и Sass-код в CSS, нужно запустить командную строку Ruby и выполнить такую команду:

sass <исходный файл> <конечный файл>

Исходный файл — это наш код на SCSS или Sass, а конечный файл — это то, куда мы хотим сохранить результат. Например, если исходный файл лежит в папке «Мои документы» и результат нам нужен в той же папке, то команда может выглядеть так:

sass C:\Users\Mike\Documents\test.scss C:\Users\Mike\Documents\result.css

Ещё есть возможность просто посмотреть на готовый код без конвертации — для этого нужно указать только исходный файл. В этом случае результат появится только на экране:

Что дальше

Теперь у нас есть все ресурсы, чтобы сделать интересный веб-проект, используя стили с препроцессором Sass. Этим и займёмся в следующий раз.

Вы фронтендер? Гляньте сюда ↓

У нас есть курсы по прокачке навыков до уровня middle и далее. Начать можно бесплатно. Посмотрите, интересно ли вам это.

Начать бесплатно