SCSS — немного практики, часть I
Статей про SASS ( SCSS ), Less на хабрахабре уже полно, но на мой взгляд не хватает такой, в которой было бы немного реальной практики. Я постараюсь восполнить этот пробел. Около года назад одна из SASS -статей меня «зацепила», и с тех пор я полюбил эту технологию настолько, что ручной набор обычного CSS кода представляется мне лишней тратой времени. Сия статья посвящается тем верстальщикам (или web-программистам), которые про SCSS ещё не слышали, или же ещё не пробовали в деле. Более опытным товарищам, полагаю, в ней ловить нечего.
Что такое SCSS
SCSS — «диалект» языка SASS. А что такое SASS? SASS это язык похожий на HAML (весьма лаконичный шаблонизатор), но предназначенный для упрощения создания CSS-кода. Проще говоря, SASS это такой язык, код которого специальной ruby-программой транслируется в обычный CSS код. Синтаксис этого языка очень гибок, он учитывает множество мелочей, которые так желанны в CSS. Более того, в нём есть даже логика (@if, each), математика (можно складывать как числа, строки, так и цвета). Возможно, некоторые возможности SCSS покажутся вам избыточными, но, на мой взгляд, лишними они не будут, останутся «про запас».
Отличие SCSS от SASS заключается в том, что SCSS больше похож на обычный CSS код. Пример SASS-кода:
И то же самое на SCSS:
Я выбрал SCSS в виду того, что он проще для восприятия коллегам с ним ещё не знакомым. Ещё стоило бы отметить что обычный CSS код вполне вписывается в SCSS синтаксис.
Установка и использование
Для начала нужно установить ruby. После чего нужно установить sass-gem ( gem install sass в консоли ). Если всё прошло гладко, то теперь вам доступна консольная программа sass . О всех нюансах её использования вы можете прочесть здесь ― sass —help . Я расскажу лишь о двух базовых возможностях:
—watch
Если запустить sass с ключом —watch , то программа будет следить за указанными вами файлами. В случае их изменения, она автоматически пересоберёт все необходимые css-файлы (не все вообще, а только связанные с изменёнными).
Предположим, что у вас есть следующая структура проекта:
Необходимо чтобы sass отслеживал все изменения в css/scss/* и результат сохранял в css/*.css . В таком случае запускаем sass так ― sass —watch css/scss:css/. . Т.е. sass —watch [что]:[куда] .
—update
Если вам нужно единожды обновить css-файлы, то в место —watch применяем —update . Никакой слежки проводится не будет, так же как и проверок на необходимость обновления.
Стоит отметить, что в отличии от Less , SASS не умеет компилировать свой код прямо в браузере. На мой взгляд, такой подход (компиляция на сервере или ПК-верстальщика) является единственно верным.
Практика
Итак, мы подошли к самому главному. Начнём с @import .
import
Изначально, до использования SCSS, весь CSS код движка, с которым мне по долгу службы приходится работать, находился в 1-ом огромном style.css файле. Моя IDE (Netbeans (кстати, вот плагин для подсветки синтаксиса)) работала с ним с существенными тормозами. Разбивать же его на множество файлов поменьше, и, при необходимости, склеивать их в 1 ― никто не хотел. SCSS решает этот вопрос автоматически.
Стоит отметить 1 нюанс. Если скормить sass не конкретный файл-источник, а директорию, то css файлы не будут генерироваться для файлов начинающихся с _ . Т.е. наличие файла style.scss приведёт к созданию style.css , а наличие файла _some.scss ― нет.
Итак, для того, чтобы включить содержимое файла _template.scss или template.scss пишем
В конечном счёте, вместо 1-го большого style.css файла у меня получилось более сотни мелких scss -файлов. С первого взгляда может показаться, что такое количество слишком велико и приведёт к страшным мукам. Однако, нужный мне файл я нахожу сразу исходя из удобной структуры каталогов. К тому же, я полагаю, что благодаря кешированию такая «схема» более производительна.
@вложенность
Одна из самых желанных «фич» для CSS ― вложенность селекторов. Пример:
Символ & равносилен родительскому селектору. Допустим тег <body> у нас имеет класс ie_7 , в случае если в качестве обозревателя у нас Internet Explorer 7 . Следующий код позволяет избавиться от всех «хаков» и спец.комментариев:
$variables
Переменные ― удобная штука. Определяются они так:
Переменные ― не константы, их можно менять по ходу кода 🙂 Одна из первых моих мыслей вылилась в _const.scss файл, который заключает в себе все базовые цвета, размеры шрифтов и пр.
Предполагается, что цвет ссылок на сайте ― $link .
Если в дальнейшем выяснится, что цвет ссылок изменился ― достаточно поменять 1 переменную (в случае CSS нужно было бы пройтись авто-заменой по файлам, возможно даже выборочно). Предположим, что внезапно выясняется, что в некотором модуле contacts , цвет ссылок другой. Есть, как минимум, два пути решения.
Переменные у нас не типизированные, поэтому с равным успехом могут содержать строки, числа и цвета.
@математика
Разделим математику на 2 категории ― цвета и числа. Начнём с чисел. Простой пример:
При желании можно и padding с border-ом задавать переменными. Всё зависит от сложности вёрстки.
Хочу отметить, что подобного рода манипуляции применяются очень часто. Без них я как без ног.
А теперь цвета. Цвета можно складывать, перемножать:
Довольно удобная штука, когда лень подбирать цвета. Также доступны такие функции как opacify и transparentize (более подробно).
@строки
SASS умеет складывать строки, а также поддерживает конструкцию #<>
Полагаю, что наибольшее применение операциям над строками можно найти в @миксинах и переменных, указывающих пути к изображениям и пр.
Статья
В виду того, что статья получилась довольно объёмной, я решил разбить её на 2 части. В следующей статье я рассмотрю (синтаксис и область применения):
@import
Sass extends CSS's @import rule with the ability to import Sass and CSS stylesheets, providing access to mixins, functions, and variables and combining multiple stylesheets' CSS together. Unlike plain CSS imports, which require the browser to make multiple HTTP requests as it renders your page, Sass imports are handled entirely during compilation.
Sass imports have the same syntax as CSS imports, except that they allow multiple imports to be separated by commas rather than requiring each one to have its own @import . Also, in the indented syntax, imported URLs aren’t required to have quotes.
⚠️ Heads up!
The Sass team discourages the continued use of the @import rule. Sass will gradually phase it out over the next few years, and eventually remove it from the language entirely. Prefer the @use rule instead. (Note that only Dart Sass currently supports @use . Users of other implementations must use the @import rule instead.)
What’s Wrong With @import ?
The @import rule has a number of serious issues:
@import makes all variables, mixins, and functions globally accessible. This makes it very difficult for people (or tools) to tell where anything is defined.
Because everything’s global, libraries must prefix to all their members to avoid naming collisions.
@extend rules are also global, which makes it difficult to predict which style rules will be extended.
Each stylesheet is executed and its CSS emitted every time it’s @import ed, which increases compilation time and produces bloated output.
There was no way to define private members or placeholder selectors that were inaccessible to downstream stylesheets.
The new module system and the @use rule address all these problems.
How Do I Migrate?
We’ve written a migration tool that automatically converts most @import -based code to @use -based code in a flash. Just point it at your entrypoints and let it run!
SCSS Syntax
Sass Syntax
CSS Output
When Sass imports a file, that file is evaluated as though its contents appeared directly in place of the @import . Any mixins, functions, and variables from the imported file are made available, and all its CSS is included at the exact point where the @import was written. What’s more, any mixins, functions, or variables that were defined before the @import (including from other @import s) are available in the imported stylesheet.
⚠️ Heads up!
If the same stylesheet is imported more than once, it will be evaluated again each time. If it just defines functions and mixins, this usually isn’t a big deal, but if it contains style rules they’ll be compiled to CSS more than once.
Finding the File permalink Finding the File
It wouldn’t be any fun to write out absolute URLs for every stylesheet you import, so Sass’s algorithm for finding a file to import makes it a little easier. For starters, you don’t have to explicitly write out the extension of the file you want to import; @import "variables" will automatically load variables.scss , variables.sass , or variables.css .
⚠️ Heads up!
To ensure that stylesheets work on every operating system, Sass imports files by URL , not by file path. This means you need to use forward slashes, not backslashes, even when you’re on Windows.
Load Paths permalink Load Paths
All Sass implementations allow users to provide load paths: paths on the filesystem that Sass will look in when resolving imports. For example, if you pass node_modules/susy/sass as a load path, you can use @import "susy" to load node_modules/susy/sass/susy.scss .
Imports will always be resolved relative to the current file first, though. Load paths will only be used if no relative file exists that matches the import. This ensures that you can’t accidentally mess up your relative imports when you add a new library.
�� Fun fact:
Unlike some other languages, Sass doesn’t require that you use ./ for relative imports. Relative imports are always available.
Partials permalink Partials
As a convention, Sass files that are only meant to be imported, not compiled on their own, begin with _ (as in _code.scss ). These are called partials, and they tell Sass tools not to try to compile those files on their own. You can leave off the _ when importing a partial.
Index Files permalink Index Files
If you write an _index.scss or _index.sass in a folder, when the folder itself is imported that file will be loaded in its place.
SCSS Syntax
Sass Syntax
CSS Output
Custom Importers permalink Custom Importers
All Sass implementations provide a way to define custom importers, which control how @import s locate stylesheets:
Node Sass and Dart Sass on npm provide an importer option as part of their JS API.
Dart Sass on pub provides an abstract Importer class that can be extended by a custom importer.
Ruby Sass provides an abstract Importers::Base class that can be extended by a custom importer.
Nesting permalink Nesting
Imports are usually written at the top level of a stylesheet, but they don’t have to be. They can nested within style rules or plain CSS at-rules as well. The imported CSS is nested in that context, which makes nested imports useful for scoping a chunk of CSS to a particular element or media query. Note that top-level mixins, functions, and variables defined in the nested import are still defined globally, though.
SCSS Syntax
Sass Syntax
CSS Output
�� Fun fact:
Nested imports are very useful for scoping third-party stylesheets, but if you’re the author of the stylesheet you’re importing, it’s usually a better idea to write your styles in a mixin and include that mixin in the nested context. A mixin can be used in more flexible ways, and it’s clearer when looking at the imported stylesheet how it’s intended to be used.
⚠️ Heads up!
The CSS in nested imports is evaluated like a mixin, which means that any parent selectors will refer to the selector in which the stylesheet is nested.
SCSS Syntax
Sass Syntax
CSS Output
Importing CSS permalink Importing CSS
LibSass supports importing files with the extension .css , but contrary to the specification they’re treated as SCSS files rather than being parsed as CSS. This behavior has been deprecated, and an update is in the works to support the behavior described below.
In addition to importing .sass and .scss files, Sass can import plain old .css files. The only rule is that the import must not explicitly include the .css extension, because that’s used to indicate a plain CSS @import .
SCSS Syntax
Sass Syntax
CSS Output
CSS files imported by Sass don’t allow any special Sass features. In order to make sure authors don’t accidentally write Sass in their CSS , all Sass features that aren’t also valid CSS will produce errors. Otherwise, the CSS will be rendered as-is. It can even be extended!
Plain CSS @imports permalink Plain CSS @import s
By default, LibSass handles plain CSS imports correctly. However, any custom importers will incorrectly apply to plain- CSS @import rules, making it possible for those rules to load Sass files.
Because @import is also defined in CSS , Sass needs a way of compiling plain CSS @import s without trying to import the files at compile time. To accomplish this, and to ensure SCSS is as much of a superset of CSS as possible, Sass will compile any @import s with the following characteristics to plain CSS imports:
- Imports where the URL ends with .css .
- Imports where the URL begins http:// or https:// .
- Imports where the URL is written as a url() .
- Imports that have media queries.
SCSS Syntax
Sass Syntax
CSS Output
Interpolation permalink Interpolation
Although Sass imports can’t use interpolation (to make sure it’s always possible to tell where mixins, functions, and variables come from), plain CSS imports can. This makes it possible to dynamically generate imports, for example based on mixin parameters.
SCSS Syntax
Sass Syntax
CSS Output
Import and Modules permalink Import and Modules
Only Dart Sass currently supports @use . Users of other implementations must use the @import rule instead.
Sass’s module system integrates seamlessly with @import , whether you’re importing a file that contains @use rules or loading a file that contains imports as a module. We want to make the transition from @import to @use as smooth as possible.
Importing a Module-System File permalink Importing a Module-System File
When you import a file that contains @use rules, the importing file has access to all members (even private members) defined directly in that file, but not any members from modules that file has loaded. However, if that file contains @forward rules, the importing file will have access to forwarded members. This means that you can import a library that was written to be used with the module system.
⚠️ Heads up!
When a file with @use rules is imported, all the CSS transitively loaded by those is included in the resulting stylesheet, even if it’s already been included by another import. If you’re not careful, this can result in bloated CSS output!
Import-Only Files permalink Import-Only Files
An API that makes sense for @use might not make sense for @import . For example, @use adds a namespace to all members by default so you can safely use short names, but @import doesn’t so you might need something longer. If you’re a library author, you may be concerned that if you update your library to use the new module system, your existing @import -based users will break.
Как подключить SCSS
SCSS это код, который очень похож на CSS, но чтобы он работал, нужно через специальную RUBY программу конвертировать в обычный CSS.
У SCSS есть масса полезных штуковин, к примеру переменные. Допустим у вас есть основные цвета и отступы на сайте, все что вам нужно, так задать их в переменные
Как вы уже заметили, можно использовать вложения, т.е. как видно на примере, мы задали блоку .content отступ и внутри блока заголовок h3 будет зеленого цвета
Так же в языке SCSS есть такие штуки как : Циклы, условия, математика
По началу может показаться, что все это сложно и вам не нужно, но если вы разок поработаете с SCSS, уже будет трудно отказаться! Ближе с синтаксисом вы можете ознакомиться на официальном сайте
Как начать работать с SCSS?
Для начало вам нужно установить RUBY, по этому переходим на сайт и жмем на большую красную кнопку download. Открываете инсталятор и все время кликаете next. Главное учесть, что в одном из пунктов, он предложит установить переменную, чтобы можно было работать в консоле (cmd) , это важно, если галочку не поставите, то переменную потом придется ставить вручную!
После установки ruby, нужно открыть консоль (Открыть run (window + R) , написать cmd и нажать enter), откроется черное окошко, где надо написать gem install sass и нажать enter, дальше установим framework compass ( В дальнейшем он вам понадобиться ) gem install compass
Если все прошло гладко, то в этом же окошке так и будет написано (Successfully installed)
Все самое необходимое уже сделали
Теперь вы можете создавать файлы с типом .scss и начать писать стили, но как их потом компилировать в обычный css?
Использовать IDE
В основном у всех IDE, уже есть встроенный функционал, программа за вас создаст файл и при сохранении скомпилирует в обычный css
Использовать командую строку
Если вы тру кодер и используете предположим блокнот для работы, то вы можете использовать командную строку для конвертирования и даже для отслеживания изменений в файле. Чтобы инициировать папку для scss, в консоле нужно написать:
Для того чтобы начать отслеживание и автоматически перебирала все css файлы, нужно написать:
Использовать программу помощник Koala
Koala — Это программа, которая делает все тоже самое, что и команды в консоле, только для удобства сделали графический интерфейс, где вы наглядно и даже не трогая клавиатуру, можете указать путь к рабочей папке, отслеживать изменения и компилировать ваши scss файлы.
Основные преимущества SCSS
Вложенность
Вот и все! Если у вас остались вопросы, пишите в комментариях! Так же можете почитать о кнопках поделиться в социальных сетях
Препроцессор 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 для полной документации.
Селекторы
CSS vs. SCSS селекторы.
CSS отрывок выше, может быть написан в SCSS таким образом:
Как мы можем видеть, SCSS структура более схожа с DOM структурой. Это позволяет нам организовать наш CSS более эффективно. Вот примеры:
Будет скомпилировано в:
Ссылаясь на родительский селектор:
& будет заменен родительским селектором. То есть код выше, будет эквиалентен:
Импорты
Нормальный импорт.
Частичный
Если вы не хотите компилировать SCSS файл как CSS, вы можете использовать “ _ ” перед названием файла.
Вложенные импорты:
Если demo.scss включает в себя:
Будет скомпилировано в
Переменные
SCSS переменные начинаются с символа $.
Будет скомпилировано в:
Переменные доступны только внутри уровня вложенного селектора где они объявляются. Если вы хотите хотите, чтобы переменная была доступна за пределами скоупа, то вам нужно добавить к ней !global
Вы можете указывать переменные в отдельном файле и вы можете импортировать этот scss файл, чтобы использовать эти переменные. Это как конфиг файл для вашего проекта. Если вы меняете значение переменных, то оно будет изменено везде, где вы его используете. Это очень эффективно для больших проектов. Мы увидим это чуть позже.
Вы также можете производить разные операции в SCSS. Для примера:
Вставка: #<>
Вы можете использовать переменные в свойствах имен и значения, используя #<> . Для примера:
Управляющие директивы
@while
Миксины
Миксины позволяют вам определять стили, которые могут быть переиспользованы на протяжении всей таблицы стилей. Вы можете думать о миксинах, как о функциях в каком-либо другом языке програмирования. Вы можете передавать переменные, также как в функциях любого другого языка програмирования. В SCSS миксины возврашают набор CSS правил. Вы можете использовать миксины так @include имя-миксина, определенное директивной @mixin .
Рассмотрите следующий пример:
Вы также можете использовать составные миксины, например как:
Вы также можете передавать переменные в миксинах:
Будет скомпилено в:
Функции
Вы также можете определять функции, возвращающие значение. Для примера.
Будет скомпилировано в:
Расширения
Вы столкнетесь с ситуацией, когда вам нужно будет переиспользовать стили. Рассмотрите следующий пример:
Оба будут иметь одинаковые стили, кроме цвета.
Это будет скомпилировано в:
Вы также можете связывать расширения и использовать несколько расширений в одном CSS селекторе.
Если вы не хотите, чтобы директива расширения была скомпилена в CSS, вы можете использовать % перед селектором.