Основы Sass


Содержание

Двадцать шестой урок. Основы Sass. Настройка UniCSS

Sass позволяет разделить css/scss-код на отдельные файлы. Скажем — отдельно типографику, отдельно сбросы, отдельно формы и т.п. Такое деление упрощает поддержку проекта: найти нужный фрагмент в коротком коде намного проще.

На выходе обычно формируется один css-файл, который и подключается к странице. Здесь есть один нюанс, о котором вам обязательно следует знать.

Результирующий css-код может оказаться довольно большим: сейчас 200-400Кб не редкость. С точки зрения браузера, это не совсем хорошо, поскольку посетителю требуется больше времени на загрузку стилей, без которых страница отображается некорректно. Поэтому считается, что чем меньше размер css-файла, тем лучше. Но уменьшить файл можно только убрав существующие классы, что уменьшает возможности вёрстки.

Решения этой проблемы в реальности не существует, но есть различные иммитации такого решения. Например можно разделить файл на несколько частей и загружать их последовательно: вначале самая важная часть стилей, после всё остальное. Проблема здесь в том, что css-стили обязательно должны загружаться в секции HEAD перед отображением всей страницы. Поэтому если использовать несколько раздельных файлов, то браузер всё-равно должен загрузить их все, а уже после отобразить страницу. (Сейчас это уже не совсем так. В новой редакции HTML разрешено загружать css-стили в конце BODY.)

На самом же деле, браузеры так не поступают. Они сразу начинают отображать HTML, даже если он частично загружен, при этом они как бы угадывают (по открытым тэгам) дальнейших код, чтобы корректно отобразить содержимое. Одновременно с этим организуется загрузка содержимого из секции HEAD (css-стили и js-скрипты). Как только файлы загружены, они сразу же применяются к странице. На медленных соединениях хорошо видно перестраивание страницы в процессе загрузки.

Основная проблема в том, что http-соединения имеют некоторые ограничения на количество одновременных загрузок, например не более 20 потоков. И под потоками подразумевается абсолютно все загрузки: картинки, скрипты, стили и все их дополнительные подкачки. Для любого сервера количество соединений довольно ресурсоёмкая операция. Иногда время на создание соединения больше, чем время передачи файла. Имено поэтому нужно стремиться уменьшать количество загружаемых служебных файлов.

Для того, чтобы ускорить время загрузки используется gzip-сжатие трафика. Сервер налету сжимает файл и в таком виде передает его браузеру. Браузер также быстро распаковывает файл до обычного. Когда выполняется обновление страницы, то браузер уже не загружает файл с сервера, а использует свою локальную копию. Таким образом загрузка страниц значительно ускоряется.

Степень сжатия текстовых css-файлов достаточно большая. Например в UniCSS style.css уменьшаются с 123Кб до 21Кб, то есть примерно в 5-6 раз. Следовательно трафик для загрузки такого файла создается небольшой и он выгодней, чем создавать множество раздельных http-соединений.

Исходя из всего сказанного, как правило, все исходные scss-файлы объединяются в один css-файл. Делается это с помощью команды @import . Откройте файл style.scss и посмотрите как это сделано в UniCSS.

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

Здесь в реальности будет подключен файл unicss/_normalize.scss .

UniCSS используется каталог unicss для файлов «ядра» фреймворка. Каталог main используется верстальщиком для размещения своих файлов и редактирования существующих. Таким образом, когда стоит задача настроить UniCSS под себя, следует использовать только каталог main .

Если проект достаточно большой, то можно создать под него отдельный каталог, например template , где размещать свои файлы. Естественно в style.scss нужно прописать подключение файлов с помощью @import .

Технически Sass может подключать все файлы из указанного каталога, а не по одному. Но в Windows такая работа @import происходит с ошибками (во всяком случае на старых версиях Sass), поэтому принято указывать каждый файл отдельно. К тому же такой подход позволяет подключать только нужные файлы.

Подключение файлов в любом Sass-проекте выполняется примерно по одному алгоритму.

В первую очередь подключаются все константы. Технически это те же переменные, но они очень редко меняются или вообще несут служебную нагрузку. Примеры: main/_colors-gmd.scss — это цвета из Google Material Design, main/_fontawesome.scss — коды иконок FontAwesome.

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

Дальше идёт загрузка css-сбросов — они должны быть первыми по коду. После следует основное «ядро» (каталог unicss ). В «ядре» содержатся не только стили, но и миксины — это пользовательские функции Sass. Обычно они загружаются раньше, чтобы быть доступными для файлов ниже по коду.

Ближе к концу загружаются уже свои пользовательские файлы (каталог main ). Обратите внимание, что unicss/colors так же загружается в конце. Сделано это для того, чтобы придать классам цвета больший приоритет (при равном весе селектора).

Предусмотрено два специальных файла: main/_extension-unicss.scss используется для классов построенных по правилам UniCSS и расширяющие его возможности. Второй файл main/_my-template.scss используется для размещения своих стилей. Если проект небольшой (как в нашем курсе), то одного файла будет вполне достаточно.

Знакомство с устройством UniCSS лучше начать с файлов каталога main . Во многих файлах вы увидите обычный css-код. Он 100% совместим с Sass.

Для создания комментариев в Sass используется два варианта. Первый — однострочный, который начинается с двойного слэша // и действует до конца строки. Второй — многострочный, который обрамляется в css-стиле /* */ .

С вложенностью мы уже знакомы с прошлого урока. Расмотрим несколько типовых примеров.

Данный пример интуитивно понят. Селектор «table» будет подставлен под каждый «подселектор», включая перечисленные через запятую. Получится такой css-код:

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

Там, где нужно сформировать селекторы класса и другие аналогичные, используется специальный символ & . Он заменяется на «этот же» селектор (родителя). Рассмотрим пример:

Символ & заменится на hr :

Вложенности могут быть достаточно сложными. Тут следует ориентироваться в первую очередь на два момента. Первый — css-код не должен быть усложнен там, где не следует, и второй — удобство чтения. Скажем в вышеприведенном примере селекторы table th, table td явно излишни, поскольку th и td используются только внутри table . Но зато такой код намного читабельней и сразу видно, что он описывает таблицу.

Рассмотрим еще один пример, где & вложен во вложение.

То есть Sass достаточно сообразителен, чтобы понять как правильно сформировать css-правило.

Для гибкого управления кодом в Sass используются переменные. Все переменные начинаются с символа $ , а после через : указывается значение:

В UniCSS все глобальные переменные хранятся в файле main/_variables.scss . В переменной могут храниться числа, код цвета, другая переменная и т.п. Также Sass поддерживает списки — это наборы значений, которые указываются через запятую. Есть еще ассоциативные списки, похожие на массивы. Они указываются в скобках:

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

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

Чтобы её использовать в Sass-коде нужно применить дополнительное «обрамление» # < >:

Что приведет к результату:

При попытке скомпилировать такой код без «обрамления», Sass выдаст ошибку «Error: Invalid CSS after «@media»».

Если же стоит задача просто передать переменную как есть, то не нужно указывать кавычки:

Главное условие, чтобы в значении переменной не было служебных символов, как они присутствуют в $SCREEN_DESKTOP (например двоеточие).

Если какая-то часть кода повторяется, то используются миксины (или примеси). Например нужно оформить несколько блоков, которые содержат одинаковые css-стили, но с разными значениями. Создается миксин у которого параметры будут отвечать за значения свойств. Для создания миксина используется служебное слово @mixin :

Для того, чтобы использовать миксин применяют @include :

Что приведет к такому результату:

Иногда стоит задача включить в стили какой-то уже существующий класс. Делается это с помощью команды @extend :

То есть Sass объединил классы с одинаковыми свойствами. Такой подход позволяет сократить результирующий css-код и очень часто используется когда вопрос оптимизации кода стоит остро.

Sass поддерживает основные математические операции: + — * / % . Работают они как обычно, поэтому досконально рассматривать не будем. Более интересны собственные функции Sass, которые позволяют решать действительно сложные задачи. Таких функций очень много и все их изучать смысла нет, достаточно просто ознакомиться с общим списком. Как правило при верстке часто используются функции для работы с цветом.

Например нужно использовать оттенок базового цвета, но чуть светлее или темнее. Для этого применяют функции lighten() и darken() .

Первый блок получит цвет на 10% светлее ( #f49f6f ) базового , а второй на 10% темнее ( #eb6112 )

Полностью вся документация по Sass доступна на официальном сайте, но для большинства работ вам будет вполне достаточно приведенной мной информации.

ТИПИЧНЫЙ ВЕРСТАЛЬЩИК

Если ты хочешь двигаться дальше, изучить что-то новое, ускорить свою верстку, отойти от метода only HTML/CSS, only hardcore, то изучение CSS-препроцессора — первый шаг к этому. Изучить CSS-препроцессоры, например SCSS не так сложно, как кажется.
«Окей, но с чего же начать?» — спросишь ты. Все просто:

Изучи основы синтаксиса

Заходишь на сайт sass-scss.ru/guide, просматриваешь основы синтаксиса для SASS и SCSS и выбираешь то, что тебе по душе. Например, SCSS максимально поход на CSS, однако SASS содержит в себе меньше символов.

Загляни в документацию

Для более подробной документации загляни сюда: sass-scss.ru/documentation

Установи программу или использую командную строку

Для работы с препроцессором у Вас есть выбор: установить программу (платную или бесплатную) или использовать командную строку для работы. Подробнее тут: sass-scss.ru/install Например, я использую программу Koala и вижу в ней множество плюсов.

Подготовь проект на своем компьютере

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

Создай файл

В своем текстовом редакторе создай файл, с которым ты будешь работать. Например присвой ему имя style.scss.

Скомпилируй файл

Этот пункт относится к работе с программой Koala. Поэтому открываем в ней наш проект (важно, чтобы путь к папке не имел русских букв, только латиница) и компилируем предложенные файлы.

Верстаем

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

Препроцессор 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. Кроме того, используя препроцессор, вы должны будете установить его к себе на веб-сервер.

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

Эта статья о 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: пишем стили просто и быстро

Всем привет! Как быстро летит время. Я даже не заметил, как я перешел от написания стилей с обычного 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. Такие файлы называются фрагментами. При импорте фрагментов не обязательно указывать расширение файла.

Файлы фрагментов могут быть с расширениями: *.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 для абсолютных новичков

Перевод статьи: The Absolute Beginner’s Guide to Sass.
Автор: Andrew Chalkley.

Что такое SASS?

SASS является аббревиатурой от Syntactically Awesome Stylesheets — метаязык на основе CSS, название которого можно перевести как «CSS c превосходным синтаксисом», разработанный Хемптоном Кэтлином (Hampton Catlin).

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

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

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

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

В качестве примера возьмем следующий фрагмент CSS кода:

#leaderboard_ad
<
display: block;
width: 728px;
height: 90px;
>

Который эквивалентен вот такому SASS:

#leaderboard_ad
display: block
width: 728px
height: 90px

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

Теперь, имея представление о том, как создается SASS код, давайте рассмотрим те вопросы, которые делают его таким превосходным.

Переменные.

В SASS для объявления переменной необходимо перед ее именем использовать символ доллара $ . И если имя вашей переменной, допустим, red , то после двоеточия мы можем указать соответствующее ей вот такое значение:

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

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

p
color: darken($red, 10%)

С переменными вы можете производить арифметические действия, такие как сложение и вычитание, при условии, что используемые для этого значения имеют один и тот же тип данных. Если, к примеру, нам необходимо применить более темный оттенок, то все что нам нужно сделать, это вычесть из уже используемого в коде значения цвета, хранящегося в переменной, небольшое шестнадцатеричное HEX-значение, равное, скажем, #101 . Это же касается и случая, когда необходимо изменить значение размера шрифта, допустим, увеличить на 10 пикселей, для этого мы просто прибавляем недостающие пиксели:

Вложенность.

В SASS вложенность бывает двух типов.

Вложенность селекторов.

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

.speaker
.name
font:
weight: bold
size: $fontsize + 10px
.position
font:
size: $fontsize

Если вы взгляните на сгенерированный в результате CSS код, то какие-либо комментарии будут излишни. Путем вложенности класса .name в класс .speaker ( *тем же способом — с помощью двух пробелов в начале следующей строки ) создается CSS селектор .speaker.name . Это же касается и следующего имени класса .position , расположенного после декларирования свойств для первого селектора, в результате вложенности которого образуется второй селектор .speaker.position :

Вложенность свойств.

Второй тип вложенности позволяет структурировать свойства с одним префиксом ( * font-family , font-size , font-weight или border-style , border-color , border-radius и т.д. ):

.speaker
.name
font:
weight: bold
size: $fontsize + 10px
.position
font:
size: $fontsize

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

То есть если мы укажем свойство font: , на следующей строке после двух пробелов свойство weight: , то в результате это будет эквивалентно хорошо знакомому нам свойству font-weight .

В модуле обеспечивается поддержка всех дефис-содержащих свойств.

Такого рода вложенность является замечательным способом организации и структурирования вашего CSS кода и позволяет избежать его нежелательного повторения. ( * DRY — «Don’t Repeat Yourself» — «Не повторяйтесь». Ситуации, когда при CSS форматировании определенных элементов их стили повторяются и/или переопределяются в других местах, что усложняет читабельность и обслуживание кода ).

Миксины.

Еще одной прекрасной возможностью SASS являются миксины.


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

Для того чтобы определить миксин используйте специально зарезервированное в SASS ключевое слово @mixin , а после него укажите выбранное вами имя миксина. Если есть необходимость в аргументах, то перечислите их в круглых скобках. Значения, устанавливаемые для аргумента по умолчанию, указываются при определении миксина через двоеточие. ( *Другими словами, миксины представляют собой CSS функции. )

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

Взгляните на следующий пример:

h1 /* используем миксин */
@include border-radius(2px)

.speaker
@include border-radius

Этот SASS после компиляции будет преобразован в представленный ниже CSS код:

.speaker <
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; >

Для заголовка h1 мы явно указали значение радиуса закругления углов границы, но для элемента с именем класса .speaker мы этого не делали, поэтому было взято дефолтное значение 5px.

Наследование селекторов.

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

.speaker
@extend h1
border-width: 2px

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

.speaker <
border-width: 2px; >

( *Заметьте, декларация border: 4px solid #ff9aa9; не повторяется в рамках правила с селектором .speaker , а вместо этого к первому правилу добавляется второй селектор. Другими словами, дублирования кода нет. )

Попробуйте SASS в действии.

Онлайн.

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

Но до того, как вы начнете экспериментировать, в нижней области страницы выберите опцию «Indented Syntax».

Установив на ПК.

Сам SASS является приложением ( gem ) платформы Ruby. Поэтому для его установки без предварительной инсталляции самой платформы и менеджера пакетов этого языка программирования RubyGems не обойтись. После успешной установки самой платформы и менеджера выполните в консоли следующую команду:

SASS модуль может быть использован как инструмент конвертирования ваших SASS файлов в файлы CSS формата в режиме командной строки.

Это можно, к примеру, сделать, введя следующую команду:

Где sass_folder — это путь к папке, содержащей SASS файлы (то есть с расширением.sass), а stylesheets_folder — путь к папке, в которой будут сохраняться получающиеся после компиляции, результирующие CSS файлы. Команда ––watch сообщает модулю, что он должен следить ( watch ) за любыми изменениями в указанной папке и если таковые имеются, то после их сохранения конвертировать исходные.sass файлы в эквивалентные им.css файлы.

Обратное конвертирование CSS в SASS.

Вы можете начать использование SASS с того, что сконвертируете стили, используемые в своих уже функционирующих проектах в этот формат с помощью утилиты «sass-convert».

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

Где флаг -R задает рекурсивный способ выполнения операции. А следующая за ним точка . означает, что получаемые в результате конвертации.sass файлы будут сохранены в текущей директории. ( *При необходимости вместо точки можно указать путь к папке, в которой нужно сохранить результирующие файлы. )

Комментарий к Sassy CSS (SCSS).

В этой статье я затронул только начальный, оригинальный синтаксис — SASS Indented Syntax. ( *Это имя данный синтаксис получил благодаря способу своего структурирования, в данном случае визуального. То есть английское слово «Indented», дословно переводимое как «вдавленный» или «вогнутый», в данном контексте отражает то, что вложенные блоки кода с помощью отступов визуально «вдавливаются» в общую структуру. Как упоминалось выше, каждый такой отступ равен двум пробелам. ) Но помимо этого существует более новая его версия, называемая SCSS или Sassy CSS ( *SASS-подобный CSS ). Различие между двумя этими версиями заключается в том, что Sassy CSS максимально приближен к CSS, являясь более привычным для большинства разработчиков, но в тоже время он обладает всеми преимуществами его предыдущей версии SASS — наличие переменных, миксинов, вложенностей и наследования селекторов. Факт такого сходства и отражен в его названии «Sassy» ( *SASS-подобный ).

Заключение.

SASS действительно позволяет создавать хорошо структурированный и не содержащий повторений, DRY код. Кроме того, существует проект Compass, который является библиотекой, значительно расширяющей возможности SASS за счет интеграции возможностей других CSS фреймворков посредством миксинов. Такой подход позволяет избежать «засорения» вашего базового HTML кода несемантическими классами.

Так чего же вы ждете? Попробуйте SASS уже начиная со своего следующего проекта!

Основы препроцессора Sass: переменные, миксины, операторы, импорт, вложенность, наследование

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

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

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

Самый прямой способ через терминал. После установки Sass из терминала можно запустить sass input.scss output.css. Следить можно как за отдельными файлами, так и за всеми директориями. Кроме того, следить за папками или директориями можно с помощью флага —watch. Пример запуска Sass и отслеживания целой директории:

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

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

Переменные

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

Когда Sass отработает, он заменит переменные $font-stack и $primary-color на нормальные значения CSS и поместит их в код. Это крайне удобно при работе с цветами бренда и их последовательном распространении на сайте.

Вложенность

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

Sass позволяет использовать схожую с HTML визуальную иерархию вложенности CSS-селекторов. Учтите, что слишком сложные правила вложенности приведут к усложнению CSS, и его будет трудно обслуживать. Это плохая практика.

Пример типичных стилей для навигации на сайте:

Обратите внимание на то, как ul, li и a селекторы вложены внутрь nav. Это отличный способ организовать CSS и сделать его более читаемым. После генерации CSS вы получите примерно следующее:

Фрагменты

Вы можете создавать фрагментные файлы Sass, в которых будут храниться небольшие кусочки CSS, и эти файлы можно подключать в другие Sass файлы. Это отличный способ создания модульного CSS, упрощающий обслуживание кода. Фрагмент – это просто Sass файл, в имени которого первый символ нижнее подчеркивание. Файлы можно называть примерно так _partial.scss. Нижнее подчеркивание позволяет Sass понять, что это всего лишь фрагмент, и его не нужно генерировать в CSS файл. Sass фрагменты подключаются с помощью директивы @import.

Импорт

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

Sass Basics

Before you can use Sass, you need to set it up on your project. If you want to just browse here, go ahead, but we recommend you go install Sass first. Go here if you want to learn how to get everything setup.

Preprocessing

CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. Sass lets you use features that don’t exist in CSS yet like variables, nesting, mixins, inheritance and other nifty goodies that make writing CSS fun again.

Once you start tinkering with Sass, it will take your preprocessed Sass file and save it as a normal CSS file that you can use in your website.

The most direct way to make this happen is in your terminal. Once Sass is installed, you can compile your Sass to CSS using the sass command. You’ll need to tell Sass which file to build from, and where to output CSS to. For example, running sass input.scss output.css from your terminal would take a single Sass file, input.scss , and compile that file to output.css .

You can also watch individual files or directories with the —watch flag. The watch flag tells Sass to watch your source files for changes, and re-compile CSS each time you save your Sass. If you wanted to watch (instead of manually build) your input.scss file, you’d just add the watch flag to your command, like so:

You can watch and output to directories by using folder paths as your input and output, and separating them with a colon. In this example:

Sass would watch all files in the app/sass folder for changes, and compile CSS to the public/stylesheets folder.

Variables

Think of variables as a way to store information that you want to reuse throughout your stylesheet. You can store things like colors, font stacks, or any CSS value you think you’ll want to reuse. Sass uses the $ symbol to make something a variable. Here’s an example:

SCSS Syntax

Sass Syntax

CSS Output

When the Sass is processed, it takes the variables we define for the $font-stack and $primary-color and outputs normal CSS with our variable values placed in the CSS. This can be extremely powerful when working with brand colors and keeping them consistent throughout the site.

Nesting

When writing HTML you’ve probably noticed that it has a clear nested and visual hierarchy. CSS , on the other hand, doesn’t.

Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. Be aware that overly nested rules will result in over-qualified CSS that could prove hard to maintain and is generally considered bad practice.

With that in mind, here’s an example of some typical styles for a site’s navigation:

SCSS Syntax

Sass Syntax

CSS Output

You’ll notice that the ul , li , and a selectors are nested inside the nav selector. This is a great way to organize your CSS and make it more readable.

Partials

You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. This is a great way to modularize your CSS and help keep things easier to maintain. A partial is a Sass file named with a leading underscore. You might name it something like _partial.scss . The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the @use rule.


Modules

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

You don’t have to write all your Sass in a single file. You can split it up however you want with the @use rule. This rule loads another Sass file as a module, which means you can refer to its variables, mixins, and functions in your Sass file with a namespace based on the filename. Using a file will also include the CSS it generates in your compiled output!

SCSS Syntax

Sass Syntax

CSS Output

Notice we’re using @use ‘base’; in the styles.scss file. When you use a file you don’t need to include the file extension. Sass is smart and will figure it out for you.

Mixins

Some things in CSS are a bit tedious to write, especially with CSS3 and the many vendor prefixes that exist. A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible. A good use of a mixin is for vendor prefixes. Here’s an example for transform .

SCSS Syntax

Sass Syntax

CSS Output

To create a mixin you use the @mixin directive and give it a name. We’ve named our mixin transform . We’re also using the variable $property ins >CSS declaration starting with @include followed by the name of the mixin.

Extend/Inheritance

This is one of the most useful features of Sass. Using @extend lets you share a set of CSS properties from one selector to another. It helps keep your Sass very DRY. In our example we’re going to create a simple series of messaging for errors, warnings and successes using another feature which goes hand in hand with extend, placeholder >CSS neat and clean.

SCSS Syntax

Sass Syntax

CSS Output

What the above code does is tells .message , .success , .error , and .warning to behave just like %message-shared . That means anywhere that %message-shared shows up, .message , .success , .error , & .warning will too. The magic happens in the generated CSS , where each of these >CSS properties as %message-shared . This helps you avo >HTML elements.

You can extend most simple CSS selectors in addition to placeholder >CSS.

Note that the CSS in %equal-heights isn’t generated, because %equal-heights is never extended.

Operators

Doing math in your CSS is very helpful. Sass has a handful of standard math operators like + , — , * , / , and % . In our example we’re going to do some simple math to calculate widths for an aside & article .

SCSS Syntax

Sass Syntax

CSS Output

We’ve created a very simple fluid grid, based on 960px. Operations in Sass let us do something like take pixel values and convert them to percentages without much hassle.

  • Current Releases:
  • Dart Sass1.23.3
  • LibSass3.6.3
  • Ruby Sass вљ°
  • Implementation Guide

Sass © 2006–2020 Hampton Catlin, Natalie Weizenbaum, Chris Eppstein, Jina Anne, and numerous contributors. It is available for use and modification under the MIT License.

Препроцессор Sass. Полное руководство и зачем он нужен

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

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

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

Синтаксис

Для Sass доступно два синтаксиса. Первый, известный как SCSS (Sassy CSS) и используемый повсюду в этой статье — это расширенный синтаксис CSS. Это означает, что каждая валидная таблица стилей CSS это валидный SCSS файл, несущий в себе туже самую логику. Более того, SCSS понимает большинство хаков в CSS и вендорные синтаксисы, например такой как синтаксис фильтра в старом IE. Этот синтаксис улучшен Sass функционалом описанным ниже. Файлы использующие этот синтаксис имеют .scss расширение.

Второй и более старый синтаксис, также известный как краёный синтаксис или иногда просто Sass, даёт более сжатую возможность работы с CSS. Он использует отступы вместо скобок, что отделить вложения селекторов и новые строки вместо точек с запятой для разделения свойств. Иногда люди находят такой способ проще для понимания и быстрее для написания, чем SCSS. По факту, такой синтаксис имеет тот же функционал, хотя некоторые из них имеют слегка другой подход. Файлы используемые этот синтаксис имеют расширение .sass .

Любой синтаксис может импортировать файлы, написанные в другом. Файлы могут быть автоматически сконвертированы из одного в другой, используя sass-convert команду:

Использование Sass

Sass может быть использован тремя способами: как командной строкой, как отдельный модуль Ruby и как плагин для rack-фреймворка, включая Ruby on Rails и Merb. Первым делом для всего этого надо установить Sass гем:

Если вы на Windows, то возможно вам надо установить сначала Ruby.

Для запуска Sass из командной строки просто используйте:

sass input.scss output.css

Вы также можете указать Sass следить за файлом и обновлять CSS каждый раз, когда Sass файл меняется:

sass —watch input.scss:output.css

Если у вас есть директория с множеством Sass файлов, то вы также можете указать Sass следить за всей директорией:

sass —watch app/sass:public/stylesheets

Используйте sass —help для полной документации.

Переменные языка SASS

В языке SASS переменные должны начинаться со знаками доллара («$«). Двоеточие после переменной означает присваивание переменной какого-то значения, в выходном CSS-е это не будет отображено. Если после переменной нет двоеточия, то это говорит препроцессору заменить в выходном CSS-е переменную ее значением.

На видимость переменных влияет уровень вложенности селекторов. Если переменная определена вне каких-либо вложенных селекторов, она видна везде. Переменная может быть определена с !global (использование !global это плохая практика усложняющая поддержку проекта), и в этом случае она также будет видна везде. Например:

$width : 5em !global ;

// переменная $width определена на уровне селектора #main и без флага !global была бы не видна в селекторе #sidebar

В языке sass имена переменных и все другие идентификаторы, как дефисы, так и нижнее подчеркивание являются взаимозаменяемыми. Например, если вы определяете переменную $main-w >$main_width, и наоборот.

Типы данных языка SASS

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

    1 numbers — числовый тип, включает в себя все цифровые обозначения которые встречаются в CSS. Данный тип может быть представлен в px, %, em, rem.

Примеры данного типа: 1.2, 3, 10px;

  • 2 strings — текстовый тип с кавычками и без «foo», ‘foo’, foo;
  • 3 colors — цветовой тип. Включает в себя зарезервированные слова обозначающие цвет (blue, red и тд), шестнадцатиричное обозначение цвета (#04a3f9), обозначение цвета в формате rgb (rgba(255, 0, 0, 0.5));
  • 4 booleans — логический тип (true, false). Данный тип тспользуется вкупе с управляющей конструкцией @if.
  • 5 nulls — не определенная переменная. Данный тип практически не используется. В объектно-ориентированном программировании он нужен для того, чтобы ввести переменную, а после в каком-либо классе задавать (правильнее менять) ее тип. Подразумевается, что в разных классах тип данной переменной будет разным. Через nulls ее просто вводят. В sass-е я ни разу не видел, чтобы это использовалось. При интерполяции переменная которая имеет значение nulls не будет выведена, насколько это полезно решайте сами.
  • 6 lists — списки значений, разделенных пробелами или запятыми — данный тип как правило используется для задания семейства шрифтов. Возможно для задания значений в margin-ах или padding-ах, но это редко, для этого используется тип numbers.

    Примеры данного типа: 1.5em 1em 0 2em, Helvetica, Arial, sans-serif.

    7 maps — карты от одного значения к другому. Данный тип по сути очень похож на объект в javascript.

    Пример данного типа: (key1: value1, key2: value2).

    Числовой тип языка SASS (numbers)

    Как видно из названия данного типа, это любые числа которые встречаются в CSS-e. Числа — это единицы измерения, и данный тип служит для определения единиц измерения. Это px, %, em, rem. Перед выводом данного типа в выходной CSS, сначало выполняются математические действия (+, , *, /), и в выходной CSS выводится уже готовый результат. Строчка margin: 14px (20px+30px)/2px-5px будет преобразована в margin: 14px 20px. Любое из этих чисел можно вынести в переменную, результат будет тем же.

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

    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 месяца

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