SASS - этап развития вёрстки сайтов

Как пользоваться SASS

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

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

Установка SASS позволит писать CSS-код без постоянных повторений одинаковых свойств. За счет этого код будет максимально лаконичным и понятным. Благодаря этим свойствам, у веб-разработчиков не возникнет проблем с форматированием кода.

Минусы CSS

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

Если коротко говорить о минусах «чистого» CSS, то в первую очередь нужно отметить:

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

Плюсы применения препроцессоров

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

возможность повторного использования переменных в таблице стилей;
функциональный синтаксис;
возможность загрузки скомпилированных файлов в формате CSS на web-сервер.

Что такое SASS?

Дословный перевод SASS с английского языка звучит следующим образом: «Синтаксически удивительные таблицы стилей». Этот перевод максимально точно характеризуют данную технологию, предназначенную для манипулирования CSS-правилами посредством миксинов. Стоит добавить, что эта технология, разработанная Хемптоном Кетлином, работает по принципу вложенности и наследования.

Исходники и скомпилированные файлы имеют форматы, соответственно, .sass и .scss.

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

Расширение .sass vs. .scss

Как было сказано выше, формат .sass относится к исходному CSS-файлу. Пример такого файла указан ниже:

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

После применения препроцессора SASS в этом файле произошли некоторые изменения. Во-первых, он поменял расширение на .scss. Во-вторых, в файле появилась новая переменная $color. Она приняла шестнадцатеричное значение #fff, соответствующее белому цвету. Далее эта переменная используется в «хэдере» со свойством color.

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

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

Для того чтобы продолжить изучение возможностей SASS понадобится использование инсталлятора Ruby и любого «текстовика».

Установка Ruby

Для того чтобы испытать все функции SASS, потребуется установка Ruby. Перед установкой этой программы необходимо выбрать предпочитаемый язык интерфейса:

После этого пользователь должен согласиться с условиями компании-поставщика софта и нажать на кнопку «Далее».

Следующий этап – выбор места для установки. Перед установкой следует убедиться в том, что кнопка «Добавить исполняемые файлы Ruby в PATH» активна. Далее остается нажать кнопку «Install» и дождаться завершения установки.

Установка SASS

Для того чтобы использовать компилятор SASS, необходимо открыть Cmd.exe и ввести команду gem install sass. Нажав Enter, вы увидите перед собой следующее сообщение:

Подготовка файлов

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

Первое действие – создание специальной папки для этих файлов. Ее можно назвать, например, SASS online. Внутри этой папки необходимо создать файл с именем 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>

Следующий этап – создание пустого файла в любом доступном текстовом редакторе. Новый файл должен называться style.scss. После этого у пользователя должна образоваться такая структура файлов:

Применение переменных

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

Применение предопределенных переменных позволяет использовать значения, которые были заданы изначально.

Этот препроцессор предусматривает возможность применения таких типов переменных:

числовых ($myNumber: 5px;);
строковых ($myStr: “Hello, World!”;);
логистических ($myBoolean: false;);
цветовых ($myClr: black;);
списковых ($myList: 12px white;);
null ($myVariable: null;).

Документация SASS

Все перечисленные типы следует протестировать на практике. Для этого нужно создать 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 – это эффективный инструмент для того, чтобы существенно упростить работу веб-разработчиков, использующих CSS. Применение этой технологии способствует существенному уменьшению повторяемости кода.

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

Теги:

SASS — как использовать