Для чего нужен sass
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. В нем легко разобраться, поэтому время, потраченное на освоение, наверняка окупится при разработке веб-сайта.
Полный гайд по 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.
Sass-архитектура вашего проекта
Существуют разные подходы для организации sass-архитектуры, какую бы вы не выбрали, главное, чтобы она была.
Я отношусь к организации sass, как к инструменту, в первую очередь, он не должен мешать и тормозить ход мыслей. Поэтому начиная проект, я не знаю какой получится архитектура, она устаканивается по ходу работы и принимает форму подходящую для требований проекта.
Bem, Smacss, Oocss, Organic-css должны давать вам гибкость мысли, чтобы построить свой проект.
Я всегда начинаю проект со стандартной для себя файловой организации: 
Все что я знаю на 100%, что мне пригодится папочка core, где будут лежат настройки проекта, общие правила, помощники, пройдемся по основным:
core/_core.sass
Служит для подключения всех файлов из папки core, вы можете подключить сюда compass, если он используется на проекте.
core/_mixins.sass
Я стараюсь не таскать с собой кучу миксинов из проекта в проект, этот файл обрастается ими по мере необходимости, но по-умолчанию у меня используются пару миксинов: em, cp, reset-btn.
core/_reset.sass
Нормалайз у меня не прижился, я использую reset в своих проектах, чтобы уровнять стили в браузерах.
core/_settings.sass
В этом файле собираются настройки для всего проекта: размеры шрифтов, цвета, максимальная ширина и т. д.
core/_base.sass
Служит для общих правил на проекте, body я делаю font-size равной заданой переменной, чтобы в дальнейшем удобно высчитывать em с помощью одноименного миксина, раньше я делал этот font-size равному 62.5%, чтобы 1em был равен 10 пикселям.
После этого я стараюсь просто верстать не уделяя особого внимания архитектуре, иногда даже в одном файле. Но за все время проекта наступают точки, когда будущая архитектура начинает прорисоваться и тогда, я раскладываю все по полочкам, как это требует проект, не выдумывая раньше времени себе ограничений, из этого получаются совершенно разные формы организации:
Например, сайт моего небольшого проекта не требовал особой организации, кстате, исходный код можно посмотреть на гитхбе: github.com/omelniz/block-flute
Одностраничный сайт, разбитый на блоки, smgomsk.ru
Паблик спич уже сайт побольше и потребовал от себя более гибкой архитектуры. theps.ru
Большие проекты, должны иметь более строгие правила, хотя и начать свой путь могут также. Правила должен кто-то поддерживать иначе проект превратится в тыкву, возможно уже через пару месяцев.
Это мой личный опыт в организации sass-архитектуры проектов, мне интересно подумать головой, а не слепо использовать имеющиеся методологии, хотя иногда именно это и нужно.
Sass за 15 минут
Если вы пишете очень много кода на CSS, препроцессор может значительно сократить объём вашей работы и ваш уровень стресса. Использование таких инструментов, как Sass, Less, Stylus или PostCSS делает ваши CSS-файлы более читабельными и облегчает последующую их поддержку. Благодаря переменным и функциям код становится более организованным и позволяет разработчикам быстрее работать и совершать меньше ошибок.
В этой статье мы разберём, как он работает и как что-то сделать с его помощью.
Начало
Также пришло время упомянуть тот факт, что Sass предлагает нам два различных синтаксиса: Sass и SCSS. Оба выполняют одно и то же, просто по-разному написаны. SCSS новее и обычно считается лучше, чем предшественник, так что использовать будем его. Если хотите узнать про разницу двух подробнее, гляньте на эту статью.
Переменные
Переменные работают по такому же принципу, как и в любом языке программирования. Объявляя переменную, мы храним в ней какое-либо значение, которое обычно встречается в CSS в виде цвета, шрифта или целого набора свойств, например для box-shadow.
Ниже приведены примеры переменных как в SCSS, так и в CSS.
Идея в том, что данный подход упрощает процесс повторного использования переменных, а также мы можем быстро изменить значение конкретной переменной там, где мы её объявляем, вместо повсеместного перепечатывания кода.
Mixin
Mixin можно также представить как класс-конструктор в языке программирования: вы используете ряд свойств из CSS, создавая отдельный объект, который потом используете где хотите, задавая разные значения его свойствам.
Ниже приведён пример использования Mixin в коде:
Extend
Следующая особенность, на которую мы взглянем, будет @extend, она позволяет вам наследовать CSS-свойства одного селектора от другого. Принцип работы напоминает Mixin, но Extend, как правило, используется для того, чтобы создать логическую связь между элементами страницы.
Extend используется, когда нам, к примеру, нужно два похожих элемента, которые имеют некоторые отличия. Например, давайте возьмём две кнопки: согласие и отмена.
Если вы взгляните на CSS код, то заметите, что Sass скомбинировал селекторы вместо повторения одних и тех же строк несколько раз в коде.
Вложенные конструкции
Как известно, в HTML, как правило, программист пишет код по принципу «гнездования». Иными словами, блоки кода находятся в других блоках кода и содержат вложенные блоки кода. CSS же в этом плане представляет собой полнейший хаос. Если для вас это проблема, Sass может помочь вам в организации кода.
Вот пример кода на SCSS:
Операции
Вы можете выполнять различные математические операции прямо в коде, что значительно упрощает работу в некоторых случаях.
Хоть сейчас и обычный CSS предлагает те же возможности, правда в форме calc(), альтернативный вариант на Sass быстрее в написании, имеет операцию mod (%) и применяется на более широком спектре типов данных (цвета, строки).
Функции
В Sass имеется целый ряд встроенных функций разного рода. К примеру, функции для операций со строками, цветами или выполняющие различные математические операции вроде random() или round().
Фрагмент кода на SCSS
Вдобавок к огромному списку встроенных функций, вы также можете объявлять свои собственные.