Переменные в Sass


Содержание

Основы Sass. Миксины

Для меня Sass был настоящим открытием. Долгое время я мучался написанием чистого, или “vanilla” CSS. В случаях с маленькими сайтами все было прекрасно, но на больших проектах CSS быстро отбивается от рук. Отладка превращается в настоящий ночной кошмар.

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

Что такое миксины?

Миксины позволяют создавать переиспользуемые блоки CSS. Это помогает избежать дублирования кода. Например:

С использованием миксина Sass вы можете создать ссылки так:

Как подключить миксин

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

Как создать миксин

Создать миксин можно с помощью директивы @mixin. Например:

После директивы @mixin должно быть указано название миксина. Можно добавить в миксин аргументы, как, например, мы сделали в миксине выше.

Переменные, определенные где-либо в Sass файле, можно использовать в миксине. Допустим, мы хотим использовать в миксине переменную $font-base.

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

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

Аргументы должны передаваться в миксин в том же порядке, в котором они были объявлены. Если мы попробуем поменять порядок аргументов в примере выше, получим:

Как вы можете видеть, это не работает. В качестве аргументов можно передавать переменные Sass. Например, можно передать переменную $base-color в пример выше:

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

Значения по умолчанию

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

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

Для первого h1 мы передали размер шрифта, и использовали значение по умолчанию для цвета. Во втором примере, значение по умолчанию будет заменено на переданный в директиве @include аргумент. Обратите внимание, что обязательные аргументы должны идти первыми. Также в качестве значения по умолчанию можно использовать переменную.

Имена аргументов

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

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

Переменные аргументы

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

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

Вместе с переменными аргументами можно передавать и обычные. Например, в миксине pad мы хотим задать еще и цвет в миксине:

Обычные аргументы должны идти перед переменными. Переменные аргументы можно использовать и при вызове миксина — передавать значения параметров в виде списка или объекта.

@content

В миксин можно передать блок правил с помощью директивы @content. В скомпилированном коде директива @content будет заменена на этот блок правил.

Теперь при вызове миксина мы можем передать дополнительные стили:

Заключение

Как вы видите, миксины в Sass очень полезны. Их использование может значительно ускорить рабочий процесс. Больше информации о том, как использовать миксины и Sass в целом, можно посмотреть на сайте sass-lang.com.

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

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

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

4 возможности Sass, которые вы не использовали

25 Августа 2015

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

1. CSS и строчные комментарии

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

Sass дает возможность оставлять обычные CSS комментарии, начинающиеся с /* и заканчивающиеся */ . В такие комментарии можно включать несколько строчек текста и останутся в том же виде в итоговом CSS. Поэтому SASS откоментированный следующим образом:

Преобразуется в следующий CSS:

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

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

2. Локальные и глобальные переменные

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

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

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

В сгенерированном CSS переменная $color_success примет новое значение:

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

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

3. Плэйсхолдеры для расширений

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

К счастью, SASS позволяет разработчикам расширять существующие селекторы, применяя весь набор стилей от одного селектора к другому с помощью команды @extend . К примеру, следующий код применяет стили селектора .prominent к еще нескольким селекторам:

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

Этот код генерирует CSS без каких либо упоминаний %prominent или %subtle , но с применением их стилей:

В данном примере мы не использовали селектор %subtle , поэтому он не оказался в скомпилированном коде и наш CSS не увеличился в размере.

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

В скомпилированном коде, переопределение экстенда в классе .notice не отражается:

4. Амперсанд для родительского селектора

Одна из базовых возможностей SASS, о которой узнают разработчики это амперсанд (&). Когда вы используете амперсанд перед селектором внутри набора правил, селектор прикладывается к родительскому, что особо удобно для псевдоклассов :hover или ::after . И код SCSS:

Дает следующий CSS:

Но это не единственное применение амперсанда. Когда вы помешаете амперсанд внутрь набора стилевых правил, стили класса , объявленного после амперсанда будут работать только если элемент с этим классом является потомком элемента, для которого написаны базовые правила. Иногда бывает нужно задать стиль, применяющийся лишь в определенных условиях. Например, мы хотим задать границу элементу .hoverable являющемуся потомком элемента .special :

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

Но с добавлением амперсанда мы делаем то же самое, не покидая пространство селектора .hoverable :

И соответствующий CSS:

Вы видите, что сделала всего одна строчка с амперсандом? Sass заменил амперсанд родительским селектором, задав таким образом стили для .hoverable внутри .special .

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

Sass для самых маленьких — подробное руководство

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

Все примеры и настроенный проект данного урока вы можете скачать с нашего сайта

Sass — это один из наиболее развитых и стабильных CSS препроцессоров, а также один из самых популярных препроцессоров у профессионалов.

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

  • Совместимость с различными версиями CSS, благодаря которой вы можете использовать любые CSS библиотеки в вашем проекте;
  • Огромное количество разнообразных функций на любой случай жизни. Таким богатым функционалом могут похвастаться немногие CSS препроцессоры;
  • Sass — это один из самых старых CSS препроцессоров, вобравший большой опыт за долгие годы своего существования;
  • Замечательная возможность использовать Sass фреймворки, упрощающие жизнь разработчику. Один из таких фреймворков — Bourbon, который мы используем в некоторых выпусках Джедая верстки при написании Sass;
  • Синтаксис. Вы можете выбрать один из двух синтаксисов, который вам ближе — упрощенный (SASS) и развернутый CSS-подобный (SCSS).

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

Настройка окружения

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

Убедитесь, что у вас установлена последняя версия Node.js и Gulp. Если Node.js не установлен, скачайте его и установите. После установки Node.js установите gulp командой «npm i -g gulp» (Windows) или «sudo npm i -g gulp» (Linux, OS X). Почитать: Подробное руководство Gulp.

В папке вашего проекта выполните команду npm init и заполните пошагово информацию о вашем новом проекте. Пример, также, есть на странице руководства Gulp.

Далее установим в проект пакеты gulp и gulp-sass командой:

Далее в папке проекта создадим gulpfile.js следующего содержания:

Обратите внимание на строку 6 — здесь мы используем один из стилей вывода в результирующий файл: nested — вложенный, по умолчанию; expanded — развернутый; compact — компактный, когда селектор и его свойства в фигурных скобках выводятся в одну строку; compressed — сжатый. Кроме того, благодаря обработке .on(‘error’, sass.logError), если возникнет ошибка, нам не придется перезагружать команду выполенния Gulpfile и мы будем видеть, в какой строке Sass файла у нас ошибка. В примерах я буду использовать стиль вывода expanded для наглядности.

У вас должна быть следующая структура проекта в вашей файловой системе:

Илон Маск рекомендует:  ob_end_flush - очищает (отправляет) буфер вывода и отключает буферизацию вывода.

    myproject/

      css/
        common.css

      sass/

        common.sass

      node_modules/gulpfile.jspackage.json

Запускаем выполнение Gulpfile командой gulp в терминале папки проекта.

Здесь мы берем все Sass файлы из директории sass/ вашего проекта и выгружаем готовый CSS результат в папку css/. Кроме того, здесь мы устанавливаем наблюдение watch за изменениями в Sass файлах и автоматическую компиляцию в CSS, если такие изменения имеют место быть. Результирующий css файл подключается в верстку.

Если вам что-то не понятно по настройке Gulp пакетов в данном примере, прочтите руководство Gulp.

После того, как наше окружение настроено и Sass успешно преобразуется в CSS при сохнанении *.sass файлов в директории sass/, можно спокойно продолжать обучение и выполнять примеры, которые мы будем сегодня разбирать, на практике.

Синтаксис Sass

Есть 2 варианта написания Sass, 2 синтаксиса: SASS и SCSS. Самый старый вариант написания Sass — это синтаксис отступов. Именно этот вариант написания мы будем использовать в нашем уроке. Расширение файлов для такого синтаксиса — *.sass. Второй вариант — это синтаксис, расширяющий синтаксис CSS, Sassy CSS. SCSS пишется как обычный CSS, но расширен дополнительными возможностями Sass. Расширение файлов с SCSS синтаксисом — *.scss.

Очень важно! Синтаксис отступов требует очень четкого соблюдения отступов у вложенных свойств и если у вас возникают ошибки при запуске Gulp или неявные ошибки без указания строки в консоли — скорее всего, ошибка именно в неправильных отступах. Еще важная деталь — если у вас в качестве отступов используются табы, компилятор выдаст ошибку при попытке конвертировать Sass, в котором помимо табов, также, исвользуются пробелы в качестве отступов. Либо вы используете только табы, либо только пробелы.

SASS и SCSS синтаксис:

SASS — синтаксис отступов SCSS — синтаксис расширения

Кроме базовых правил написания (фигурные скобки, точка с запятой в конце строк), SASS и SCSS различаются также написанием некоторых функций. Так что будьте внимательны при использовании каких-либо примеров из интернета, проверяйте, какой именно синтаксис используется. Если довольно большой пример из интернета выполнен в SCSS стиле, а ваш проект написан в SASS, вы можете его импортировать в ваш основной файл, не меняя синтаксис и расширение файла посредством директивы @import, например, если вы скачали файл carousel.scss, то можете подключить его в ваш main.sass строкой @import «carousel». Также можно поступить в обратной ситуации, когда необходимо импортировать *.sass файлы в файл main.scss. В нашем примере с Гитхаба, мы импортируем все _x.x.sass файлы в один common.sass, где x.x — это номер заголовка примера из данной статьи.

Мы будем использовать синтаксис отступов.

1. Расширение возможностей CSS с помощью Sass

1.1 Правила вложения

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

Sass CSS — готовый результат
Sass CSS — готовый результат

1.2 Привязка к родительскому селектору

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

Sass CSS — готовый результат
Sass CSS — готовый результат

Обратите внимание на правило body.firefox &, которое позволяет нам получить новую цепочку от любого элемента до текущего, если установить в конце &.

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

Sass CSS — готовый результат

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

Для удобства, вы можете разбивать суффикс пространства имен свойства на вложения. Например, margin-top, margin-bottom, margin-left, margin-right имеют общую основу margin и могут быть разбиты на вложения следующим образом:

Sass CSS — готовый результат

1.4 Селекторы-шаблоны

Иногда возникает ситуация, когда несколько элементов на странице используют одинаковую CSS базу, одинаковый набор свойств, характерный только для них. Данные базовые CSS правила можно оформить в виде селектора-шаблона для использования в нескольких местах Sass. Селекторы-шаблоны выводятся посредством директивы @extend.

Sass CSS — готовый результат

2. SassScript

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

2.1 Переменные в Sass

Это действительно замечательная возможность — определять переменные, которые можно использовать в любом месте вашего Sass файла. Цвета, дефолтные значения, единицы, все это можно взять в переменную и использовать в дальнейшем. Переменная определяется так: $название: значение.

Sass CSS — готовый результат

2.2 Операции с числами и строками + интерполяция

Sass дает возможность использовать стандартные арифметические операции над числами, такие как сложение (+), вычитание (-), деление (/) и остаток от деления по модулю (%). Операторы сравнения ( , =, ==, !=) также поддерживаются для чисел.

Кроме того, в Sass есть возможность конкатенировать (соединять) строки.

Sass CSS — готовый результат

Как видим из примера $summ: 10 + 20 / 2, соблюдается приоритет в выполнении арифметических операций — сначала деление, потом сложение. Для определения порядка действий, можно использовать круглые скобки, как в математике. Обратите внимание, что при сложении 12px + 8px, мы получим 20px.

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

Интерполяция — это получение нового значения, используя другие.

Чаще всего интерполяция в Sass используется для получения нового значения переменной, благодаря «интегрированию» в значение другой переменной, посредством конструкции #<>, например:

Sass CSS — готовый результат


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

2.3 Операции с цветами

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

Sass CSS — готовый результат

Обратите внимание, что при сложении rgba цветов, последний параметр непрозрачности 0.75 не должен отличаться от других в выражении, иначе произойдет ошибка сложения. Вместо этого, можно регулировать альфа-канал rgba, используя opacify и transparentize или управлять непрозрачностью HEX цвета, посредством функции rgba.

Sass CSS — готовый результат

3. Директивы и правила

3.1 @import

Вы можете импортировать в ваш Sass файл sass, scss и css файлы с помощью директивы @import, при этом все миксины и переменные будут работать в основном файле, в который происходит импорт.

@import сработает как обычный CSS @import, если:

  • в пути к файлу присутствует http://;
  • файл вызывается через url();
  • или в импорте присутствуют медиапараметры.

Для того, чтобы другой файл был полноценно импортирован в основной Sass файл, необходимо, чтобы расширение файла было *.sass, *.scss или *.css.

Давайте рассмотрим некоторые примеры.

Следующие файлы импортированы не будут:

Sass CSS — готовый результат

Следующие файлы будут импортированы:

Sass CSS — готовый результат

Внимание! В новых версиях gulp-sass для импорта CSS файлов в Sass необходимо указывать расширение .css

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

Файлы, которые начинаются с нижнего подчеркивания, называются фрагменты и при импорте не требуют указания подчеркивания и расширения. Например, файл _header.sass можно импортировать так: @import «header».

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

3.2 @at-root

Директива @at-root поднимает содержимые в ней правила в корень, отменяя цепочку от родителя. Тут все просто:

Sass CSS — готовый результат

Мы рассмотрели не все директивы, которые есть в Sass, а только самые используемые на практике. Если вас интересует более глубокое изучение Sass директив, обратитесь к документации.

4. Выражения

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

4.1 Директива @if()

Директива @if() позволяет осуществить выполнение SassScript с определенными условиями и имеет следующий синтаксис:

Sass CSS — готовый результат

4.2 Директива @for

@for выводит блок со стилями определенное количество раз. Во время выполнения можно задать переменную-счетчик.

Sass CSS — готовый результат

Вы можете указать through вместо to, если требуется пройтись от 1 до 11 включительно, а не только до 10, как в примере.

4.3 Директива @each

Если требуется пройтись по списку значений, а не просто чисел, можно использовать директиву @each:

Sass CSS — готовый результат

4.4 Директива @while

@while циклично выводит блоки стилей, пока выражение является true.

Sass CSS — готовый результат

5. Миксины

Миксины — блоки Sass кода (или примеси-шаблоны), которые могут принимать аргументы (опционально) и позволяют значительно расширить возможности написания стилей и сократить затраты времени на применении однотипных правил и даже целых CSS блоков. Это что-то вроде функции, которая может принять аргумент, выполнить огромный объем работы и выдать результат в зависимости от входного параметра.

Миксин объявляется директивой @mixin, после объявления должно быть указано имя миксина. Вызывается миксин директивой @include, которая принимает имя миксина и передаваемые аргументы, если такие имеют место быть.

Sass CSS — готовый результат

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

Сразу отвечу на вопрос — как работать с Sass стилями на готовом сайте, неужели нужно править готовый CSS и заливать по FTP? Нет, так делать нельзя. Вы должны иметь локальную копию ваших Sass стилей или даже целого сайта и после окончания работы деплоить (выгружать) по FTP готовые стили. Для этого, вы можете использовать Gulp пакет vinyl-ftp. Или настроить Sass окружение на вашем сервере для компиляции загружаемых по FTP/sFTP файлов.

Премиум уроки от WebDesign Master

Создание контентного сайта на Jekyll от А до Я

Создание современного интернет-магазина от А до Я

Я — фрилансер! — Руководство успешного фрилансера

Variables

Sass variables are simple: you assign a value to a name that begins with $ , and then you can refer to that name instead of the value itself. But despite their simplicity, they’re one of the most useful tools Sass brings to the table. Variables make it possible to reduce repetition, do complex math, configure libraries, and much more.

A variable declaration looks a lot like a property declaration: it’s written : . Unlike a property, which can only be declared in a style rule or at-rule, variables can be declared anywhere you want. To use a variable, just include it in a value.

SCSS Syntax

Sass Syntax

CSS Output

вљ пёЏ Heads up!

CSS has variables of its own, which are totally different than Sass variables. Know the differences!

Sass variables are all compiled away by Sass. CSS variables are included in the CSS output.

CSS variables can have different values for different elements, but Sass variables only have one value at a time.

Sass variables are imperative, which means if you use a variable and then change its value, the earlier use will stay the same. CSS variables are declarative, which means if you change the value, it’ll affect both earlier uses and later uses.

SCSS Syntax

Sass Syntax

CSS Output

рџ’Ў Fun fact:

Sass variables, like all Sass identifiers, treat hyphens and underscores as identical. This means that $font-size and $font_size both refer to the same variable. This is a historical holdover from the very early days of Sass, when it only allowed underscores in >CSS ’s syntax, the two were made equivalent to make migration easier.

Default Values

Normally when you assign a value to a variable, if that variable already had a value, its old value is overwritten. But if you’re writing a Sass library, you might want to allow your users to configure your library’s variables before you use them to generate CSS.

To make this possible, Sass provides the !default flag. This assigns a value to a variable only if that variable isn’t defined or its value is null . Otherwise, the existing value will be used.

Configuring Modules

Only Dart Sass currently supports @use . Users of other implementations must use the @import rule instead.

Variables defined with !default can be configured when loading a module with the @use rule. Sass libraries often use !default variables to allow their users to configure the library’s CSS.

To load a module with configuration, write @use with ( : , : ) . The configured values will override the variables’ default values. Only variables written at the top level of the stylesheet with a !default flag can be configured.

SCSS Syntax

Sass Syntax

CSS Output

Scope

Variables declared at the top level of a stylesheet are global. This means that they can be accessed anywhere in their module after they’ve been declared. But that’s not true for all variables. Those declared in blocks (curly braces in SCSS or indented code in Sass) are usually local, and can only be accessed within the block they were declared.

SCSS Syntax

Sass Syntax

CSS Output

Shadowing

Local variables can even be declared with the same name as a global variable. If this happens, there are actually two different variables with the same name: one local and one global. This helps ensure that an author writing a local variable doesn’t accidentally change the value of a global variable they aren’t even aware of.

SCSS Syntax

Sass Syntax

CSS Output

If you need to set a global variable’s value from within a local scope (such as in a mixin), you can use the !global flag. A variable declaration flagged as !global will always assign to the global scope.

SCSS Syntax

Sass Syntax

CSS Output

вљ пёЏ Heads up!

Older Sass versions allowed !global to be used for a variable that doesn’t exist yet. This behavior was deprecated to make sure each stylesheet declares the same variables no matter how it’s executed.

The !global flag may only be used to set a variable that has already been declared at the top level of a file. It may not be used to declare a new variable.

Flow Control Scope

Variables declared in flow control rules have special scoping rules: they don’t shadow variables at the same level as the flow control rule. Instead, they just assign to those variables. This makes it much easier to conditionally assign a value to a variable, or build up a value as part of a loop.

SCSS Syntax

Sass Syntax

CSS Output

вљ пёЏ Heads up!

Variables in flow control scope can assign to existing variables in the outer scope, but they can’t declare new variables there. Make sure the variable is already declared before you assign to it, even if you need to declare it as null .

Advanced Variable Functions

The Sass core library provides a couple advanced functions for working with variables. The meta.variable-exists() function returns whether a variable with the given name exists in the current scope, and the meta.global-variable-exists() function does the same but only for the global scope.

вљ пёЏ Heads up!

Users occasionally want to use interpolation to define a variable name based on another variable. Sass doesn’t allow this, because it makes it much harder to tell at a glance which variables are defined where. What you can do, though, is define a map from names to values that you can then access using variables.

Синтаксис SASS

Статья «SASS для дизайнеров и не только» за 2013-02-21 переименована в «Синтаксис SASS» и обновлена (2014-02-17)

Sass — это препроцессорный язык; препроцессоры компилируют СSS код, который мы пишем на процессорном языке (SASS) в чистый CSS код.

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

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

Так в чем эти преимущества? Вы сможете логически структурировать ваш код, тем самым вы ускорите сам процесс написания кода; существенно сократится количество повторов (в этом нам помогут переменные), код станет намного проще поддерживать. Язык SASS упрощает работу над проектом, и все равно, кто вы — программист или дизайнер. Это действительно так.

Переменные

В SASS название переменной начинается со знака доллара ( $ ). Значения переменных идентичны значениям свойств CSS.

Начнем с основ, а именно с переменных. Рассмотрим переменные на основе следующего примера. Мы склонны использовать в документе несколько цветов. Как результат приходится писать снова и снова значения цвета в формате hex или rgb. Если мы захотим поменять какой-либо цвет, нам придется пройтись авто-заменой по всему документу. При этом мы не можем быть уверены, что не захватим ненужное значение.

Например, вы можете иметь несколько правил, которые определяют темно-красный цвет у нужных селекторов. Язык SASS позволяет нам поступить следующим образом: в начале документа мы можем определить переменную с именем $brand-colour и затем в документе вместо самого значение ставить наименование переменной. Затем, если нам понадобится поменять цвет, достаточно всего лишь изменить значение у переменной $brand-colour и этим мы поменяем цвет у всех правил, которые используют переменную $brand-colour .

Числовые значения у переменных

Переменные могут содержать не только строки, но и цифры, которыми вы можете манипулировать. Если вы используете сетки или ваш макет масштабируется в зависимости от конкретных значений, то вы, вероятно, используете эти значений повсеместно в вашем стилевом файле. Например, если вы постоянно используете значение в 10px , то вы можете определить переменную, например, $unit = 10px . Эту переменную можно неоднократно использовать в вашем коде. Вместо имени переменной, как обычно, подставится значение ( 10px ).

Но что делать, если вам потребуется удвоить значение переменной? Например, вы хотите в два раза увеличить нижнее поле у элемента. Используя SASS, вы можете добавить простую математику ( + , — , * , / , % ), например, для нашего случая:

Примеси

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

Например, у вас на сайте есть разделитель, который вы используете довольно часто. Например, вы можете им разбивать основные блоки (например, articles и header ) или четные параграфы. Разделитель имеет нижний отступ, нижнее поле, рамку и тень.

Чтобы создать разделитель вы можете к элементу добавить класс .shadow-border . Но это существенно «загрязнит» ваш html и css файл.

Если вы хотите корректную структуру в css файле и чистую html-разметку, вам нужно добавить вышеприведенное правило соответствующим html-элементам. Стоит отметить, если элементов с разделителем много, это существенно «испортит» стилевой файл, что затруднит поддержку стилевого файла.

Используя @mixin , вы можете определить имя для блока объявлений. Это имя не должно быть связано ни коим образом с вашим HTML.

Затем, чтобы подключить примесь к элементу, вам потребуется просто подключить имя примеси: @include shadow-border;

Параметры для примесей

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

Вложение примесей

Иногда очень удобно иметь возможность вложить одну примесь в другую. Например, нам нужно добавить примесь к уже существующей примеси:

Вложения

Примеси не единственная вещь, которую вы можете вкладывать в селекторы CSS (или, что вернее, в блоки объявлений в sass-файле). В SASS вы можете вкладывать элементы друг в друга. Этим вы исключите повторяющиеся селекторы и упростите процесс чтения кода.

Вложения и @media-запросы

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

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

Импортирование, оператор @import в SASS

Чтобы подключить содержимое, например, _style_two.scss , необходимо писать так:

Важно: если подключать не конкретный файл, а папку, то css файлы не будут генерироваться для файлов начинающихся с _ .
Например, наличие файла style.scss приведёт к созданию style.css , а наличие файла _some.scss — нет. Таким образом, знак подчеркивания означает, что файл не является самостоятельной таблицей стилей и его можно лишь импортировать в другую таблицу стилей.

Циклы в SASS

Синтаксис оператора цикла ( each ) следующий: $var in

  • . $var – имя переменной, и

  • список значение переменной $var .
    Вместо $var подставляется значения из
  • , затем в стилевом файле выводится содержимое цикла (по количеству значений
  • ).
    Например:

    Более подробно о циклах ( if , for , while ) смотрите в документации SASS.

    Оператор @extend

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

    Оператор @extend позволяет избежать этих проблем, обеспечивая возможность одному селектору наследовать стили от другого селектора. Например:

    Полный гайд по 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. Миксины: позволяют один раз создать набор правил, чтобы потом использовать их многократно или смешивать с другими правилами. Например, миксины используют для создания отдельных тем макета.

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

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

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

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

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

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

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

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

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

    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.”, потому что переменная не пуста.

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

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

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

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

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

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

    Оператор &

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

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

    Миксины

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

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

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

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

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

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

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

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

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

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

    Понимание области переменных в Sass

    Russian (Pусский) translation by Sergey Zhuk (you can also view the original English article)

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

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

    Область переменных Sass

    Sass поддерживает два типа переменных: локальные переменные и глобальные переменные.

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

    С другой стороны, локальные переменные — это те, которые объявлены внутри селектора. Позже мы рассмотрим, как мы можем настроить это поведение. Но сейчас давайте посмотрим наш первый пример.

    Здесь мы определяем mixin, а затем переменную btn-bg-color внутри нее. Это локальная переменная, поэтому она видима только для кода внутри этого mixin:

    Далее мы можем вызвать mixin следующим образом:

    Представьте, однако, что мы также хотим использовать эту переменную (а не mixin) в другом селекторе:

    Это даст нам следующую ошибку:

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

    Вложенные селекторы

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

    Он компилируется в:

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

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

    Имена переменных

    Глобальные и локальные переменные могут иметь одинаковые имена. Чтобы продемонстрировать это поведение, мы рассмотрим четвертый пример:

    Здесь мы определили три разные переменные ( text-color ) с тем же именем. Первая — это глобальная переменная, а две другие — локальные.

    Вот некоторые стили, использующие их:

    И сгенерированный CSS:

    Это то, что вы ожидали?

    Имейте в виду, что мы не увидим эти стили, если не скомпилируем их с текущей версией Sass (3.4). Например, предположим, что мы используем Sass 3.3, наш вывод CSS будет выглядеть так:

    Обратите внимание на разницу в цвете фона селектора .wrap . Это происходит потому, что в соответствии с более ранними версиями Sass (такими же для LibSass), если мы локально переопределим значение глобальной переменной (например, text-color ), это будет новое (глобальное) значение переменной. Итак, в нашем примере скомпилированные стили зависят от порядка, который мы объявляем переменной и миксами.

    Флаг по умолчанию ( default )

    Этот флаг позволяет нам установить значение переменной в случае, если оно еще не установлено или его текущее значение равно null (рассматривается как неназначенное). Чтобы лучше объяснить, как мы можем использовать его в реальном сценарии, давайте предположим, что у нас есть проект со следующей структурой:

    Файл app.scss выглядит следующим образом:

    Посмотрим содержимое частичных файлов.

    Во-первых, файл variables.scss содержит наши переменные:

    Обратите внимание на флаг default , назначенный переменной btn-bg-color .

    Во-вторых, файл mixins.scss включает наши миксы:

    Затем сгенерированный файл app.css будет выглядеть следующим образом:

    Итак, наши кнопки имеют стили по умолчанию. Но давайте предположим, что мы хотим иметь возможность перезаписать их, применяя наши собственные значения. Чтобы сделать это, мы можем переназначить желаемые (по умолчанию) переменные в частичном файле config.scss :

    Установка значения этой переменной в chocolate приведет к игнорированию соответствующего значения ( lightblue ), получившего флаг default . Поэтому сгенерированный CSS изменяется, как мы видим ниже:

    Примечание: если мы не добавили флаг default в переменную btn-bg-color , наш CSS будет, из-за каскадной природы CSS, следующим образом:

    Глобальный флаг ( global )

    Этот второй флаг помогает нам изменить область действия локальной переменной.

    Помните ошибку, которую мы видели в нашем первом примере? Что ж, это произошло потому, что мы пытались использовать переменную btn-bg-color в селекторе .wrap . Давайте изменим наш пример, чтобы включить этот новый флаг. Вот новые стили:

    Как вы можете видеть ниже, благодаря этому флагу CSS компилируется без ошибок:

    Флаг global полезен, но имейте в виду, что не всегда целесообразно изменять область видимости переменной.

    Проверка наличия переменной

    Sass предоставляет две функции самоанализа для проверки существования переменной или нет. Мы можем использовать функции variable-exists и/или global-variable-exist , чтобы проверить, существуют ли наши локальные и/или глобальные переменные соответственно.

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

    Вывод

    В этой статье я познакомил вас с концепцией области видимости переменных в Sass. В этой статье я познакомил вас с концепцией области видимости переменных в Sass. Вы можете найти все примеры этой статьи в этом сообщении SassMeister и не стесняйтесь задавать любые вопросы, которые могут возникнуть в комментариях!

    One more step

    Please complete the security check to access codepen.io

    Why do I have to complete a CAPTCHA?

    Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

    What can I do to prevent this in the future?

    If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

    If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

    Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

    Cloudflare Ray ID: 5341b682ea5b8faf • Your IP : 188.64.174.135 • Performance & security by Cloudflare

    Как именовать переменные цвета в SASS

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

    ПЛОХОЕ ИМЕНОВАНИЕ

    Что ж, начнем с плохого. Оглядываясь на несколько месяцев назад, я вижу, что во многих проектах, которыми я занимался, файл «variables.sсss» выглядел примерно следующим образом:

    • Такие имена переменных не дают никакой информации ни об их месте в иерархии, ни об их связи между собой.
    • Какой цвет основной? Красный? Синий? Может быть темно-красный?
    • Что случится, если наша цветовая схема изменится? Мы должны будем изменить $red во всех местах в соответствии с нашим новым цветом. В первую очередь это лишает смысла вообще существование переменных.
    • «Darker red»? Насколько темнее?

    ЧУТЬ ЛУЧШЕ

    Теперь мы обозначили некий контекст, намного понятнее стала связь между цветами. Мы имеем $primary-color и $secondary-color – два основных оттенка нашей схемы – и некоторые служебные, но относительно понятные переменные, типа $text-color .

    НАМНОГО ЛУЧШЕ

    Это метод, который я стал недавно применять для всех новых проектов.

    Сначала мы определяем самые используемые цвета во внутренние переменные. Мне нравится добавлять в название таких переменных префикс x . Внутренние переменные выполняют единственную функцию, они освобождают глобальные переменные от каких-либо зависимостей. При этом глобальные переменные, благодаря «человеческим названиям», сразу дают понимание о том, какие цвета используются в проекте. А с HEX-кодами пускай разбирается машина.

    Препроцессор 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 самые часто используемые куски кода и не компилирует их повторно.

    Я сделал лишь краткий, но полный обзор возможностей препроцессора 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.

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