Возможности Sass


Содержание

Основы Sass: @-правила и директивы

@-правила и директивы — ключевые особенности Sass, которые непеременно нужно знать, особенно это касается директивы @import. Некоторые из этих @-правил расширяют @-правила CSS, другие являются специфичными для Sass. В любом случае, вы должны знать эти правила, если собираетесь работать с Sass.

@import

Sass расширяет правило CSS @import, добавляя возможность импортировать файлы SCSS/Sass. Обычно мы используем это правило, чтобы импортировать Sass файлы в основной файл. Импорт файла дает доступ ко всем миксинам и переменным в этом файле.

Sass по умолчанию ищет другие файлы в текущей директории, а потом в директории Sass под Rails. Вы также можете задать дополнительные папки, в которых будут искаться файлы. Например, если вы используете Compass, вы можете задать настройку sass_dir в config.rb.

Директива @import ищет файлы Sass, но будет скомпилирована в CSS директиву @include при следующих условиях:

  • Расширение файла .css
  • Имя файла начинается с http://
  • Имя файла — это url()
  • @import содержит медиа запросы

Если расширение файлы .scss или .sass, файл будет импортирован. Если расширение не указано, Sass попытается найти файл с таким именем и соответствующим расширением. Например:

Оба эти выражения валидны, будет импортирован файл sample.scss. Второй @import также подключит файл sample.sass, если он существует.

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

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

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

Это правильный способ, потому что переменные будут импортированы раньше.

Импорт фрагментов

Когда мы импортируем SCSS/Sass файл, он компилируется в отдельный CSS файл с тем же именем. Обычно мы все же хотим собрать все SCSS/Sass файлы в один CSS. Чтобы каждый файл не компилировался в отдельный CSS, файлы можно импортировать как фрагменты, для этого достаточно добавить символ подчеркивания перед именем файла. Подчеркивание говорит Sass, что данный файл не нужно компилировать в отдельный CSS, нужно вставить в текущий файл его содержимое вместо выражения @import.

Когда мы импортируем фрагмент, символ подчеркивания указывать не нужно. Давайте переименуем файл myVariables в _myVariables. Подключается он так же, как и раньше.

Разница в том, что файл myVariables.css не будет создан, содержимое импортируется в основной CSS файл. Важно помнить, что не должно быть фрагмента и отдельного файла в одной и той же директории. Файлы _myVariables.scss и _myVariables.scss должны лежать в разных папках.

Вложенные импорты

Чаще всего директива @import располагается в верхней части файла, но ее можно включить непосредственно в правила. Импортированные стили будут подключены там, где они импортируются. Например, у нас есть файл test со следующим правилом:

Мы можем импортировать этот файл в основной.

Директивы, такие как @mixin, допустимы только на базовом уровне, их не должно быть файлах, которые импортируются в правила. Также нельзя вызвать @import внутри миксина или управляющей директивы.

@media

Директива @media похожа на директиву @media из CSS, с той лишь разницей, что она может находиться внутри правил. Если директива @media находится внутри правила, при компиляции она всплывает на верхний уровень.

Будет скомпилировано в:

Мы получили отдельное правило для нашего медиа-запроса, хотя в Sass оно было вложено внутри .container. Также мы можем вкладывать директивы @media друг в друга. Эти запросы будут объединены по И.

При компиляции получилось два медиа-запроса. Наконец, мы можем использовать переменные, функции и операторы в медиа-запросах.

В примере выше мы использовали переменную $format и различные переменные для разных типов устройств во вложенных запросах. Получим:

@extend

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

Это прекрасно работает, но для выделенного текста нужно использовать оба класса:

Мы используем Sass, чтобы уменьшить количество кода. Директива @extend позволяет одному классу унаследовать все стили другого.

Пример выше будет скомпилирован в:

Как вы можете видеть, класс .emphasis включает в себя все стили класса .master, а также имеет свои для выделения текста. Теперь для выделенного текста можно использовать только класс .emphasis.

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

Используйте @extend с осторожностью, так как он может запутывать стили. Хьюго написал пост о том, почему он избегает использования @extend и более подробный пост на ту же тему.

@at-root

Директива @at-root создает правила в корне документа вместо родительского элемента, в котором они указаны.

Будет скомпилировано в:

Директива @at-root работает как блок селектора. Как видите, правила внутри @at-root скомпилировались в корне документа, а другие селекторы вложены в .top.

Директива @at-root также позволяет вынести селекторы из другой директивы с помощью (without: . ) или (with: . ). Например:

Директива @at-root использовалась с without, поэтому стили скомпилировались без медиа-запроса.

@debug

Директива @debug позволяет вывести значение в стандартный поток вывода. Например:

Когда с сохраню файл, в поток вывода команды watch выведется:

Директива @warn печатает значение выражение в стандартный поток вывода.

Этот код выведет значение выражение и номер строки предупреждения.

@error

Директива @error также позволяет вывести значение выражение в стандартный поток вывода.

Этот код выведет значение выражение и номер строки предупреждения.

Заключение

Мы рассмотрели ряд @-правил и директив, о которых вы могли не знать. Возможно, вы не часто сможете их использовать, но всегда полезно знать, какие инструменты есть в нашем распоряжении.

Нашли опечатку? Orphus: Ctrl+Enter

© getinstance.info Все права защищены. 2014–2020

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

Препроцессор SASS. Изучаем SASS для быстрой верстки. CSS компилятор для быстрой верстки шаблонов и макетов сайта.

Что такое SASS и SCSS? Обзор препроцессора SASS. Разница между SASS и SCSS

Привет, посетитель сайта ZametkiNaPolyah.ru! Продолжим рубрику Верстка сайтов, в которой этой записью я открою новый раздел Препроцессор SASS и SCSS. Хочу обратить твое внимание, что на моем блоге есть раздел Препроцессор LESS, вести этих две ветки я буду параллельно, чтобы ты мог в итоге выбрать, какой из CSS препроцессоров тебе больше по душе и чем ты будешь пользоваться для создания своего сайта. Замечу, что эти CSS препроцессоры похожи друг на друга и изучив один, ты с легкостью освоишь другой, но отличаются они синтаксисом и некоторыми особенностями реализации, а так же у них немного разные возможности.

Что такое SASS и SCSS? Обзор препроцессора SASS. Разница между SASS и SCSS

А теперь давай я напишу о том, что ты узнаешь из этой публикации: 1) ты узнаешь о том, что такое CSS препроцессор SASS и SCSS; 2) поймешь в чем разница между SASS и SCSS; 2) прочитаешь о том, как SASS и SCSS расширяют возможности CSS и как они помогут тебе ускорить процесс верстки макета; 3) получишь полную, но краткую информацию о возможностях рассматриваемого CSS препроцессора; 4) узнаешь о плюсах и минусах использования SASS и SCSS на своём сайте и в своих проектах.

Что такое препроцессор SASS и чем отличается SASS от SCSS?

SASS – это препроцессор CSS, основной задачей которого является расширение возможностей написания CSS кода, препроцессор SASS в разы ускоряет написание кода CSS и в разы облегчает его обслуживание. SASS представляет собой язык, похожий на язык программирования, который облегчает и ускоряет разработку CSS. SASS является компилируемым язык и в чистом виде браузер его не обрабатывает. Когда говорят о препроцессоре SASS, часто упоминают SCSS.

Давайте сразу определимся, чем отличается SASS от SCSS и в чем между ними разница. На самом деле разница между SASS и SCSS только в синтаксисе: разные правила написания кода, но функционал SASS и SCSS полностью одинаков.

Раз CSS препроцессор SASS – это компилируемый язык, то у этого языка должен быть компилятор, который бы преобразовывал код, написанный на SASS или SCSS в чистый CSS код, компилятор SASS и SCSS написан на языке Ruby, поэтому всем владельцам платформ Windows прежде чем использовать SASS или SCSS рекомендуется установить Ruby.

Обратите внимание: SASS и SCSS генерируют чистый, кросс-браузерный и валидный код, но, чтобы CSS код был чистым: 1) вы должны знать CSS; 2) вы должны знать принцип работы SASS или SCSS, в противном случае на компилятор нечего пенять.

В препроцессоре SASS и SCSS реализовано очень много фишек, которые в разы ускорят разработку кода CSS. В процессе изучения SASS мы будем параллельно изучать и SCSS: все что я буду писать для SASS, будет работать так же и на SCSS, примеры будут как для SASS, так и для SCSS.

Функционал SASS, расширяем возможности CSS с SASS и SCSS

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

  1. Препроцессор SASS и SCSS поддерживает вложенные правила, которые делают CSS код намного более читабельным, логичным и естественным, язык HTML поддерживает строгую иерархию, в CSS такой иерархии нет. А вот в SASS и SCSS можно сделать написание правил иерархичным, так же вложенные правила SASS позволяют избежать повторов в коде.
  2. Препроцессор SASS и SCSS позволяют указывать родительские селекторы. В HTML элементы страницы могут быть вложены друг в друга и внешний элемент – родительский, вложенный элемент – дочерний. В SASS и SCSS это можно отразить.
  3. Препроцессор SASS и SCSS поддерживает вложенные свойства. В CSS много свойств, начинающихся с font, в SASS и SCSS вы можете откинуть слово font и писать: size, weight и другие.
  4. Препроцессор SASS и SCSS поддерживает шаблонные селекторы, благодаря которым все стили, заданные одному селектору, можно задать другому, просто написав одну строчку кода.
  5. В SASS и SCSS есть комментарии, но они есть и в CSS.
  6. SASS и SCSS используют язык SassScript, у которого есть интерактивная оболочка.
  7. Препроцессор SASS и SCSS поддерживает работу с переменными, чтобы можно было изменять повторяющиеся значения в одном месте, а не пролистывать весь CSS файл.
  8. SASS и SCSS могут работать с различными типами данных: строки, списки, ассоциативные массивы и даже цвет – это тип данных в SASS.
  9. SASS и SCSS дают возможность производить операции, которых нет в CSS: можно производить математические операции, операции с цветами, операции с логическими значениями и операции со списками.
  10. В SASS и SCSS можно задать порядок действия при операциях круглыми скобками.
  11. Препроцессор SASS и SCSS имеет набор встроенных функций, которым можно передавать параметры.
  12. Переменные в SASS и SCSS можно использовать при именовании селекторов и при именовании CSS свойств.
  13. Переменные в SASS и SCSS могут иметь значения по умолчанию, что очень часто позволяет избегать ошибок при написании кода.
  14. SASS и SCSS поддерживают все CSS директивы.
  15. В SASS и SCSS есть логические конструкции, которые называются логические директивы: if, for, each, while.
  16. Препроцессор SASS и SCSS поддерживает миксины. Миксины в SASS и SCSS позволяют повторно использовать стили.
  17. Препроцессор SASS и SCSS поддерживает пользовательские функции, которые вы можете самостоятельно написать, а потом использовать сколько вам угодно.
  18. На выходе компилятора/интерпретатора SASS/SCSS можно получать CSS файлы, которые оформлены по-разному (разница в пробельных символах).
  19. Препроцессор SASS кэширует свои файлы, то есть он сохраняет в виде CSS самые часто используемые куски кода и не компилирует их повторно.
Илон Маск рекомендует:  Int86, int86x программное прерывание

Я сделал лишь краткий, но полный обзор возможностей препроцессора SASS и SCSS. Надеюсь, что он вам помог решить: стоит или нет тратить время на изучение данного CSS препроцессора, но в одном вы можете быть уверены точно: CSS разработка с SASS в разы быстрее, но только в том случае, когда вы уже знаете CSS и изучите SASS. На первых парах использование SASS может внести некоторые затруднения, которые в дальнейшем окупятся.

Недостатки и преимущества SASS и SCSS

Давайте рассмотрим недостатки и преимущества препроцессора SASS и SCSS. Начнем мы, конечно же, с преимуществ препроцессора SASS и SCSS:

  1. SASS и SCSS позволяют разрабатывать чистый CSS код и при этом использовать некоторые конструкции из программирования.
  2. Препроцессор SASS и SCSS позволяет в разы ускорить написание CSS кода.
  3. SASS и SCSS поддерживают все языковые конструкции CSS всех версий.
  4. Вы можете использовать SASS и SCSS с любым известным CSS фреймворком.
  5. SASS и SCSS используют вложения и разные полезные функции.
  6. У SASS и SCSS очень много преимуществ, но ощутите вы их только тогда, когда в полной мере изучите данный препроцессор.

Препроцессор SASS и SCSS имеет и недостатки, давайте на них посмотрим:

  1. Если вы плохо знаете CSS, то SASS и SCSS вам ничем не помогут, хотя можно совместить полезное с полезным.
  2. На изучение всех функций SASS и SCSS потребуется довольно большое количество времени.
  3. Если к файлу с расширением .sass или .scss подключится несколько разработчиков и начнут править его одновременно, то у компилятора/интерпретатора могут возникнуть проблемы.
  4. А еще инспектор HTML элементов, встроенный в браузер, не всегда сможет вам помочь, если вы используете SASS или SCSS.

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

SASS — основы

Файлы SASS (Sassy CSS) имеют расширение .scss.

Установка и управление

Можно обзавестись специальным приложением типа CodeKit, Compass, Koala или Prepros, которое будет обрабатывать файлы sass, или установить ruby и работать через командную строку.

Установщик ruby для windows.
Установка SASS: gem install sass
Запуск компиляции: sass input.scss output.css

Переменные

Переменные объявляются с помощью символа $ и могут хранить любую информацию для многократного использования.

$font:normal 24px/1.5 ‘Open Sans’, sans-serif;
$color-red:#F44336;

Использовать их очень просто:

Переменные можно также вставлять в названия селекторов и имена свойств, используя синтаксис интерполяции.

Препроцессор SASS: пишем стили просто и быстро

Всем привет! Как быстро летит время. Я даже не заметил, как я перешел от написания стилей с обычного Css на препроцессор Sass. А ведь раньше не понимал — что за Sass, для чего он нужен, это наверно для супер продвинутых профи в верстке. Да, использование препроцессоров это шаг на новый уровень в веб-разработке, но здесь ничего страшного и сложного нет и вы убедитесь в этом сами, дочитав данную статью до конца.

И так, чем хорош препроцессор и конкретно Sass? Я сразу скажу, что есть и другие, такие, как Less, Stylus и др. Все они работают по одному принципу, но у каждого свои особенности. Sass получил большую популярность у профессионалов в следствие чего изучение значительно упрощается. Просто чем популярнее технология, тем больше сообщество и тем более развернута документация.

Препроцессоры созданы для того, чтобы избавить разработчика от большинства рутинных задач при написании кода, тем самым повысив скорость и качество работы. Помимо CSS-препроцессоров существуют также и HTML-препроцессоры, например, Pug (Jade).

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

Разработчиком Sass является француз Hugo Giraudel, проживающий в Германии с определенного времени. Естественно документация на английском языке, но я лично в ней неплохо ориентируюсь (важно знать технический английский). Но также есть перевод и на русский. Я бы советовал все же английскую версию, это для того, чтобы привыкать и изучать все глубже английский. Но русская тоже ничем не хуже.

Компиляция Sass в Css

В качестве программного обеспечения для компиляции Sass в Css я использую плагин Sass для таск-менеджера Gulp. Вообще Sass является приложением (Gem) языка Ruby. Поэтому, если вы хотите обойтись без Gulp, то для компиляции в Css вам необходимо будет установить платформу языка программирования Ruby. Я не буду сейчас показывать как это делается, можете почитать об этом на официальном сайте.

Синтаксис — Sass, Scss

Сразу отмечу, что существует 2 синтаксиса написания кода: Sass и Scss.

Синтаксис Sass незначительно отличается от Scss. Scss похож больше на обычный код Css, а в Sass опущены фигурные скобки и точка с запятой между правилами. Также существует различие в написании некоторых функций и надо быть внимательным в том, какой синтаксис вы выбираете. Расширения файлов для Sass — *.sass, а для Scss — *.scss. Синтаксис Sass он более старый, а Scss появился позже, чтобы упростить изучение для новичков. Я сам начинал изучение данного препроцессора именно на Scss, так было проще его понять. Сейчас же я перешел на Sass, для меня он более удобен.

Если говорить о Sass, то его структура кода строится на основе отступов (ведь фигурных скобок в нем нет) и здесь следует быть внимательным, так как в качестве отступа может выступать, как табулятор (TAB — 4 пробела), так и обычные пробелы (обычно это двойной пробел). Я всегда использую табулятор.

Помните! Если вы используете табулятор в качестве отступа, то пробелы следует исключить, чтобы везде было одинаково. И наоборот — если используете пробелы, то табулятор следует исключить. Иначе, компилятор выдаст ошибку.

В большинстве редакторов кода (например, Sublime Text) есть разметка отступов в виде полос, что не дает нам запутаться. В примерах ниже я буду использовать синтаксис Sass.

Упрощаем жизнь с помощью Sass

Вложенность правил

Вот чем мне приглянулся Sass с самого начала, так это как раз вложенностью css-правил одних в другие. Это здорово экономит время, а код получается структурируемым и легкочитаемым. Например, если мы хотим написать стили элементам определенного родительского контейнера, то нам в Css необходимо каждый раз указывать родительский класс, например вот так:

То есть мы везде указываем родительский класс .main , а это в свою очередь не совсем удобно. Используя Sass, можно записать следующим образом:

Согласитесь так смотрится намного аккуратнее, да и писать код можно быстрее, ведь родительский класс .main мы пишем всего один раз. Если вы хотите повторить за мной, не устанавливая Ruby и всякое подобное ПО можно воспользоваться онлайн-компилятором для демонстрации.

Вложенные свойства

Помимо вложенности правил в Sass существует возможность вложенности свойств. Например, вот как можно записать значения margin :

Привязка к селектору или конкатенация — знак &

Написание нашего кода можно ускорить и сделать его еще компактнее, применив конкатенацию (соединение) посредством символа — &. Как это работает? Например, у нас есть такие классы, как: .main-title , .main-subtitle , .main-description . В Sass данные классы можно записать следующим образом:

Sass

Css

С помощью символа & мы соединяемся к корневому классу, то есть в данном случае нет необходимости постоянно повторять корень .main . В тоже время следует иметь ввиду, что мы не создали дочерние элементы.

Sass

Css

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

Sass

Css

Переместив & после селектора, мы поменяли порядок стыковки, т. е. класс .container в данном случае является родительским.

Привязка к родительскому селектору, но на уровнь выше

Выше для примера я демонстрировал Sass код:

Sass

Теперь представьте, что в блоке .main-title существует еще один элемент которому нужно явно указать стили, используя всю цепочку родителей. Я долго время просто указывал корневое название (в данном случае — .main ), но это не очень удобно. Я стал ковырять документацию Sass и нашел решение. На самом деле все просто — нам необходимо объявить ссылку на родителя и использовать ее, там, где нужно.

Вот так я делал раньше:

А теперь можно сделать так:

Если заметили мы объявили ссылку на родителя — $self: & . Мне это чем-то напоминает ссылку на объект (this), который вызвал событие в javaScript. Теперь в нужно месте мы можем просто его вызвать # <$self>. Вот оказывается как все просто, а я голову ломал и думал, что нет решения этой проблемы в Sass.

Css

Шаблоны-заготовки

Зачастую бывает такое, что несколько элементов имеют одну базу стилей, но отличаются между собой лишь несколькими правилами. Возьмем к примеру кнопки. Если брать один размер кнопок, то они могут отличаться между собой только цветом: красные, зеленые, серые и т.д. Если использовать чистый Css, то придется в базовых стилях через запятую указывать все цвета кнопок или создать базовый класс. Но в Sass это делается намного проще:

Sass

Css

Шаблоном выступает в данном случает селектор %button (об этом говорит знак — %). Это удобно тем, что сам селектор шаблона нигде не участвует, а его стили наследуются другими селекторами посредством директивы — @extend. Данный шаблон можно использовать сколько угодно раз, сокращая тем самым количество кода.


SassScript

В Sass, как и в языках программирования имеют место быть такие возможности, как: создание переменных, арифметические операции (сложение, вычитание, деление, умножение и т.д.), итерации (циклы), функции (миксины) и многое другое. То есть Sass это своего рода некий язык программирования, который призван опять таки упростить написание кода и ускорить работу в разы.

Переменные

Переменная в Sass начинается со знака $, а имя пишется латиницей, например: $color . Следует отметить, что знаки: «» и «_» взаимозаменяемы. К примеру, если назвали $color-red , то можно вызвать и $color_red . Определяется переменная следующим образом: $название: значение, например: $color: #f6f6f6 .

Переменная объявленная вне каких либо уровней вложенности, доступна глобально, т.е. можно использовать везде. Если же вы определили переменную в каком либо уровне вложенности селектора, то она будет доступна только на данном уровне. Чтобы она работала глобально во всем документе необходимо указать ключевое слово !global.

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

Директивы

@extend

Данную директиву мы затронули выше, когда изучали шаблон-заготовку. Закрепим еще раз знания. С помощью @extend мы можем скопировать правила любого селектора. Например, при верстке может быть так, что элемент «А» и элемент «Б» могут быть схожи по внешнему виду. В данном случае можно написать правила элементу «А», а для «Б» просто скопировать стили элемента «А», слегка переопределив нужные свойства.

Sass

Css

В данном примере мы сверстали 2 одинаковых квадрата. У квадрата «Б» мы переопределили только отступ padding: 15px . Вот так работает @extend. Я довольно часто пользуюсь данной директивой.

@import

Данная директива позволяет объединять несколько файлов стилей в один. Это очень удобно, тем более, если проект большой. Не стоит путать с директивой, которая существует в Css — @import. В Css обязательным атрибутом является — url().

На самом деле удобнее писать стили в разных файлах и предназначение у каждого свое. Например, весь каркас страницы можно разделить на регионы: header.sass, sidebar.sass, footer.sass. Собрать все можно в главном файле main.sass, как раз используя @import. Файлы регионов можно указать также через нижнее подчеркивание в начале имени файла, например так: _header.sass, _sidebar.sass, _footer.sass. Такие файлы называются фрагментами. При импорте фрагментов не обязательно указывать расширение файла.

Илон Маск рекомендует:  Close закрыть файл

Файлы фрагментов могут быть с расширениями: *.sass, *.scss или *.css. Например, главный файл может быть с расширением *.sass, а шапка сайта, к примеру с расширением *.scss. То есть не важно какое у вас расширение главного файла. Следует отметить, что при импорте переносятся все переменные и миксины (о них поговорим ниже) в главный файл, в который происходит импорт.

Также, можно указать импорт нескольких файлов через запятую: @import «header», «sidebar», «footer».

Имейте ввиду, что импорт происходит в том месте, где вы указали директиву @import. Обычно это делают в начале документа.

@at-root

Директива @at-root говорит сама за себя и если переводить на русский, то будет звучать так — «от корня». Иными словами мы переносим селектор в корень, отменяя цепочку родительских селекторов. Тут конечно можно задать вопрос — «А зачем нужна эта директива, если можно перенести селектор в корень в ручную?». Ответ прост — удобство написания кода, не нарушая структуру. Когда вы научитесь работать с Sass в полной мере вы это поймете.

Управляющие директивы и выражения

Директива @if

Данная директива выполняет стили, если выражение, заключенное в ней возвращает любое значение кроме false и null.

Sass

Css

Те, кто знаком хотя бы с основами языка программирования (например, javaScript или Php) разобраться будет не сложно. Здесь суть та же самая, главное знать синтаксис написания кода.

Директива @for

В языке программирования (опять же в Javascript или Php) с помощью For можно задать цикл. В Sass данная директива выполняет тоже самое — создает цикл. Для каждой итерации (повторения) используется переменная-счетчик, которая изменяет данные вывода.

Директива имеет 2 формы написания: 1. @for $var from through и 2. @for $var from to . Если вы хотите, чтобы последняя цифра была включена в цикл, то используйте «through«. Давайте рассмотрим пример:

Sass

Css

Для указания конечного значения я использовал ключевое слово «to«. При таком раскладе цикл заканчивается на цифре — 5. Обратите внимание насколько компактным выглядит код Sass.

Директива @each

Директива @each также, как и @for выводит значения в цикле и удобен тем, что помимо цифр можно перебирать конкретные значения. Давайте возьмем вышеприведенный цикл и изменим его на какие либо значения.

Sass

Css

В данном случае не создается переменная-счетчик, а количество итераций зависит от количества созданных значений после ключевого слова «in«. Значения выводятся через переменную (в данном примере — $bgItem), название которой может быть произвольным.

Миксины (функции)

Миксины (примеси) — это своего рода функция, как в языке программирования, которая призвана избавить от повторяющегося кода. Миксины могут содержать целые фрагменты стилей, разрешенные в Sass. Давайте рассмотрим пример, для большей наглядности.

Создается миксин директивой @mixin , далее через пробел следует имя миксина, а также опционально передаваемые параметры. Сразу отмечу, что знаки дефиса (-) и нижнего подчеркивания (_) в имени миксина взаимозаменяемы. Миксин может содержать в себе не только правила, но и селекторы. Выше я привел пример элементарного миксина без параметров.

Вызывается миксин директивой @include и далее через пробел указываем имя созданного миксина. В примере выше — это центрирование блока по оси X и по оси Y с помощью абсолютного позиционирования. Если такое приходится применять часто, то согласитесь легче вызвать просто миксин, нежели писать стили центровки снова и снова.

Теперь давайте рассмотрим миксин с параметрами (аргументами).

Sass

Css

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

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

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

До встречи в других моих постах…

Заур Магомедов

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2009 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

SASS / SCSS

Препроцессор SASS / Урок #1 — Что такое SASS, SCSS. Установка

Видеоурок

Полезные ссылки:

Что такое SASS?

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

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

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

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

В чем отличия SASS и SCSS?

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

На официальном сайте SASS приведен пример с использованием обеих препроцессоров.

Ниже приведён пример кода на SASS:

Ниже пример кода на SСSS:

Как видите, оба препроцессора отличаются лишь синтаксисом. В SASS все вложенные свойства выделяются отступами, при чем очень важно соблюдать отступы и их количество. SCSS более приближен к обычному CSS и все вложенные стили записываются через фигурные скобки — <> .

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

Большое задание по курсу

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

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 предустановлен на Mac, так что вы можете сразу установить Sass Macintosh;
  • Если вы работаете на Windows, то вам необходимо сначала скачать Ruby;
  • Ruby на Linux можно скачать через систему управления пакетами (apt package manager), rbenv или rvm.

После установки Ruby на вашу машину можно установить SASS. Давайте откроем командную строку Ruby и установим SASS на вашу систему:

Если команда выше не сработает, то вам, возможно, придется использовать sudo команду:

Если вы хотите проверить версию SASS используйте следующую команду:

SASS установлен. Давайте создадим папку проекта и назовем ее sass-basic. Создайте базовый html файл со следующим кодом:

В этом html документе есть ссылка на style.css, так что теперь нужно создать файл style.scss (не .css) в папке. Давайте создадим файл style.scss со следующим кодом:

Теперь нужно компилировать этот файл используя командную строку/терминал. Давайте откроем командную строку в той же директории (возможно, придется использовать командную строку Ruby, если обычная командная строка не работает). Вбейте следующее и нажмите Enter:

Вы заметите, что сгенерировались новые файлы: style.css и style.css.map. Стоит отметить, что не нужно трогать map файл, также как и .css файл. Если вы хотите внести какие-то изменения, то это можно сделать через style.scss. Вам не понадобится повторять этот процесс при каждом изменении стилей. Компиляция SASS будет работать автоматически при внесении изменений в .scss файл.

В следующей главе мы рассмотрим SASS переменные, и почему они являются самой полезной функций SASS (и в любом другом CSS препроцессоре).

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-файлу. Пример такого файла указан ниже:

Полный гайд по SCSS/SASS

Далее я убуду использовать названия Sassy, Sass и SCSS, поэтому давайте определимся, так как концептуально разница не велика, будем считать, что это одно и тоже. Вы поймёте различия по мере изучения темы. Отмечу, что SCSS сейчас наиболее популярна, вероятно потому, что является наиболее поздней версией оригинального Sass синтаксиса (некоторые считают её лучшей).

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

Весь Sass/SCSS код компилируется обратно в стандартный CSS, поэтому браузер понимает его и корректно выводит результат. Текущие версии браузеров не поддерживают Sass/SCSS непосредственно (как и другие препроцессоры), а стандартная спецификация CSS не предлагает нам альтернатив (пока).

Приступим!

Пока вы хотя бы раз не попробуете сгенерировать значения для свойств с помощью цикла, вы не познаете настоящую мощь Sassy CSS. Но мы начнём с основ SCSS и постепенно доберёмся до самого интересного.

Что такого есть в Sass/SCSS, чего нет в стандартном CSS?

  1. Вложенные правила: вы можете вкладывать CSS свойства, в несколько наборов скобок <>. Это сделает ваш CSS чище и понятней.
  2. Переменные: в стандартном CSS тоже есть переменные, но переменные Sass куда более мощный инструмент. Например, вы можете использовать переменные в циклах и генерировать значения свойств динамически. Также можно внедрять переменные в имена свойств, например так: property-name-N < … >.
  3. Лучшая реализация операторов: вы можете суммировать, вычитать, делить и умножать CSS значения. Sass реализация более интуитивна, чем стандартный функционал CSS calc().
  4. Функции: Sass позволяет многократно использовать CSS стили, как функции.
  5. Тригонометрия: помимо базовых операций (+, -, *, /), SCSS позволяет писать собственные функции. Например, функции sin и cos можно написать, используя только синтаксис Sass/SCSS. Конечно, вам понадобятся знания тригонометрии. Такие функция могут понадобится для создания анимации.
  6. Удобный рабочий процесс: вы можете писать CSS, используя конструкции, знакомые по другим языкам: for-циклы, while-циклы, if-else. Но имейте в виду, это только препроцессор, а не полноценный язык, Sass контролирует генерацию свойств и значений, а на выходе вы получаете стандартный CSS.
  7. Миксины: позволяют один раз создать набор правил, чтобы потом использовать их многократно или смешивать с другими правилами. Например, миксины используют для создания отдельных тем макета.
Илон Маск рекомендует:  Что такое код ircg_nick

Препроцессор Sass

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

Новый синтаксис

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

Несколько фактов для начала

CSS препроцессоры добавляют новый синтаксис в CSS.

Существует 5 CSS препроцессоров: Sass, SCSS, Less, Stylus и PostCSS.

Здесь я буду говорить в основном о SCSS, который схож с Sass. О Sass можно почитать здесь: https://www.sass-lang.com/ .

  • SASS (.sass) Syntactically Awesome Style Sheets.
  • SCSS (.scss)Sassy Cascading Style Sheets.

Обратите внимание на расширения, они схожи, но отличаются. Для любителей командной строки, есть возможность конвертировать .sass в .scss и наоборот:

Конвертация форматов .scss и .sass. Используем команду sass-convert.

Sass — это первая спецификация Sassy CSS, её разработка началась в 2006 году. Позже разработали альтернативный синтаксис, который некоторые считают лучшей версией языка, а также изменилось первоначальное расширение .sass на новое .scss.

На данный момент ни один браузер не поддерживает CSS препроцессоры напрямую. Вы можете свободно экспериментировать с любым из 5 препроцессоров на сервисе codepen.io. Кроме того, используя препроцессор, вы должны будете установить его к себе на веб-сервер.

Эта статья о SCSS, но другие препроцессоры имеют схожие функции, хотя синтаксис может отличаться.


Superset

Sassy CSS в любом своём проявлении является «расширением» языка CSS, а значит, всё что работает в CSS, работает и в Sass/SCSS.

Переменные

В Sass/SCSS есть переменные, и они отличаются от тех, которые вы вероятно видели в CSS — они начинаются с двух тире ( —color: #9c27b0 ). В SCSS переменная обозначается знаком доллара ( $color: #9c27b0 ).

Вы можете перезаписать имя переменной или задать для неё значение по умолчанию. Для этого добавьте метку !default к переменной, и если её значение не изменится в дальнейшем и не будет пустым, то будет использоваться заданное значение по умолчанию.

В примере выше окончательным значением переменной $text будет “Piece of string.”, а не “Another string.”, потому что переменная не пуста.

Sass переменные можно назначить любому свойству CSS

Вложенные правила

В стандартном CSS, вложенность достигается путём расстановки пробелов.

Вложенность в стандартном CSS

С помощью Sassy CSS этот код можно записать так:

Вложенность в Sass. Меньше повторений

Конечно, в итоге это всё скомпилируется в обычный CSS. Это просто синтаксис, но как видите, он выглядит чище и с меньшими повторениями.

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

Тем временем под капотом, препроцессор компилирует всё в стандартный код CSS (как в первом примере), чтобы браузер смог его отобразить. Мы лишь изменили способ написания CSS.

Оператор &

В Sassy CSS можно использовать оператор & (И), давайте посмотрим, как это работает.

В 5 строке мы видим &:hover, после компиляции, вместо символа &, подставляется имя родительского элемента, т.е. a:hover. В результате у нас получится такой код:

Результат компиляции SCSS

Миксины

Для объявления миксина используйте директиву @mixin (ещё это называют mixin rule).

Давайте создадим миксин, который определяет поведение элемента как Flex:

Теперь любой HTML элемент с классом .centered-elements будет иметь свойства Flexbox. Вы можете использовать миксины совместно с другими CSS свойствами.

Для класса .centered-elements я добавил миксин и правило border:1px solid gray;

Вы можете передавать аргументы в @mixin, как если бы это была функция, а затем присваивать их свойствам CSS. Рассмотрим это в следующей части.

Кросс-браузерность. Пример

Некоторые экспериментальные фичи работают только в определённых браузерах.

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

Например, если вам нужно вращать элемент в браузере на движке Webkit, так же, как и в других браузерах, вы можете создать миксин, который принимает переменную $degree в качестве аргумента:

Реализуем кросс-браузерность с помощью миксин

Теперь нужно подключить (@include) этот миксин в CSS класс:

Правило Rotate совместимое со всеми браузерами

Арифметические операции

Как и в стандартном CSS, вам доступны операции сложения, вычитания, умножения и деления, но в отличии от классического CSS синтаксиса, вам необязательно использовать функцию calc().

Есть несколько неочевидных особенностей, которые следует учитывать, чтобы избегать ошибок.

Сложение

Убедитесь, что оба значения соответствуют одному формату.

Вычитание

Этот оператор работает так же, как и предыдущий.

Умножение

Для умножения используется звёздочка, как и в стандартном CSS calc(a * b).

умножение и деление

Деление

Так как в стандартном CSS символ деления зарезервирован для других целей, есть некоторые особенности его использования. Например, font: 24/32px определяет размер шрифта 25px и line-height 32px. Т.е. символ деления используется для сокращённой записи свойств шрифта. Посмотрим, как работает SCSS, сохраняя совместимость со стандартным CSS.

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

Остаток

Вы можете вычислить остаток от операции деления. Давайте попробуем создать «зебру» для набора HTML элементов.

Начнём с создания миксин.

Примечание: далее мы ещё поговорим о правилах @for и @if

Нам понадобится несколько HTML элементов:

Вывод в браузере:

Операторы сравнения

  • x==y возвращает true, если x и y равны
  • x!=y возвращает true, если x и y не равны
  • x>y возвращает true, если x больше, чем y
  • x =y возвращает true, если x больше или равно y
  • x Операторы в действии

После компиляции, мы получим такой CSS:

Логические операторы

  • x and y возвращает true, если x и y равны true
  • x or y возвращает true, если x или y равны true
  • not x возвращает true, если x не равен true

Применение логических операторов

Этот код создаёт класс button-color, который изменяет background-color в зависимости от ширины кнопки.

Строки

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

Комбинируем CSS значения свойства со строкой Sass/SCSS

А следующий пример приводит к ошибке:

Этот код не сработает

Можно складывать строки без двойных кавычек, если они не содержат пробелов. Пример ниже не будет скомпилирован:

Этот пример тоже не сработает Строка, содержащая пробелы, должна быть в кавычках Складываем несколько строк Складываем строки и числа

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

Операторы управления потоками

В SCSS есть функции (fucntion()) и директивы (@directive), их ещё называю «правилами». Мы уже создавали функцию, когда проходили миксины. Вы можете передавать аргументы функциям.

У функции обычно есть скобки, которые ставятся сразу после её имени. Директива/правило начинается с символа @.

Как и в JavaScript или других языках, в SCSS есть стандартный набор операторов управления потоками.

if()

if() — это функция. Применяется она очень просто: оператор вернёт одно из двух значений, в зависимости от условия:

@if — это директива, её используют для создания ветвлений на основе условия.

Скомпилированный Sassy код:

Пример использования одиночного if оператора и комбинации if-else

Проверяем существует ли родительский элемент

Символом & выбираем родительский элемент, если он существует, в противном случае возвращаем null. Можно использовать совместно с директивой @if.

Далее мы создадим CSS стиль с условием, где результат будет зависеть от наличия родительского элемента.

Если родительский элемент не существует, оператор & выдаёт null и в результате применяется альтернативный стиль.

@for

Директиву @for используют для повторения CSS определений несколько раз подряд.

Стили Sass — преимущества и недостатки

Дата публикации: 2020-09-18

От автора: Sass – это препроцессор CSS, с помощью которого можно снизить количество повторяющегося CSS кода и сэкономить время. Это более стабильное расширение CSS, четко и структурно описывающее стили документа.

История

Стили Sass были спроектированы Hampton Catlin и разработаны Natalie Weizenbaum в 2006. Позже Weizenbaum и Chris Eppstein использовали первую версию и расширили Sass до SassScript.

Зачем использовать Sass?

Это язык препроцессинга с внутренним синтаксисом (своим собственным) CSS.

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

Это расширение CSS, т.е. он содержит все возможности CSS и является open source проектом на Ruby.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

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

Возможности Sass

Он стабильнее, мощнее и совместим с версиями CSS.

Это расширение CSS, основанное на JS.

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

Он использует свой собственный синтаксис и компилируется в читаемый CSS.

Вы с легкостью можете писать меньше CSS и тратить на него меньше времени.

Это open source препроцессор, который интерпретируется в CSS.

Преимущества Sass

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

Он позволяет писать CSS быстро.

Это расширение CSS, с помощью которого дизайнеры и разработчики могут работать намного эффективнее и быстрее.

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

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

Недостатки Sass

Разработчику понадобится некоторое время на изучение возможностей препроцессора.

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

Есть шанс потерять возможность использовать встроенный в браузер инспектор элементов.

Редакция: Команда webformyself.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Препроцессоры Sass и Less

Автоматизация и упрощение Front-end разработки c помощью препроцессоров Sass и Less

SASS / SCSS

Препроцессор SASS / Урок #1 — Что такое SASS, SCSS. Установка

Видеоурок

Полезные ссылки:

Что такое SASS?

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

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

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

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

В чем отличия SASS и SCSS?

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

На официальном сайте SASS приведен пример с использованием обеих препроцессоров.

Ниже приведён пример кода на SASS:

Ниже пример кода на SСSS:

Как видите, оба препроцессора отличаются лишь синтаксисом. В SASS все вложенные свойства выделяются отступами, при чем очень важно соблюдать отступы и их количество. SCSS более приближен к обычному CSS и все вложенные стили записываются через фигурные скобки — <> .

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

Большое задание по курсу

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

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL