SASS для Начинающих: Скачивание и Установка
Эта серия туториалов по SASS предназначена для начинающих и опытных разработчиков. Это первая из четырех частей обучающих статей, в которой вы познакомитесь с этим препроцессором, установите его и узнаете о некоторых функциях.
Что такое SASS?
SASS (Syntactically Awesome Style Sheets) — один из самых популярных CSS препроцессоров. Он представляет собой набор функций для CSS, которые позволяют кодить быстрее и эффективнее. SASS поддерживает интеграцию с Firefox Firebug. SassScript позволяет создавать переменные, вложенные стили и наследуемые селекторы.
SASS позволяет быстро и просто писать меньше (иногда значительно меньше) CSS кода и динамично управлять им как языком программирования (кстати, это не язык программирования). Это отличный инструмент для написания более функционального и чистого CSS, который может ускорить рабочий процесс любого дизайнера и разработчика.
Зачем нужен SASS?
Большинство фронтенд фреймворков, включая Bootstrap, Materialize и Foundation, созданы с помощью этого отличного препроцессора. Знание SASS поможет вам использовать больше функций этих фреймворков.
Как использовать SASS?
Существует много приложений, которые позволяют легко и быстро начать использовать SASS: CodeKit, Compass, Koala и т.д. Вы узнаете о них в других частях туториала. В этой главе мы не будем использовать никаких приложений или инструментов кроме тех, которые необходимы для запуска SASS на компьютере. Вам не придется волноваться об операционной системе, потому что всё будет понятно всем пользователям.
Скачивание и Установка SASS
Установить SASS можно только на машину, на которой уже есть Ruby:
После установки Ruby на вашу машину можно установить SASS. Давайте откроем командную строку Ruby и установим SASS на вашу систему:
Если команда выше не сработает, то вам, возможно, придется использовать sudo команду:
Если вы хотите проверить версию SASS используйте следующую команду:
SASS установлен. Давайте создадим папку проекта и назовем ее sass-basic. Создайте базовый html файл со следующим кодом:
Теперь нужно компилировать этот файл используя командную строку/терминал. Давайте откроем командную строку в той же директории (возможно, придется использовать командную строку Ruby, если обычная командная строка не работает). Вбейте следующее и нажмите Enter:
В следующей главе мы рассмотрим SASS переменные, и почему они являются самой полезной функций SASS (и в любом другом CSS препроцессоре).
Что такое Sass
Sass – это своего рода расширение, созданное для упрощения каскадных таблиц стилей (CSS). Все те, кто начинает заниматься разработкой и администрированием сайтов, первым делом сталкиваются с такими понятиями, как HTML и CSS, и только спустя время, получив опыт в создании таблиц стилей, начинают понимать, чем же так хорош и удобен язык Sass.
Сегодня я расскажу о преимуществах этого языка и способах применения, но для начала разберемся с основами HTML и CSS.
Для чего нужен HTML
HTML (или HyperText Markup Language) – это стандартизированный язык разметки документов в интернете. Вопреки расхожему заблуждению, HTML – это не язык программирования. Он используется для того, чтобы все элементы на странице (тексты, рисунки, таблицы…) были расположены правильно; за его чтение отвечают специальные программы, которые всем знакомы – браузеры (веб-обозреватели).
HTML использует для разметки документов теги – именно они определяют, как и где элемент будет отображаться на странице. Теги бывают парными (
В самом базовом виде структура документа выглядит вот так:
Теперь перейдем к CSS.
За что отвечает CSS
CSS (или Cascading Style Sheets) – это формальный язык, который определяет внешний вид документа, написанного с использованием HTML.
Разница между HTML и CSS заключается в том, что HTML отвечает за структуру документа, а CSS – за оформление и форматирование.
Естественно, HTML тоже имеет возможность задавать стиль страницы, но с появлением CSS разработчики смогли:
Часто свойства совпадают в HTML и CSS. Цвет фона можно задать в HTML:
В общем виде структура CSS такая: 
Познакомившись с основами, перейдем к главной теме статьи.
Так для чего же нужен Sass?
Sass (или Syntactically Awesome Stylesheets) – это скриптовый метаязык (т.е. язык, описывающий другой язык), разработанный для упрощения файлов CSS. Этот модуль входит в Haml (HTML abstraction markup language), который используется для упрощения HTML.
Как Haml компилируется в HTML, так и Sass компилируется в обычные CSS-стили.
Выпуск Sass состоялся в ноябре 2006 года, актуальная стабильная на момент написания статьи версия – 3.5.6 от 23 марта 2018 года.
В зависимости от выбранного синтаксиса Sass-файлы могут иметь расширения:
Так как Haml был написан Ruby-разработчиками, то и Sass унаследовал Ruby-подобный синтаксис, который значительно отличается от CSS. Поэтому в 2010 году был презентован синтаксис SCSS, который приблизил синтаксис Sass к CSS и сделал его более совместимым.
Каждый из этих синтаксисов имеет свои особенности и преимущества.
Синтаксис Sass
Этот синтаксис короче, в нем отсутствуют скобки и точки с запятой, поэтому набирать его проще.
Отступы имеют логическое значение, поэтому крайне важно следить за ними – неправильный отступ может сломать таблицу стилей. Отступ у блока селектора определяет вложенный селектор. Если случайно сместить элемент вправо, он внезапно может оказаться дочерним элементом другого элемента, что сильно изменит результат.
Такой синтаксис определенно понравится тем, кто в разработке использует Ruby или Python.
Синтаксис SCSS
Синтаксис полностью совместим с CSS, поэтому нет необходимости изучать его отдельно, ведь это просто CSS с дополнениями.
Синтаксис SCSS – это более читаемый код, в котором проще разобраться. Поэтому все больше разработчиков выбирают именно его. На нем разрабатываются инструменты и плагины для Sass.
В целом, использовать синтаксис SCSS более удобно, чем Sass, поэтому тем, кто не может сделать выбор, следует присмотреться именно к SCSS.
Основные преимущества Sass
Использование Sass дает ряд преимуществ, которые значительно экономят время и силы.
Использование переменных
Sass дает возможность назначать переменные. Их доступность определяет уровень вложенности селекторов. Если они определяются вне вложенного селектора, то доступны глобально.
Переменные удобно использовать, если одно значение применяется несколько раз. В этом случае при помощи переменной все необходимые значения можно задать в начале кода и далее просто ссылаться на них. И если будет необходимо изменить значение переменной, то оно изменится и во всех остальных местах, где она проставлена.
А после компиляции код будет выглядеть вот так:
Вложенные правила
Sass дает возможность вкладывать правила CSS друг в друга. Благодаря этому становится намного проще редактировать стили.
Вложенные правила нужны не только для минимизации кода, но и для структурирования кода (наподобие HTML).
Использование дополнений
Дополнения позволяют следовать прекрасному правилу DRY: Don’t Repeat Yourself. Вместо того чтобы копировать и множить куски одинакового кода, Sass предлагает сохранить его в переменную, а затем использовать там, где это необходимо. При компиляции переменная будет преобразована в нужную часть кода.
Наследование
Sass дает возможность создать правило, а затем использовать его внутри другого. При этом все свойства класса будут переданы наследуемому элементу.
Заключение
Sass – это полезный инструмент, который значительно упрощает работу с CSS. В нем легко разобраться, поэтому время, потраченное на освоение, наверняка окупится при разработке веб-сайта.
Изучаем SASS: руководство для новичка
Написание большого количества CSS-кода может быть очень утомительным, поэтому изучение SASS и LESS может сделать жизнь любого веб-разработчика и дизайнера ощутимо легче.
Для начинающего в целях обучения это очень даже полезно, однако со временем, ваши навыки будут улучшаться и придет необходимость в повышении производительности труда.
Вы удивитесь, когда узнаете, что есть способы писать CSS-код без множественных повторений одних и тех же свойств. В этой статье будет рассказано об одном из них.
Благодаря CSS-препроцессорам, стало возможным писать лаконичный CSS-код без постоянного повторения одних и тех же свойств.
К тому же, получившийся код отформатирован гораздо приятнее. Вы можете выполнять вычисления и создавать динамические стили, используя один из таких методов препроцессинга.
Недостатки CSS
Можно использовать только CSS, но при разработке больших многостраничных сайтов, у вас, скорее всего, появится желание получить от этой технологии возможности, которых она не имеет.
Давайте рассмотрим слабые места использования « чистого » CSS:
Преимущества использования препроцессоров
Стандартный CSS не может дать вам ничего, кроме неудобств, в то время как использование методов препроцессинга может сохранить вам много времени и сил.
Взгляните теперь на список преимуществ использования препроцессоров:
Что такое SASS?
SASS расшифровывается как Syntactically Awesome Style Sheets – если переводить дословно, то это звучит как: « Синтаксически потрясающие таблицы стилей ».
Эта технология была придумана и воплощена Хэмптоном Катлином ( Hampton Catlin ). SASS манипулирует CSS-правилами, используя переменные, так называемые миксины ( mixins ), наследование и вложенность.
SASS упрощает написание CSS-кода и позволяет динамически им манипулировать. Это отличный способ создания более функциональных CSS-кодов, который позволяет ускорить выполнение ежедневной работы веб-разработчиков и дизайнеров.
CSS-код
Заметьте, что синтаксис зависим от абзацев. Это старый формат SASS :
Вот что вам понадобится для успешного завершения практики по данной статье:
Установка Ruby
Затем поставьте отметку о том, что вы согласны с условиями лицензии и нажмите « Далее ».
После этого, произведите установку в желаемое место на жестком диске и убедитесь, что выбрана радио-кнопка « Add Ruby executables to your PATH ». Нажмите кнопку « Install » и установка завершена:
Проверка правильности запуска Ruby
Команда должна возвратить текущую версию и дату установленного Ruby. Если возвращена ошибка, то значит Ruby был установлен некорректно, либо переменные окружения Ruby не были зарегистрированы:
Установка SASS
Подготовка необходимых файлов
Поместите в него следующий код:
Если вы точно следовали всем шагам, то на данный момент у вас будет следующая структура файлов:
Конвертация SASS-кода в CSS
Далее, откройте командную строку и перейдите в директорию, где вы расположили ваши файлы. В моем случае это папка на рабочем столе, поэтому я ввожу cd « Desktop «:
Теперь, находясь в папке рабочего стола, введите sass –watch Sass:Sass :
Использование переменных
Использование переменных дает вам возможность повторного использования заданных ранее значений.
В SASS существует шесть разных типов переменных:
Давайте опробуем эти типы на практике. Откройте файл style.scss и добавьте в него следующий код:
Запустив этот код в браузере, вы получите следующее:
Вложенность
SASS также позволяет определять вложенные стили. Это позволит вам писать очень легко читающиеся стили.
В качестве примера, рассмотрим следующий код:
Если вы запустите этот код в браузере, то увидите следующую картину:
Миксины (Mixins)
Давайте попрактикуемся. Скопируйте приведенный ниже код в свой файл style.scss :
Если вы запустите данный код в браузере, то увидите следующее:
Операторы
Давайте посмотрим, как это работает. Откройте свой файл style.scss и вставьте в него код, представленный ниже:
Если вы запустите этот пример в браузере, то увидите следующую картину:
Функции
SASS также имеет в своем арсенале различные функции. Отличным примером являются цветовые функции.
Взгляните на их список ниже:
А сейчас, мы рассмотрим несколько практических примеров с использованием перечисленных выше функций.
Откройте свой файл style.scss и вставьте туда следующий код:
После запуска данного примера в браузере вы увидите примерно следующую картину:
Настройка форматирования скомпилированных стилей в SASS
Вложенный формат (Nested Format)
Вложенный стиль это формат по умолчанию. Он задает отступы для всех стилей в выходном CSS-файле.
Эта команда обновит форматирование для уже скомпилированных CSS-стилей через командную строку:
После этого откройте файл style.css и обратите внимание на появившиеся отступы:
Расширенный формат (Expanded Format)
Это один из наиболее удобных для визуального восприятия форматов, так как все фигурные скобки проставлены так, чтобы выделять расположенные внутри них свойства, каждое из которых располагается на новой строке.
Давайте посмотрим это в действии.
Если теперь вы взглянете на скомпилированный CSS-файл, то увидите форматирование, как на изображении ниже.
Каждому свойству выделена отдельная строка, а фигурные скобки раскрыты так, чтобы визуально выделять помещенные в них свойства:
Компактный формат (Compact Format)
Этот формат представляет собой очень сжатый стиль написания, который, тем не менее, достаточно хорошо визуально воспринимается.
Добавляются пробелы между фигурными скобками, но свойства располагаются на одной строке.
Чтобы увидеть этот формат в действии, используя предыдущий пример, откройте командную строку и наберите команду sass –update style.scss –style compact :
После компиляции, вы увидите, что код стал очень компактным, а элементы плотно расположены друг относительно друга:
Компрессированный формат (Compressed Format)
Компрессированный формат является самым сжатым. Он подходит для конечного этапа, когда продукт запускается и требуется минимальный размер файла и производительность.
Чтобы увидеть, как выглядит этот формат, в командной строке наберите sass –update style.scss –style compressed :
Как видно, на изображении ниже, в выходном CSS-файле отсутствуют пробелы и вообще какое-либо форматирование, чем и достигается сжатие:
Заключение
SASS предоставляет множество путей упрощения работы с привычной всем технологией CSS. Это позволяет ощутимо уменьшить повторяемость кода с помощью переменных.
SASS это очень мощный инструмент, который поможет вам увеличить свою производительность, будь вы веб-дизайнер или веб-программист. Изучайте SASS прямо сейчас и открывайте для себя его потенциал.
Это поможет вам очень быстро создавать профессиональные сайты. Надеюсь, статья была вам полезна!
Полный гайд по SCSS/SASS
Apr 10, 2019 · 9 min read
Далее я убуду использовать названия Sassy, Sass и SCSS, поэтому давайте определимся, так как концептуально разница не велика, будем считать, что это одно и тоже. Вы поймёте различия по мере изучения темы. Отмечу, что SCSS сейчас наиболее популярна, вероятно потому, что является наиболее поздней версией оригинального Sass синтаксиса (некоторые считают её лучшей).
Чтобы по-настоящему почувствовать преимущества Sass, вам нужно понять ключевые идеи этого метаязыка. Об этом мы и поговорим.
Весь Sass/SCSS код компилируетс я обратно в стандартный CSS, поэтому браузер понимает его и корректно выводит результат. Текущие версии браузеров не поддерживают Sass/SCSS непосредственно (как и другие препроцессоры), а стандартная спецификация CSS не предлагает нам альтернатив (пока).
Приступим!
Пока вы хотя бы раз не попробуете сгенерировать значения для свойств с помощью цикла, вы не познаете настоящую мощь Sassy CSS. Но мы начнём с основ SCSS и постепенно доберёмся до самого интересного.
Что такого есть в Sass/SCSS, чего нет в стандартном CSS?
Препроцессор Sass
Sass не динамичный язык. Он не позволяет генерировать или изменять CSS свойства и значения в реальном времени. Но вы можете генерировать их более эффективным способом и внедрять в стандартные свойства (например, для CSS анимации).
Новый синтаксис
SCSS на самом деле не добавляет ничего нового в сам язык CSS. Это просто новый синтаксис, который в большинстве случаев сокращает время написания стилей.
Несколько фактов для начала
CSS препроцессоры добавляют новый синтаксис в CSS.
Существует 5 CSS препроцессоров: Sass, SCSS, Less, Stylus и PostCSS.
На данный момент ни один браузер не поддерживает CSS препроцессоры напрямую. Вы можете свободно экспериментировать с любым из 5 препроцессоров на сервисе codepen.io. Кроме того, используя препроцессор, вы должны будете установить его к себе на веб-сервер.
Эта статья о SCSS, но другие препроцессоры имеют схожие функции, хотя синтаксис может отличаться.
Superset
Sassy CSS в любом своём проявлении является «расширением» языка CSS, а значит, всё что работает в CSS, работает и в Sass/SCSS.
Переменные
Вложенные правила
В стандартном CSS, вложенность достигается путём расстановки пробелов.
С помощью Sassy CSS этот код можно записать так:
Конечно, в итоге это всё скомпилируется в обычный CSS. Это просто синтаксис, но как видите, он выглядит чище и с меньшими повторениями.
В частности, это помогает работать со сложными макетами. Выравнивание, в котором вложенные свойства записаны в коде, точно соответствует структуре макета приложения.
Тем временем под капотом, препроцессор компилирует всё в стандартный код CSS (как в первом примере), чтобы браузер смог его отобразить. Мы лишь изменили способ написания CSS.
Оператор &
В Sassy CSS можно использовать оператор & (И), давайте посмотрим, как это работает.
В 5 строке мы видим &:hover, после компиляции, вместо символа &, подставляется имя родительского элемента, т.е. a:hover. В результате у нас получится такой код:
Миксины
Для объявления миксина используйте директиву @mixin (ещё это называют mixin rule).
Давайте создадим миксин, который определяет поведение элемента как Flex:
Вы можете передавать аргументы в @mixin, как если бы это была функция, а затем присваивать их свойствам CSS. Рассмотрим это в следующей части.
Кросс-браузерность. Пример
Некоторые экспериментальные фичи работают только в определённых браузерах.
С помощью миксин удобно определять CSS свойства, индивидуальные для каждого браузера, в одном классе.
Теперь нужно подключить ( @include) этот миксин в CSS класс:
Арифметические операции
Как и в стандартном CSS, вам доступны операции сложения, вычитания, умножения и деления, но в отличии от классического CSS синтаксиса, вам необязательно использовать функцию calc().
Есть несколько неочевидных особенностей, которые следует учитывать, чтобы избегать ошибок.
Сложение
Убедитесь, что оба значения соответствуют одному формату.
Вычитание
Этот оператор работает так же, как и предыдущий.
Умножение
Для умножения используется звёздочка, как и в стандартном CSS calc(a * b).
Деление
Так как в стандартном CSS символ деления зарезервирован для других целей, есть некоторые особенности его использования. Например, font: 24/32px определяет размер шрифта 25px и line-height 32px. Т.е. символ деления используется для сокращённой записи свойств шрифта. Посмотрим, как работает SCSS, сохраняя совместимость со стандартным CSS.
