Изучаем SASS: руководство для новичка

Написание большого количества CSS-кода может быть очень утомительным, поэтому изучение SASS и LESS может сделать жизнь любого веб-разработчика и дизайнера ощутимо легче.

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

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

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

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

Доступны два основных варианта: SASS и LESS. В данной статье, я расскажу о SASS.

Недостатки CSS

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

Давайте рассмотрим слабые места использования «чистого» CSS:

• Нет возможности наследования уже созданных стилевых правил;
• Нельзя создавать переменные, которые можно повторно использовать в таблице стилей;
• Вы не можете выполнять числовые вычисления.

Преимущества использования препроцессоров

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

Взгляните теперь на список преимуществ использования препроцессоров:

• Они позволяют вам использовать переменные, которые могут быть повторно использованы внутри таблицы стилей;
• Более продуманный и функциональный синтаксис, который предоставляет дополнительные возможности, которых нет в «чистом» CSS;
• Скомпилированные CSS-файлы загружаются на рабочий веб-сервер.

Что такое SASS?

SASS расшифровывается как Syntactically Awesome Style Sheets – если переводить дословно, то это звучит как: «Синтаксически потрясающие таблицы стилей».

Эта технология была придумана и воплощена Хэмптоном Катлином (Hampton Catlin). SASS манипулирует CSS-правилами, используя переменные, так называемые миксины (mixins), наследование и вложенность.

Исходные и скомпилированные файлы имеют расширения .sass и .scss, соответственно. Исходники переводятся в хорошо отформатированный CSS-код с помощью командной строки или веб-плагина.

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

Формат .sass против .scss

Перед началом рассказа о том, как использовать SASS, сравним форматы расширений .sass и .scss, генерируемых SASS. Для начала я представлю вам простой CSS-код, а затем покажу, как его упростить с помощью обоих расширений SASS.

CSS-код

Для исходного примера я использовал тег header и присвоил нулевое значение свойствам margin и padding, а затем прописал белый цвет для свойства color:

header {
     margin: 0;
     padding: 0;
     color: #fff;
}

Формат .scss (новый синтаксис SASS)

Чтобы написать приведенный выше пример в формате .scss, мы будем использовать переменную $color и дадим ей шестнадцатеричное значение: #fff, которое соответствует белому цвету.

Далее, вместо того, чтобы по правилам CSS присвоить свойству color значение #fff, мы используем переменную $color , которую определим в начале кода:

$color:  #fff;
header {
    margin: 0;
    padding:0;
    color: $color;
}

Формат .sass (старый синтаксис SASS)

Для .sass мы имеем такую же переменную и значение, как и для .scss, но точки с запятой и фигурные скобки не используются.

Заметьте, что синтаксис зависим от абзацев. Это старый формат SASS:

$color: #fff
header
   margin: 0
   padding: 0
   color: $color

Вот что вам понадобится для успешного завершения практики по данной статье:

• Инсталлятор Ruby;
• Текстовый редактор;
• Время и терпение.

Установка Ruby

Чтобы опробовать SASS, вам нужно скачать Ruby. Запустите программу установки и, выбрав в появившемся окне подходящий язык интерфейса, нажмите OK:

Затем поставьте отметку о том, что вы согласны с условиями лицензии и нажмите «Далее».

После этого, произведите установку в желаемое место на жестком диске и убедитесь, что выбрана радио-кнопка «Add Ruby executables to your PATH». Нажмите кнопку «Install» и установка завершена:

Проверка правильности запуска Ruby

Теперь, у вас на компьютере установлен Ruby и пришло время проверить его работоспособность. Откройте командную строку и введите ruby -v.

Команда должна возвратить текущую версию и дату установленного Ruby. Если возвращена ошибка, то значит Ruby был установлен некорректно, либо переменные окружения Ruby не были зарегистрированы:

Установка SASS

Чтобы установить SASS, откройте командную строку и введите gem install sass, после этого вы должны получить сообщение об успешном окончании установки:

Подготовка необходимых файлов

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

Создайте новую папку (для данной статьи, я расположил эту папку на своем рабочем столе) и назовите её, например, SASS или как вам будет угодно. Внутри папки SASS, создайте HTML-файл, дав ему имя index.html.

Поместите в него следующий код:

<!DOCTYPE html>
 
<html lang="en">
    
 <head>
         
<title>Введение в SASS</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
<div id="container">
 
<header>
<h1>Простой Sass-документ</h1>
<h2>Статья для веб-дизайнеров и разработчиков</h2>
</header>
 
<div>
<p id="samplepara">Простой текстовый параграф</p>
<p>Еще один параграф с текстом</p>
</div>
 
 
<div>
<ul id="list1">
    <li>1й элемент списка</li>
    <li>2й элемент списка </li>
    <li>3й элемент списка </li>
</ul>
</div>
 
 
<footer>
<h3>Это отличный футер!</h3>
</footer>
 
</div>
 
</body>
 
</html>

Теперь, для файла SASS, создайте пустой файл в предпочитаемом вами текстовом редакторе и назовите его style.scss.

Если вы точно следовали всем шагам, то на данный момент у вас будет следующая структура файлов:

Конвертация SASS-кода в CSS

Чтобы преобразовать код SASS в CSS, мы будем использовать команду –watch, которая выполнит компиляцию.

Также, эта команда просканирует папки на наличие изменений. Давайте попробуем сконвертировать SASS-файл в CSS-файл. Но сначала нам нужно расположить код в файле ourstyle.scss, чтобы убедиться, что все работает.

Скопируйте и вставьте следующий SASS-код в файл stye.scss, созданный вами в папке SASS:

$myMargin: 0px auto;
$myColor: red;
$myWidth: 600px;
 
h1 {
    color: $myColor;
    $myMargin: $margin;
}

Далее, откройте командную строку и перейдите в директорию, где вы расположили ваши файлы. В моем случае это папка на рабочем столе, поэтому я ввожу cd "Desktop":

Теперь, находясь в папке рабочего стола, введите sass –watch Sass:Sass:

Используя команду – watch, сконвертируем все .scss-файлы в папке SASS. Также, файлы будут просканированы на наличие в них изменений. Заметьте, что в команде два слова SASS, разделенные двоеточием.

Первое слово представляет текущее положение файла .scss, а второе – расположение выходного файла. Убедитесь, что вы подключили сконвертированный CSS-файл к вашей HTML-странице:

Использование переменных

Переменные SASS объявляются с предваряющим их название символом $ и записываются аналогично CSS-свойствам. С помощью SASS, вы можете определять переменные для таких стилей, как font size, margin, padding и так далее.

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

В SASS существует шесть разных типов переменных:

• Строковые (например, $myString: “здесь ваш текст”;);
• Числовые (например, $myNum: 10px;);
• Цветовые (например, $myColor: white;);
• Логические (например, $myBool: true;);
• Списковые (например, $myItemList: 1px solid red;);
• Тип null – значение отсутствует (например, $myVar: null;).

Давайте опробуем эти типы на практике. Откройте файл style.scss и добавьте в него следующий код:

$myColor: #009a82;
$myString: "здесь ваш текст";
$myFontSize: 13px;
$myMargin: 0px auto;
$myWidth: 460px;
 
h1 {
    color: $myColor;
    margin: 0;
    padding: 0;
}
 
#container {
    width: $myWidth;
    margin: $myMargin;
}

Запустив этот код в браузере, вы получите следующее:

Вложенность

SASS также позволяет определять вложенные стили. Это позволит вам писать очень легко читающиеся стили.

В качестве примера, рассмотрим следующий код:

#container p {
   font-family: Arial;
   font-size: 13px;
}
 
#container h1 {
   font-family: Tahoma;
   font-size: 15px;
}
 
#container h2 {
   font-family: Helvetica;
   font-size: 14px;
}

Для SASS, код будет выглядеть следующим образом:

$myFontsize1: 13px;
$myFontsize2: 18px;
$myFontsize3: 25px;
$myWidth: 500px;
$myMargin: 0px auto;
 
#container {
    width: $myWidth;
    margin: $myMargin;
 
    p {
        font-family: Arial;
        font-size: $myFontsize1;
    }
 
    h1 {
        font-family: Tahoma;
        font-size: $myFontsize3;
    }
 
    h2 {
 
        font-family: Helvetica;
        font-size: $myFontsize2;
}
}

Обратите внимание, что мы расположили все стили элементов под идентификатором container, вместо того, чтобы предварять этим id каждый из них.

Если вы запустите этот код в браузере, то увидите следующую картину:

Миксины (Mixins)

Миксины позволяют вам определять общие свойства, а затем использовать их повторно, то есть это реализация наследования. Миксины определяются с помощью директивы @mixin и включают в себя блок кода, который затем можно использовать с помощью директивы @include.

Давайте попрактикуемся. Скопируйте приведенный ниже код в свой файл style.scss:

@mixin border {
   border: 1px solid red;
}
 
#container {
   width: 960px;
   margin: 0 auto;
   @include border;
}

Как вы можете видеть, мы использовали директиву @mixins, чтобы создать стиль для свойства border, а затем включили его в стиль идентификатора container с помощью директивы @include.

Если вы запустите данный код в браузере, то увидите следующее:

Операторы

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

Давайте посмотрим, как это работает. Откройте свой файл style.scss и вставьте в него код, представленный ниже:

$myColor: #aa30ff;
$myPadding: 20px;
$thickness: 1px;
$border: solid red;
 
#samplepara{
    color: $myColor;
    padding: $myPadding+30;
}
 
#list1 {
    color: $myColor;
    border: $thickness+5 $border;
}

Как видите, мы выполнили некоторые математические вычисления, добавив 30px к значению свойства padding, а также увеличили толщину border на 5px.

Если вы запустите этот пример в браузере, то увидите следующую картину:

Функции

SASS также имеет в своем арсенале различные функции. Отличным примером являются цветовые функции.

Взгляните на их список ниже:

• darken(color, amount);
• lighten(color, amount);
• saturate(color, amount);
• desaturate(color, amount);
• alpha(color).

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

А сейчас, мы рассмотрим несколько практических примеров с использованием перечисленных выше функций.

Откройте свой файл style.scss и вставьте туда следующий код:

$myColor: #202020;
$myBackground: #e6e6e6;
 
body {
     background: darken($myBackground, 20%);
}
 
h1, h2 {
     color: lighten($myColor, 40%);
}

Результатом этого примера будет затемнение цвета в переменной $myBackground на 20% с помощью соответствующей функции. Далее, в этом же примере, заголовки H1 и H2 осветляются на 40% соответствующей функцией.

После запуска данного примера в браузере вы увидите примерно следующую картину:

Настройка форматирования скомпилированных стилей в SASS

Одной из мощных функций SASS является наличие опций, позволяющих управлять форматированием кода .scss-файлов при конвертации их в обычный CSS.

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

Вложенный формат (Nested Format)

Вложенный стиль это формат по умолчанию. Он задает отступы для всех стилей в выходном CSS-файле.

Чтобы увидеть его в действии, скопируйте и вставьте код, приведенный ниже в свой файл style.scss, а затем откройте командную строку и убедившись, что вы внутри директории SASS, введите SASS –update style.scss.

Эта команда обновит форматирование для уже скомпилированных CSS-стилей через командную строку:

После этого откройте файл style.css и обратите внимание на появившиеся отступы:

Расширенный формат (Expanded Format)

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

Давайте посмотрим это в действии.

Используя код, приведенный выше, откройте командную строку и введите sass –update style.scss –style expanded. Как можно заметить, мы добавили опцию –style, использующуюся для перекомпиляции CSS-файла в другое форматирование:

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

Каждому свойству выделена отдельная строка, а фигурные скобки раскрыты так, чтобы визуально выделять помещенные в них свойства:

Компактный формат (Compact Format)

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

Добавляются пробелы между фигурными скобками, но свойства располагаются на одной строке.

Чтобы увидеть этот формат в действии, используя предыдущий пример, откройте командную строку и наберите команду sass –update style.scss –style compact:

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

Компрессированный формат (Compressed Format)

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

Чтобы увидеть, как выглядит этот формат, в командной строке наберите sass –update style.scss –style compressed:

Как видно, на изображении ниже, в выходном CSS-файле отсутствуют пробелы и вообще какое-либо форматирование, чем и достигается сжатие:

Заключение

SASS предоставляет множество путей упрощения работы с привычной всем технологией CSS. Это позволяет ощутимо уменьшить повторяемость кода с помощью переменных.

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

Это поможет вам очень быстро создавать профессиональные сайты. Надеюсь, статья была вам полезна!