Как сохранять в CSS переменных цвета и объединить с ними функции SASS


Содержание материала:

Основы Sass: Функции

Недавно я написал статью, посвященную основам Sass, в частности, миксинам. На этот раз поговорим о директиве @function.

Что делает функция

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

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

Функция или миксин

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

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

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

Как создать функцию

Функция в Sass создается с помощью директивы @function. За ней следует имя функции и любые аргументы, заключенные в скобки.

Помните, что функция должна возвращать значение, поэтому мы должны вызвать @return, чтобы задать значение, возвращаемое функцией. Также обратите внимание, что функция может использовать любые глобально определенные переменные. Функция col-pct вычисляет размер в процентах от указанного количества столбцов. Я также использовал встроенную функцию Sass unquote, чтобы убрать кавычки из возвращаемого значения. Sass содержит набор встроенных функций, которые вы можете посмотреть здесь.

Как использовать функцию

Функция вызывается по имени с указанием аргументов. Например, используем функцию col-pct для вычисления размера шести столбцов:

Аргументы

Мы уже видели, что функция может использовать глобальные переменные. Также в функции можно передавать аргументы, подобно миксинам. Конечно, аргументы должны быть перечислены в правильном порядке. Давайте модифицируем функцию remy и добавим еще один аргумент $rembase:

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

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

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

Этот пример будет работать корректно.

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

Также мы можем использовать в функциях значения аргументов по умолчанию. Чтобы еще улучшить функцию remy, можно добавить значение по умолчанию для параметра $rembase.

Мы можем вызвать эту функцию один из способов:

Оба эти примера будут работать, но значение $rembase в них будет разное.

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

Функции позволяют передавать переменное число аргументов. Миксин pad из предыдущей статьи может быть реализован в виде функции:

Заключение

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

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

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

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

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

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

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

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

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

ЧУТЬ ЛУЧШЕ

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

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

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

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

Изучаем SASS: руководство для новичка

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

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

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

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

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

Доступны два основных варианта: SASS и LESS . В данной статье, я расскажу о SASS .

Недостатки CSS

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

Давайте рассмотрим слабые места использования « чистого » CSS:

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

Преимущества использования препроцессоров

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

Взгляните теперь на список преимуществ использования препроцессоров:

  • Они позволяют вам использовать переменные, которые могут быть повторно использованы внутри таблицы стилей;
  • Более продуманный и функциональный синтаксис, который предоставляет дополнительные возможности, которых нет в « чистом » CSS;
  • Скомпилированные CSS-файлы загружаются на рабочий веб-сервер.

Что такое SASS?

SASS расшифровывается как Syntactically Awesome Style Sheets – если переводить дословно, то это звучит как: « Синтаксически потрясающие таблицы стилей ».

Эта технология была придумана и воплощена Хэмптоном Катлином ( Hampton Catlin ). SASS манипулирует CSS-правилами, используя переменные, так называемые миксины ( mixins ), наследование и вложенность.

Исходные и скомпилированные файлы имеют расширения .sass и .scss , соответственно. Исходники переводятся в хорошо отформатированный CSS-код с помощью командной строки или веб-плагина.

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

Формат .sass против .scss

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

CSS-код

Для исходного примера я использовал тег header и присвоил нулевое значение свойствам margin и padding , а затем прописал белый цвет для свойства color :

Формат .scss (новый синтаксис SASS)

Чтобы написать приведенный выше пример в формате .scss , мы будем использовать переменную $color и дадим ей шестнадцатеричное значение: #fff , которое соответствует белому цвету.

Далее, вместо того, чтобы по правилам CSS присвоить свойству color значение #fff , мы используем переменную $color , которую определим в начале кода:

Формат .sass (старый синтаксис SASS)

Для .sass мы имеем такую же переменную и значение, как и для .scss , но точки с запятой и фигурные скобки не используются.

Заметьте, что синтаксис зависим от абзацев. Это старый формат SASS :

Вот что вам понадобится для успешного завершения практики по данной статье:

  • Инсталлятор Ruby;
  • Текстовый редактор;
  • Время и терпение.

Установка Ruby

Чтобы опробовать SASS , вам нужно скачать Ruby . Запустите программу установки и, выбрав в появившемся окне подходящий язык интерфейса, нажмите OK :

Затем поставьте отметку о том, что вы согласны с условиями лицензии и нажмите « Далее ».

После этого, произведите установку в желаемое место на жестком диске и убедитесь, что выбрана радио-кнопка « Add Ruby executables to your PATH ». Нажмите кнопку « Install » и установка завершена:

Проверка правильности запуска Ruby

Теперь, у вас на компьютере установлен Ruby и пришло время проверить его работоспособность. Откройте командную строку и введите ruby -v .

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

Установка SASS

Чтобы установить SASS , откройте командную строку и введите gem install sass , после этого вы должны получить сообщение об успешном окончании установки:

Подготовка необходимых файлов

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

Создайте новую папку (для данной статьи, я расположил эту папку на своем рабочем столе) и назовите её, например, SASS или как вам будет угодно. Внутри папки SASS , создайте HTML-файл, дав ему имя index.html .

Поместите в него следующий код:

Теперь, для файла SASS , создайте пустой файл в предпочитаемом вами текстовом редакторе и назовите его style.scss .

Если вы точно следовали всем шагам, то на данный момент у вас будет следующая структура файлов:

Конвертация SASS-кода в CSS

Чтобы преобразовать код SASS в CSS, мы будем использовать команду – watch , которая выполнит компиляцию.

Также, эта команда просканирует папки на наличие изменений. Давайте попробуем сконвертировать SASS -файл в CSS-файл. Но сначала нам нужно расположить код в файле ourstyle.scss , чтобы убедиться, что все работает.

Скопируйте и вставьте следующий SASS -код в файл stye.scss , созданный вами в папке SASS :

Далее, откройте командную строку и перейдите в директорию, где вы расположили ваши файлы. В моем случае это папка на рабочем столе, поэтому я ввожу cd « Desktop «:

Теперь, находясь в папке рабочего стола, введите sass –watch Sass:Sass :

Используя команду – watch , сконвертируем все .scss -файлы в папке SASS . Также, файлы будут просканированы на наличие в них изменений. Заметьте, что в команде два слова SASS , разделенные двоеточием.

Первое слово представляет текущее положение файла .scss , а второе – расположение выходного файла. Убедитесь, что вы подключили сконвертированный CSS-файл к вашей HTML-странице:

Использование переменных

Переменные SASS объявляются с предваряющим их название символом $ и записываются аналогично CSS-свойствам. С помощью SASS , вы можете определять переменные для таких стилей, как font size , margin , padding и так далее.

Использование переменных дает вам возможность повторного использования заданных ранее значений.

В SASS существует шесть разных типов переменных:

  • Строковые (например, $myString: “здесь ваш текст”;);
  • Числовые (например, $myNum: 10px;);
  • Цветовые (например, $myColor: white;);
  • Логические (например, $myBool: true;);
  • Списковые (например, $myItemList: 1px sol >Тип null – значение отсутствует (например, $myVar: null;).

Давайте опробуем эти типы на практике. Откройте файл style.scss и добавьте в него следующий код:

Запустив этот код в браузере, вы получите следующее:

Вложенность

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

В качестве примера, рассмотрим следующий код:

Для SASS , код будет выглядеть следующим образом:

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

Если вы запустите этот код в браузере, то увидите следующую картину:

Миксины (Mixins)

Миксины позволяют вам определять общие свойства, а затем использовать их повторно, то есть это реализация наследования. Миксины определяются с помощью директивы @mixin и включают в себя блок кода, который затем можно использовать с помощью директивы @include .

Топ-пост этого месяца:  Данные о вовлеченности российских пользователей в социальные медиа

Давайте попрактикуемся. Скопируйте приведенный ниже код в свой файл style.scss :

Как вы можете видеть, мы использовали директиву @mixins , чтобы создать стиль для свойства border , а затем включили его в стиль идентификатора container с помощью директивы @include .

Если вы запустите данный код в браузере, то увидите следующее:

Операторы

Возможность выполнения математических операций, это одно из преимуществ препроцессоров наподобие SASS , которым не обладает « чистый » CSS. Благодаря этой возможности, вы можете создавать более сложный и динамичный код.

Давайте посмотрим, как это работает. Откройте свой файл style.scss и вставьте в него код, представленный ниже:

Как видите, мы выполнили некоторые математические вычисления, добавив 30px к значению свойства padding , а также увеличили толщину border на 5px.

Если вы запустите этот пример в браузере, то увидите следующую картину:

Функции

SASS также имеет в своем арсенале различные функции. Отличным примером являются цветовые функции.

Взгляните на их список ниже:

  • darken(color, amount);
  • lighten(color, amount);
  • saturate(color, amount);
  • desaturate(color, amount);
  • alpha(color).

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

А сейчас, мы рассмотрим несколько практических примеров с использованием перечисленных выше функций.

Откройте свой файл style.scss и вставьте туда следующий код:

Результатом этого примера будет затемнение цвета в переменной $myBackground на 20% с помощью соответствующей функции. Далее, в этом же примере, заголовки H1 и H2 осветляются на 40% соответствующей функцией.

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

Настройка форматирования скомпилированных стилей в SASS

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

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

Вложенный формат (Nested Format)

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

Чтобы увидеть его в действии, скопируйте и вставьте код, приведенный ниже в свой файл style.scss , а затем откройте командную строку и убедившись, что вы внутри директории SASS , введите SASS –update style.scss .

Эта команда обновит форматирование для уже скомпилированных CSS-стилей через командную строку:

После этого откройте файл style.css и обратите внимание на появившиеся отступы:

Расширенный формат (Expanded Format)

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

Давайте посмотрим это в действии.

Используя код, приведенный выше, откройте командную строку и введите sass –update style.scss –style expanded . Как можно заметить, мы добавили опцию –style , использующуюся для перекомпиляции CSS-файла в другое форматирование:

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

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

Компактный формат (Compact Format)

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

Добавляются пробелы между фигурными скобками, но свойства располагаются на одной строке.

Чтобы увидеть этот формат в действии, используя предыдущий пример, откройте командную строку и наберите команду sass –update style.scss –style compact :

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

Компрессированный формат (Compressed Format)

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

Чтобы увидеть, как выглядит этот формат, в командной строке наберите sass –update style.scss –style compressed :

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

Заключение

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

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

Это поможет вам очень быстро создавать профессиональные сайты. Надеюсь, статья была вам полезна!

Данная публикация представляет собой перевод статьи « Learning SASS: A Beginner’s Guide to SASS » , подготовленной дружной командой проекта Интернет-технологии.ру

Как объявить глобальную css переменную в sass?

Владимир Проскурин,
«Гибкость» цсс- оно как гибкость лома.
Очень ненужная вещь

И даже в кейсе с созданием «тем» для сайта — они имеют слабое применение, тк «тема» не может отличаться только цветами

тк «тема» не может отличаться только цветами

Error: Properties are only allowed within rules, directives, mixin includes, or other properties. If «:root» should be a selector, use «\:root» instead.

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 для наглядности.

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

    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 от А до Я

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

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

Упрощаем разработку CSS при помощи Sass

Объедините возможности программирования с гибкостью

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

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

Синтаксис Sassy CSS (SCSS) является расширением CSS3; любой код SCSS является работоспособным кодом CSS. Все примеры этой статьи написаны на SCSS.

Почему Sass

Синтаксис Sass
  • SCSS – наиболее распространенный синтаксис, являющийся расширением синтаксиса CSS.
  • .sass – старый синтаксис, в котором вложенные элементы реализованы с помощью отступов.

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

CSS-препроцессоры обладают всеми функциями, необходимыми для любой среды Web-разработки. Они позволяют:

  • Сократить время разработки.
  • Реализовать принцип DRY (Don’t Repeat Yourself – не повторяйся) при разработке CSS.
  • Сделать ваш код более чистым и понятным.

Существует множество технологий предварительной обработки CSS. В этой статье мы остановили свой выбор на Sass из-за его гибкости и широты возможностей.

Инсталляция Sass

Основная реализация Sass выполнена на Ruby, хотя существуют и другие реализации. Первый шаг заключается в инсталляции Sass через его компоненты Ruby.

  1. Загрузите и инсталлируйте Ruby, если он еще не установлен в вашей системе.
    • Для пользователей Windows: загрузите установщик Ruby для Windows (EN).
    • Для пользователей Mac OS X: Ruby уже установлен в вашей операционной системе.
    • Для пользователей Linux: установите Ruby с помощью любого менеджера пакетов.
  2. Инсталлируйте gem-пакет Ruby Sass при помощи команды gem install sass .

Подготовка рабочей среды Sass

Создайте файл с расширением .scss в любом текстовом редакторе. Поддержка синтаксиса Sass (выделение цветом различных фрагментов кода) различна в разных текстовых редакторах; список редакторов вы найдете в разделе Ресурсы.

Скопируйте код из листинга 1 и вставьте его в созданный scss-файл.

Листинг 1. Пример кода Sass

Язык Sass является расширением CSS3. В Sass версии 3.2.1 любой рабочий код CSS является также рабочим кодом Sass. Пример такого кода приведен в листинге 1. Тем не менее, код Sass из листинга 1 необходимо преобразовать в CSS, иначе Web-браузеры не смогут корректно воспринимать таблицу стилей. Вместо того чтобы постоянно преобразовывать Sass в CSS вручную с помощью команды sass-convert , мы настроим Sass на автоматическую конвертацию sass-файла в CSS при его сохранении. Для того чтобы Sass постоянно отслеживал нужный файл, выполните в командной строке команду из листинга 2.

Листинг 2. Отслеживание файла

Можно также настроить Sass на отслеживание всей директории, как показано в листинге 3.

Листинг 3. Отслеживание директории

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

Переменные

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

Листинг 4. Определение цвета элементов в CSS

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

Листинг 5. Листинг 5. Определение цвета элементов в Sass

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

Модули

Код CSS можно с легкостью разбить на отдельные модули, которые механизм Sass соберет воедино. При помощи директивы @import можно импортировать модули, как показано в листинге 6. В директиве необходимо указать имя файла, гиперссылку или любой другой путь. В одном документе можно одновременно объединять файлы CSS и SCSS.

Листинг 6. Импорт модулей в Sass

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

Строки и подстановка

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

Листинг 7. Действия со строками и переменными в Sass

В листинге 8 представлен код из листинга 7, сконвертированный в CSS.

Листинг 8. Действия со строками и переменными в CSS

Математические вычисления

В Sass поддерживаются стандартные математические операции с числами, как показано в листинге 9. Можно выполнять простые математические операции со значениями переменных.

Листинг 9. Математические операции с числами в Sass

В листинге 10 представлен код из листинга 9, сконвертированный в CSS..

Листинг 10. Математические операции с числами в CSS

Также поддерживаются математические операции с кодами цветов, как показано в листинге 11.

Листинг 11. Математические операции с кодами цветов в Sass

В листинге 12 представлен код из листинга 11, сконвертированный в CSS.

Листинг 12. Математические операции с кодами цветов в CSS

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

Одной из наиболее востребованных возможностей, отсутствующих в CSS, являются вложенные селекторы (применение стиля к селектору внутри другого селектора). Чтобы создать вложенный селектор в CSS, необходимо повторно указывать родительский селектор для каждого определяемого дочернего селектора. В Sass процесс создания вложенных селекторов упрощен, как видно из листинга 13.

Листинг 13. Вложенные селекторы в Sass

В листинге 14 представлен код из листинга 13, сконвертированный в CSS.

Листинг 14. Вложенные селекторы в CSS

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

Управляющие директивы Sass выстраивают потоки данных и логику в коде CSS. В этом разделе мы рассмотрим основные управляющие директивы – @if, @for и @each.

В Sass поддерживаются базовые функции if/else, которые могут быть скомпилированы в CSS. Рассмотрим листинг 15, где мы хотим сделать цвет link черным (black) во всех случаях, за исключением случаев, когда базовый цвет уже черный. Если базовый цвет уже черный, то мы меняем его на белый. Listing 15. Sass @if example

Листинг 15. Пример директивы @if в Sass

В листинге 16 представлен код из листинга 15, сконвертированный в CSS.

Листинг 16. Пример директивы @if в CSS

Здесь директива @if работает так же, как и в других языках программирования. После оператора @if можно указать несколько операторов @else if и один оператор @else . Если условие @if не выполняется, то предпринимаются попытки поочередного выполнения операторов @else if до тех пор, пока один из них не завершится успехом или пока не будет достигнут блок оператора @else .

Директива @for циклически генерирует набор стилей. В каждой итерации используется переменная-счетчик, как показано в листинге 17.

Листинг 17. Пример директивы @for в Sass

В листинге 18 представлен код из листинга 17, сконвертированный в CSS.

Листинг 18. Пример директивы @for в CSS

Директива @each считывает элементы из указанного списка и генерирует стили с использованием их значений, как показано в листинге 19.

Листинг 19. Пример директивы @each в Sass

В листинге 20 представлен код из листинга 19, сконвертированный в CSS.

Листинг 20. Пример директивы @each в CSS

Функции

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

В Sass имеется множество встроенных функций. Например, функции управления цветом rgb() и darken() , представленные в листинге 21. При помощи этих функций можно изменять оттенок, насыщенность, яркость, прозрачность, масштаб плавности и многие другие свойства цвета. Также вы можете определить собственные функции и использовать их при необходимости.

Листинг 21. Функции в Sass

В листинге 22 представлен код из листинга 21, сконвертированный в CSS.

Листинг 22. Функции в CSS

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

Миксины

Миксины (многократно используемые фрагменты CSS-кода) определяются с помощью директивы @mixin , как показано в листинге 23. В миксинах можно определять шаблоны пар «свойство-значение» и использовать их в других наборах правил. Использование миксинов упрощает код таблиц стилей и делает их удобнее для чтения. По существу, @mixin – это определяемая пользователем функция. Миксины также могут принимать аргументы – это означает, что с помощью небольшого количества миксинов можно создать множество стилей.

Листинг 23. Миксины в Sass

В листинге 24 представлен код из листинга 23, сконвертированный в CSS.

Листинг 24. Миксины в CSS

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

Compass

Compass – это Open Source-инфраструктура для разработки CSS, использующая язык Sass. Доступные для многократного использования шаблоны проектирования (на основе миксинов) позволяют создавать объемные и мощные таблицы стилей. Библиотека основных функций Compass является необходимым инструментом при разработке в Sass.

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

Так же как и Sass, Compass распространяется в виде gem-пакета Ruby. Для инсталляции Compass выполните в командной строке команду gem install compass .

После этого вы сможете использовать определенные в Compass миксины (функции), а также множество встроенных функций, классов и поддерживаемых возможностей CSS3. За дополнительной информацией о Compass обратитесь к разделу Ресурсы.

Заключение

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

Sass не является единственным CSS-препроцессором. Его ближайший конкурент, LESS (см. раздел Ресурсы), также пользуется определенной популярностью. По большому счету, различий между Sass и LESS не так уж много. Основным преимуществом Sass является Compass – расширение, которого нет у LESS. Важно поработать с как можно большим количеством CSS-препроцессоров, чтобы понять, какой из них лучше всего подходит для ваших задач.

Ресурсы для скачивания

Похожие темы

  • Оригинал статьи: Improve CSS development with Sass (EN).
  • Узнайте больше о метаязыке Sass (EN), расширяющем возможности CSS. Изучите вводное руководство, документацию и материалы блога.
  • Текстовые редакторы и поддержка Sass (EN) – ознакомьтесь со списком текстовых редакторов, в той или иной степени поддерживающих синтаксис Sass.
  • Просмотрите полный список функций Sass (EN).
  • Узнайте больше о Compass (EN) – Open Source-инфраструктуре для разработки CSS.
  • Узнайте больше о LESS (EN) – динамическом языке для работы с CSS.
  • Прочитайте статью Уче Огбуджи (Uche Ogbuji) «Расширение возможностей CSS с помощью LESS» (developerWorks, июль 2013 г.), из которой вы узнаете о том, как создавать удобные каскадные таблицы стилей для современных Web-сайтов с помощью языка LESS.
  • Прочитайте статью «Sass vs. LESS» (EN), которая поможет вам выбрать CSS-препроцессор, лучше всего подходящий для ваших задач.
  • Загрузите Sass (EN) и испытайте его в действии.
  • Раздел Web-разработки сайта developerWorks содержит многочисленные материалы, посвященные различным Web-технологиям и решениям на их основе. В разделе Web-разработки нашей технической библиотеки вы найдете технические статьи, советы, руководства, стандарты и документы IBM Redbooks.

Комментарии

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

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

    Полный гайд по 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 — основы

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

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

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

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

    Переменные

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

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

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

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

    SASS для Начинающих: Вложенные стили, Фрагменты, Импорт

    В этом уроке мы рассмотрим одни из наиболее полезных и мощных функций SASS: вложение стилей, фрагментирование и импорт.

    01. Вложенные стили SASS

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

    Например, вот обычный CSS код:

    А с помощью SASS можно создавать нечто подобное:

    Давайте добавим немного HTML, чтобы увидеть вложенные стили в действии.

    Следудующий код представляет собой навигацию, находящуюся внутри “шапки сайта”:

    Вы видите, что наши ссылки расположены в header, внутри nav. Этот код имеет очевидную визуальную иерархию. Давайте зададим стили для всех HTML элементов используя SASS.

    Обратите внимание на правила, вложенные в другие правила:

    А вот как выглядел бы тот же код на нативном CSS:

    Вложение — это отличный способ организации и менеджмента вашего CSS кода.

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

    Потому что то же самое можно сделать с помощью следующего короткого правила:

    02. SASS фрагментирование — Разделение таблиц стилей

    SASS фрагменты позволяют отделать небольшие части кода в отдельные файлы и использовать их позже при необходимости. Их можно импортировать с помощью команды @import и поместить в файл со стилями. С помощью фрагментов проще управлять большим количеством стилей. Если у вас есть отдельные таблицы стилей для header, вы можете назвать их _header.scss. Нижнее подчеркивание в начале дает SASS понять, что файл является фрагментом и может быть импортирован в другую таблицу стилей.

    SASS фрагменты — Пример

    В этот раз мы отделим SASS и CSS файлы в разные папки. Давайте создадим папку sass. Внутри папки sass создайте файл style.scss, который будет нашим основным файлом со стилями. Не нужно создавать папку CSS, так как SASS автоматически создаст ее сам.

    Компиляция SASS в SCSS просходит следующим образом: откройте командную строку (возможно, понадобится открыть командную строку ruby) и вбейте:

    Эта команда компилирует все внутри папки SASS в CSS папку. Вы возможно заметили, что папка CSS создалась автоматически. CSS папка содержит два файла: style.css и style.css.map.

    Теперь создаим новые папки внутри папки SASS: папки header, main и footer.

    1. Внутри папки header создайте фрагмент _header.scss;
    2. В папке main 2 фрагмента _main.scss и _aside.scss;
    3. В папке footer один фрагмент _footer.scss.

    Давайте напишем рандомные CSS правила во все фрагмент-файлы. Если вы сейчас сохранитесь, то ничего не изменится, потому что мы еще не подключили фрагменты к нашей гланой таблице стилей style.scss.

    Использование SASS фрагментов

    Ранее упоминалось, что для подключения SASS фрагментов используется директива @import. В нашем случае style.scss должен выглядеть примерно так:

    Если вы откроете style.css после сохранения всех CSS правил, которые вы записывали в разных файлах, то увидите, что все эти правила компилированы в один CSS код. Это и есть магия SASS фрагментирования.

    03. SASS импортирование

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

    Эта функция также доступна в CSS и позволяет делить CSS код на маленькие части и использовать их при необходимости.

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

    Использование SASS импорта

    Мы уже использовали SASS импорт в предыдущей части урока. Мы испортировали header/_header.scss в нашу таблицу стилей style.scss:

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

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

    Топ-пост этого месяца:  Внутреняя оптимизация
  • Добавить комментарий