Что такое SassСкопировать ссылку
Sass — это препроцессор, прослойка между таблицами стилей, которые вы пишете, и css-файлами, которые вы отдаете браузеру. Sass (сокращение от Syntactically Awesome Stylesheets — Синтаксически Потрясающие Таблицы стилей) заполняет те самые пробелы в языке CSS, позволяя вам писать код по принципу DRY, то есть, быстрее, эффективнее и проще в поддержке.
Краткое описание Sass с сайта технологии:
Итак, пока обычный CSS все еще не позволяет использовать такие вещи как переменные, примеси (mixins — повторяющиеся блоки стилей) и другие плюшки, Sass дает нам такую возможность, и даже больше — делает возможной «суперфункциональность» в дополнение к обычному CSS. Затем он компилирует ваш код в привычный CSS-файл с помощью командной строки или плагинов для фреймворка.
Если быть точнее, Sass — это расширение CSS3, и его SCSS-синтаксис («Sassy CSS»), о котором мы будем говорить — надстройка над CSS3. Это означает, что любой валидный CSS-документ также является валидным SCSS-документом. Возможность «быстро вникнуть» — неотъемлемая часть Sass. Начать использовать синтаксис SCSS легко, более того, вы можете начать использовать его в столь малых дозах, как захотите. Что также означает, что преобразование существующих стилей из CSS в SCSS можно производить поэтапно, по мере того, как вы будете больше узнавать Sass.
Позже, когда вы познакомитесь с Sass поближе, он начнет восприниматься как естественное продолжение CSS, как если бы он заполнил пробелы в существующей спецификации CSS. Именно поэтому, с тех пор, как я начал использовать Sass, я никогда не думал, что это тяжело или трудоемко, он воспринимается просто как CSS. Один раз попробовав, вероятно, вы начнете использовать его постоянно.
Более того, Sass помогает CSS становиться лучше. Некоторые возможности, которые немыслимы сегодня без препроцессоров, уже сейчас дают авторам CSS живую реализацию и поле для экспериментов. Позже, если это будет иметь смысл, конкретные возможности Sass могут серьезно повлиять на спецификации CSS.
Практика
Итак, мы подошли к самому главному. Начнём с .
import
Стоит отметить 1 нюанс. Если скормить sass не конкретный файл-источник, а директорию, то css файлы не будут генерироваться для файлов начинающихся с . Т.е. наличие файла приведёт к созданию , а наличие файла ― нет.
Итак, для того, чтобы включить содержимое файла или пишем
В конечном счёте, вместо 1-го большого файла у меня получилось более сотни мелких -файлов. С первого взгляда может показаться, что такое количество слишком велико и приведёт к страшным мукам. Однако, нужный мне файл я нахожу сразу исходя из удобной структуры каталогов. К тому же, я полагаю, что благодаря кешированию такая «схема» более производительна.
@вложенность
Одна из самых желанных «фич» для CSS ― вложенность селекторов. Пример:
Ещё пример:
Символ равносилен родительскому селектору. Допустим тег <body> у нас имеет класс , в случае если в качестве обозревателя у нас . Следующий код позволяет избавиться от всех «хаков» и спец.комментариев:
$variables
Переменные ― удобная штука. Определяются они так:
Переменные ― не константы, их можно менять по ходу кода 
Одна из первых моих мыслей вылилась в файл, который заключает в себе все базовые цвета, размеры шрифтов и пр.
Предполагается, что цвет ссылок на сайте ― .
Если в дальнейшем выяснится, что цвет ссылок изменился ― достаточно поменять 1 переменную (в случае CSS нужно было бы пройтись авто-заменой по файлам, возможно даже выборочно). Предположим, что внезапно выясняется, что в некотором модуле , цвет ссылок другой. Есть, как минимум, два пути решения.
Первый:
Второй
Переменные у нас не типизированные, поэтому с равным успехом могут содержать строки, числа и цвета.
@математика
Разделим математику на 2 категории ― цвета и числа. Начнём с чисел. Простой пример:
При желании можно и padding с border-ом задавать переменными. Всё зависит от сложности вёрстки.
Ещё пример:
Хочу отметить, что подобного рода манипуляции применяются очень часто. Без них я как без ног.
А теперь цвета. Цвета можно складывать, перемножать:
@строки
SASS умеет складывать строки, а также поддерживает конструкцию
Полагаю, что наибольшее применение операциям над строками можно найти в @миксинах и переменных, указывающих пути к изображениям и пр.
Использование !global
По умолчанию область видимости всех переменных в Sass ограничена, но у разработчика есть возможность переопределения области видимости отдельных переменных — с локальной на глобальную. Это возможно с помощью метода !global. Добавление переключателя !global станет указанием на то, что переменная должна быть видна на всех уровнях.
Для иллюстрации воспользуемся кодом из предыдущего примера: добавим к переменной $myColor элемента h1 переключатель !global:
$myColor: red;h1 {$myColor: green !global;color: $myColor;}p {color: $myColor;}
Теперь и заголовок, и текст параграфа имеют один цвет — зеленый, поскольку переменная в CSS-коде стала глобальной:
h1 {color: green;}p {color: green;}
Переключатель !global переопределяет область видимости переменной
Глобальные переменные нужно определять отдельно от локальных переменных, в файле под названием _globals.scss. Он включается в основной код с помощью функции @include.
History of Sass
Initially, Sass was part of another preprocessor called Haml, designed and written by Ruby developers. Because of that, Sass stylesheets were using a Ruby-like syntax with no braces, no semi-colons and a strict indentation, like this:
As you can see, this is quite a change compared to regular CSS! Even if you’re a Sass (the preprocessor) user, you can see this is pretty different from what we are used to. The variable sign is and not , the assignment sign is and not . Pretty weird.
But that’s how Sass looked like until version 3.0 arrived in May 2010, introducing a whole new syntax called SCSS for Sassy CSS. This syntax aimed at closing the gap between Sass and CSS by bringing a CSS-friendly syntax.
SCSS is definitely closer to CSS than Sass. That being said, Sass maintainers have also worked to make both syntaxes closer to each other by moving (variable sign) and (assignment sign) from the indented syntax to and from SCSS.
Now, when starting a new project, you may wonder which syntax you should use. Let me enlighten the path and explain the pros and cons of each syntax.
Что такое Sass?
Sass является одним из наиболее широко используемых CSS-препроцессоров. Он имеет различные функции, помогающие разработчикам писать CSS-код лучше и чище. За более подробной информацией вы можете обратиться к официальному сайту Sass и GitHub-репозиторию.
FAQ: Sass или SCSS
Это часто задаваемый вопрос. На самом деле, они оба являются Sass-препроцессором, просто имеют разный синтаксис. Проще говоря, SCSS — это новый синтаксис Sass 3 версии.
Пример синтаксиса Sass:
Пример синтаксиса SCSS:
Как мы можем видеть, SCSS (Sassy CSS) имеет CSS-подобный синтаксис, который намного легче читается. Он является расширением CSS, в то время как синтаксис Sass имеет более существенные отличия. Они также имеют разное расширение файла: .sass и .scss .
Подробнее об этом можно прочитать здесь. А теперь давайте перейдем к особенностям Sass.
Функции
Переменные
Sass позволяет определять переменные. Переменные начинаются с символа знак доллара ($). Переменная назначение делается с двоеточие ().
SassScript поддерживает четыре типа данных:
- Цифры (включая единицы)
- Струны (с кавычками или без)
- Цвета (имя или имена)
- Булевы
Переменные могут быть аргументы к одному из нескольких доступных функции. Во время перевода значения переменных вставляются в выходной документ CSS.
| SCSS | Sass | Скомпилированный CSS |
|---|---|---|
$ первичный цвет # 3bbfce;$ маржа 16px;.content-navigation { цвет границы $Основной цвет; цвет затемнять($Основной цвет, 10%);}.граница { набивка $поле 2; поле $поле 2; цвет границы $Основной цвет;}
|
$ первичный цвет # 3bbfce$ маржа 16px.content-navigation цвет границы $ первичный цвет цвет затемнять($ первичный цвет, 10%).граница набивка $ маржа2 поле $ маржа2 цвет границы $ первичный цвет |
.контент-навигация { цвет границы # 3bbfce; цвет # 2b9eab;}.граница { набивка 8px; поле 8px; цвет границы # 3bbfce;}
|
Гнездование
CSS поддерживает логическое вложение, но сами блоки кода не вложены. Sass позволяет вставлять вложенный код друг в друга.
| SCSS | Sass | Скомпилированный CSS |
|---|---|---|
стол.hl { поле 2em ; тд.ln { выравнивание текста верно; }}Ли { шрифт { семья засечки; масса смелый; размер 1.3em; }}
|
стол.hl поле 2Эм тд.ln выравнивание текста верно Ли шрифт семья засечки масса смелый размер 1.3Эм |
стол.гл { поле 2Эм ;}стол.гл тд.пер { выравнивание текста верно;}Ли { семейство шрифтов засечки; font-weight смелый; размер шрифта 1.3Эм;}
|
Более сложные типы вложенности, включая пространство имен вложение и родительские ссылки обсуждаются в документации Sass.
| SCSS | Sass | Скомпилированный CSS |
|---|---|---|
@mixin стол-основа { th { выравнивание текста центр; font-weight смелый; } тд, th { набивка 2 пикселя; }}#данные { @включают стол-основа;}
|
= основание стола th выравнивание текста центр font-weight смелый тд, th набивка 2px#данные + стол-основание |
#данные th { выравнивание текста центр; font-weight смелый;}#данные тд, #данные th { набивка 2px;}
|
Петли
Sass позволяет перебирать переменные, используя , и , который можно использовать для применения разных стилей к элементам с похожими классами или идентификаторами.
| Sass | Скомпилированный CSS |
|---|---|
$ squareCount 4@за $ i из 1 через $ squareCount #квадрат-#{$ i} фоновый цвет красный ширина 50px * $ i высота 120px $ i
|
#квадрат-1 { фоновый цвет красный; ширина 50px; высота 120px;}#квадрат-2 { фоновый цвет красный; ширина 100px; высота 60px;}#квадрат-3 { фоновый цвет красный; ширина 150px; высота 40px;}
|
Аргументы
Миксины также поддерживают аргументы.
| Sass | Скомпилированный CSS |
|---|---|
= слева($ dist) плавать оставили маржа слева $ dist#данные + слева(10px) |
#данные { плавать оставили; маржа слева 10px;}
|
В сочетании
| Sass | Скомпилированный CSS |
|---|---|
= основание стола th выравнивание текста центр font-weight смелый тд, th набивка 2px= слева($ dist) плавать оставили маржа слева $ dist#данные + слева(10px) + стол-основание |
#данные { плавать оставили; маржа слева 10px;}#данные th { выравнивание текста центр; font-weight смелый;}#данные тд, #данные th { набивка 2px;}
|
Наследование селектора
Хотя CSS3 поддерживает Объектная модель документа (DOM) иерархия, она не позволяет наследовать селектор. В Sass наследование достигается путем вставки строки внутри блока кода, которая использует ключевое слово @extend и ссылается на другой селектор. Атрибуты расширенного селектора применяются к вызывающему селектору.
| Sass | Скомпилированный CSS |
|---|---|
.ошибка граница 1px # f00 фон #fdd.error.intrusion размер шрифта 1.3Эм font-weight смелый.badError @продлевать .ошибка ширина рамки 3px |
.ошибка, .badError { граница 1px # f00; фон #fdd;}.ошибка.вторжение,.badError.вторжение { размер шрифта 1.3Эм; font-weight смелый;}.badError { ширина рамки 3px;}
|
Sass поддерживает множественное наследование.
Оператор @extend
Часто возникает ситуация, когда один класс должен иметь все стили другого класса, помимо своих собственных стилей. Наиболее распространенное решение это использовать два класса; первый содержит общие стили, второй – специфичные.
Оператор @extend позволяет избежать этих проблем, обеспечивая возможность одному селектору наследовать стили от другого селектора. Например:
CSS
Написание CSS
само по себе весело, но когда таблица стилей становится огромной, то становится и сложно её обслуживать. И вот в таком случае нам поможет препроцессор. Sass позволяет использовать функции недоступные в самом CSS
, например, переменные, вложенности, миксины, наследование и другие приятные вещи, возвращающие удобство написания CSS.
Как только Вы начинаете пользоваться Sass, препроцессор обрабатывает ваш Sass-файл и сохраняет его как простой CSS
-файл, который Вы сможете использовать на любом сайте.
Самый простой способ получить такой результат — использовать терминал. После того, как Sass установлен, вы можете компилировать ваш Sass в CSS
, используя команду sass . Вам всего лишь нужно сообщить Sass, где взять файл Sass и в какой файл CSS
его скомпилировать. Например, запустив команду sass input.scss output.css в терминале, вы сообщаете Sass взять один Sass файл, input.scss , и скомпилировать в файл output.css .
Также, вы можете следить за изменениями только определенных файлов или папок, используя флаг —watch . Данный флаг сообщает Sass, что необходимо следить за изменениями указанных файлов и при наличии таковых производить перекомпиляцию CSS
после сохранения файлов. Если вы хотите отслеживать изменения (вместо ручной перекомпиляции) вашего файла, например, input.scss , то вам необходимо просто добавить флаг в команду:
sass –watch input.scss output.css
Вы также можете указать папки для отслеживания изменений и куда сохранять компилированные CSS
файлы, для этого достаточно указать пути и разделить их двоеточием, например:
Sass —watch app/sass:public/stylesheets
Sass будет отслеживать все файлы в директории app/sass и компилировать CSS
в директорию public/stylesheets .
What Is A CSS Preprocessor?
CSS in itself is devoid of complex logic and functionality which is required to write reusable and organized code. As a result, a developer is bound by limitations and would face extreme difficulty in code maintenance and scalability, especially when working on large projects involving extensive code and multiple CSS stylesheets. This is where CSS Preprocessors come to the rescue.
A CSS Preprocessor is a tool used to extend the basic functionality of default vanilla CSS through its own scripting language. It helps us to use complex logical syntax like – variables, functions, mixins, code nesting, and inheritance to name a few, supercharging your vanilla CSS. By using CSS Preprocessors, you can seamlessly automate menial tasks, build reusable code snippets, avoid code repetition and bloating and write nested code blocks that are well organized and easy to read.
However, browsers can only understand native vanilla CSS code and will be unable to interpret the CSS Preprocessor syntax. Therefore, the complex and advanced Preprocessor syntax needs to be first compiled into native CSS syntax which can then be interpreted by the browsers to avoid cross browser compatibility issues. While different Preprocessors have their own unique syntaxes, eventually all of them are compiled to the same native CSS code.
Moving forward in the article, we will take a look at the 3 most popular CSS Preprocessors currently being used by developers around the world i.e Sass, LESS, and Stylus.
Before you decide the winner between Sass vs LESS vs Stylus, let us get to know them in detail first.
Функции
Цвета
В Bootstrap 5 мы отказались от функций , и, потому что значения также доступны как отдельные переменные. Поэтому вместо использования теперь вы можете просто использовать переменную.
У нас также есть функция для получения определенного уровня цвета. Отрицательные значения уровня сделают цвет светлее, а более высокие — темнее.
На практике вы должны вызвать функцию и передать два параметра: название цвета (например, основной или опасный) и числовой уровень.
Цветовой контраст
Чтобы соответствовать стандартам доступности WCAG 2.0 для цветового контраста , авторы должны обеспечить , за очень немногими исключениями.
Дополнительная функция, которую мы включаем в Bootstrap, — это функция цветового контраста . Он использует для расчета пороговых значений контрастности на основе относительной яркости в цветовом пространстве для автоматического возврата светлого (), темного () или черного () контрастного цвета на основе указанного основного цвета. Эта функция особенно полезна для миксинов или циклов, в которых вы создаете несколько классов.
Например, чтобы сгенерировать образцы цвета из нашей карты:
Его также можно использовать для одноразового использования контрастного вещества:
Вы также можете указать базовый цвет с помощью наших функций цветовой карты:
Функции сложения и вычитания
Мы используем и функцию , чтобы обернуть CSS функцию. Основная цель этих функций — избежать ошибок, когда в выражение передается «безразмерное» значение . Выражения вроде вернут ошибку во всех браузерах, несмотря на то, что они математически верны.
Пример, когда расчет действителен:
Пример неверного вычисления:
Pros for Sass Indented Syntax
While this syntax might look weird, it has some interesting points. First of all, it is shorter and easier to type. No more braces and semi-colons, you don’t need all that stuff. Even better! No need for or , when a single character is enough: and .
Also the Sass syntax enforces clean coding standards by relying on indentation. Because a wrong indent is likely to break the whole stylesheet, it makes sure the code is clean and well formatted at all times. There is one way to write Sass code: the good way.
But beware! Indenting means something in Sass. When indenting a selector, it means it is nested into the previous selector. For instance:
… will output the following CSS:
The simple fact of pushing one level to the right means it is a child of , changing the resulting CSS. Be very careful with your indentation!
As an aside, I feel like the indentation based syntax will probably suit a Ruby/Python team more than a PHP/Java team (although this is debatable, and I’d love to hear opinions to the contrary).
Особенность #3: Mixins (миксины)
Выше мы узнали, как применять переменные для CSS-правил. Но что, если нам нужно использовать несколько правил вместе? Для этих целей у Sass есть миксины.
Что такое миксин?
Миксины (также иногда называемые примесями) являются функциями Sass, которые группируют CSS-правила. Мы можем использовать их в качестве переменных.
Миксин создается с помощью команды @ mixin и названия миксина:
@mixin my-font {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: italic;
}
Также можно создать миксин в виде функции и добавлять к ней параметры:
$font-color: red;
@mixin my-font($font-color) {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: italic;
color: $font-color;
}
После создания миксина мы можем воспользоваться им в любом классе при помощи команды @ include. Таким образом, мы можем подключить миксин my-font вместо того, чтобы каждый раз писать 4 строки правил для шрифта. Такой подход упрощает код.
p {
@include my-font;
}
Миксины
Миксины — блоки Sass кода (или примеси-шаблоны), которые могут принимать аргументы (опционально) и позволяют значительно расширить возможности написания стилей и сократить затраты времени на применении однотипных правил и даже целых CSS блоков. Это что-то вроде функции, которая может принять аргумент, выполнить огромный объем работы и выдать результат в зависимости от входного параметра.
Миксин объявляется директивой @mixin, после объявления должно быть указано имя миксина. Вызывается миксин директивой @include, которая принимает имя миксина и передаваемые аргументы, если такие имеют место быть.
Примеры:
| Sass | CSS — готовый результат |
@mixin border($color) border: $color 1px solid p @include border(#333) @mixin transition($time) -webkit-transition: all $time ease; -moz-transition: all $time ease; -o-transition: all $time ease; transition: all $time ease; p @include transition(.25s) |
p {
border: #333 1px solid;
}
p {
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
|
Друзья, мы рассмотрели основные возможности Sass, которых достаточно для плодотворной работы с CSS стилями сайта. Некоторые директивы и возмоности не вошли в данное руководство, но если вам интересно узнать обо всех возможностях Sass, почитайте документацию, будет полезно.
Другие уроки по теме «Инструменты»
- Настройка VS Code для верстки
- Simple Starter — простой стартер для верстки. Верстаем просто!
- Windows 11: Делаем вкладки в проводнике. Настройка QTTabBar от А до Я
- Gulp include на стороне сервера Browsersync + Build
- OptimizedHTML 5: Важные обновления стартера для JS-разработки
- Gulp 4 — Актуальное и исчерпывающее руководство для самых маленьких
Pros for SCSS Syntax
For starter, it is fully CSS compliant. It means, you can rename a CSS file in and it will just work. Making SCSS fully compatible with CSS has always been a priority for Sass maintainers since SCSS was released, and this is a big deal in my opinion. Moreover, they try to stick as close as possible to what could become a valid CSS syntax in the future (hence ).
Because SCSS is compatible with CSS, it means there is little to no learning curve. The syntax is already known: after all, it’s just CSS with a few extras. This is important when working with inexperienced developers: they will be able to quickly start coding without knowing the first thing about Sass.
Moreover, it is easier to read because it actually makes sense. When you read , you know it is a mixin declaration; when you see , you are calling a mixin. It doesn’t make any shortcuts, and everything makes sense when read out loud.
Also, most existing tools, plugins and demos for Sass are developed using the SCSS syntax. As time goes, this syntax is becoming pre-eminent and the default choice, mostly for the above reasons.
Установка SASS
Чтобы установить SASS, откройте командную строку и введите gem install sass, после этого вы должны получить сообщение об успешном окончании установки:
Подготовка необходимых файлов
Перед тем, как вплотную заняться копанием в недрах SASS, нам нужно подготовить некоторые необходимые файлы.
Создайте новую папку (для данной статьи, я расположил эту папку на своем рабочем столе) и назовите её, например, SASS или как вам будет угодно. Внутри папки SASS, создайте HTML-файл, дав ему имя index.html.
Поместите в него следующий код:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Введение в SASS</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<header>
<h1>Простой Sass-документ</h1>
<h2>Статья для веб-дизайнеров и разработчиков</h2>
</header>
<div>
<p id="samplepara">Простой текстовый параграф</p>
<p>Еще один параграф с текстом</p>
</div>
<div>
<ul id="list1">
<li>1й элемент списка</li>
<li>2й элемент списка </li>
<li>3й элемент списка </li>
</ul>
</div>
<footer>
<h3>Это отличный футер!</h3>
</footer>
</div>
</body>
</html>
Теперь, для файла SASS, создайте пустой файл в предпочитаемом вами текстовом редакторе и назовите его style.scss.
Если вы точно следовали всем шагам, то на данный момент у вас будет следующая структура файлов:
Конвертация SASS-кода в CSS
Чтобы преобразовать код SASS в CSS, мы будем использовать команду –watch, которая выполнит компиляцию.
Также, эта команда просканирует папки на наличие изменений. Давайте попробуем сконвертировать SASS-файл в CSS-файл. Но сначала нам нужно расположить код в файле ourstyle.scss, чтобы убедиться, что все работает.
Скопируйте и вставьте следующий SASS-код в файл stye.scss, созданный вами в папке SASS:
$myMargin: 0px auto;
$myColor: red;
$myWidth: 600px;
h1 {
color: $myColor;
$myMargin: $margin;
}
Далее, откройте командную строку и перейдите в директорию, где вы расположили ваши файлы. В моем случае это папка на рабочем столе, поэтому я ввожу 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 solid red;);
- Тип null – значение отсутствует (например, $myVar: null;).
Давайте опробуем эти типы на практике. Откройте файл style.scss и добавьте в него следующий код:
$myColor: #009a82;
$myString: "здесь ваш текст";
$myFontSize: 13px;
$myMargin: 0px auto;
$myWidth: 460px;
h1 {
color: $myColor;
margin: 0;
padding: 0;
}
#container {
width: $myWidth;
margin: $myMargin;
}
Запустив этот код в браузере, вы получите следующее:
Вложенность
SASS также позволяет определять вложенные стили. Это позволит вам писать очень легко читающиеся стили.
В качестве примера, рассмотрим следующий код:
#container p {
font-family: Arial;
font-size: 13px;
}
#container h1 {
font-family: Tahoma;
font-size: 15px;
}
#container h2 {
font-family: Helvetica;
font-size: 14px;
}
Для SASS, код будет выглядеть следующим образом:
$myFontsize1: 13px;
$myFontsize2: 18px;
$myFontsize3: 25px;
$myWidth: 500px;
$myMargin: 0px auto;
#container {
width: $myWidth;
margin: $myMargin;
p {
font-family: Arial;
font-size: $myFontsize1;
}
h1 {
font-family: Tahoma;
font-size: $myFontsize3;
}
h2 {
font-family: Helvetica;
font-size: $myFontsize2;
}
}
Обратите внимание, что мы расположили все стили элементов под идентификатором container, вместо того, чтобы предварять этим id каждый из них. Если вы запустите этот код в браузере, то увидите следующую картину:
Если вы запустите этот код в браузере, то увидите следующую картину:
Вложенности
При написании HTML
, Вы, наверное, заметили, что он имеет четкую вложенную и визуальную иерархию. С CSS
это не так.
Sass позволит вам вкладывать CSS
селекторы таким же образом, как и в визуальной иерархии HTML.
Но помните, что чрезмерное количество вложенностей делает ваш документ менее читабельным и воспринимаемым, что считается плохой практикой.
Чтобы понять что мы имеем ввиду, приведем типичный пример стилей навигации на сайте:
SCSS
Syntax
CSS
Output
Вы заметили, что селекторы ul , li , и a являются вложенными в селектор nav ? Это отличный способ сделать ваш CSS
-файл более читабельным. Когда вы сгенерируете CSS
-файл, то на выходе вы получите что-то вроде этого:
Функции
SASS также имеет в своем арсенале различные функции. Отличным примером являются цветовые функции.
Взгляните на их список ниже:
- darken(color, amount);
- lighten(color, amount);
- saturate(color, amount);
- desaturate(color, amount);
- alpha(color).
Для того чтобы подробно изучить, как работать с функциями, обратитесь к документации SASS.
А сейчас, мы рассмотрим несколько практических примеров с использованием перечисленных выше функций.
Откройте свой файл style.scss и вставьте туда следующий код:
$myColor: #202020;
$myBackground: #e6e6e6;
body {
background: darken($myBackground, 20%);
}
h1, h2 {
color: lighten($myColor, 40%);
}
Результатом этого примера будет затемнение цвета в переменной $myBackground на 20% с помощью соответствующей функции. Далее, в этом же примере, заголовки H1 и H2 осветляются на 40% соответствующей функцией.
После запуска данного примера в браузере вы увидите примерно следующую картину:
Формат .sass против .scss
Перед началом рассказа о том, как использовать SASS, сравним форматы расширений .sass и .scss, генерируемых SASS. Для начала я представлю вам простой CSS-код, а затем покажу, как его упростить с помощью обоих расширений SASS.
CSS-код
Для исходного примера я использовал тег header и присвоил нулевое значение свойствам margin и padding, а затем прописал белый цвет для свойства color:
header {
margin: 0;
padding: 0;
color: #fff;
}
Формат .scss (новый синтаксис SASS)
Чтобы написать приведенный выше пример в формате .scss, мы будем использовать переменную $color и дадим ей шестнадцатеричное значение: #fff, которое соответствует белому цвету.
Далее, вместо того, чтобы по правилам CSS присвоить свойству color значение #fff, мы используем переменную $color , которую определим в начале кода:
$color: #fff;
header {
margin: 0;
padding:0;
color: $color;
}
Формат .sass (старый синтаксис SASS)
Для .sass мы имеем такую же переменную и значение, как и для .scss, но точки с запятой и фигурные скобки не используются.
Заметьте, что синтаксис зависим от абзацев. Это старый формат SASS:
$color: #fff header margin: 0 padding: 0 color: $color
Для чего используют Sass
Препроцессор Sass помогает:
- сделать CSS-код понятнее и проще. Его легче масштабировать, обновлять и поддерживать;
- расширить функциональность. С помощью Sass можно использовать CSS-константы, встроенные функции, вложенные правила, примеси (смешанные стили), наследование и так далее;
- избежать многократного повторения одинаковых фрагментов кода. Это экономит время разработчика, уменьшает объем файлов стилей и ускоряет обработку страниц.
Разберем использование Sass на примере. В цветовой палитре сайта преобладают три цвета:
Пример основы цветовой палитры
Без использования препроцессора разработчику нужно вручную вводить HEX-значения каждого из этих оттенков несколько раз. Sass решает проблему просто:
/* определяем переменные для основных цветов */
$primary_1: #a2b9bc;$primary_2: #b2ad7f;$primary_3: #878f99;
/* используем переменные в стилях*/
.main-header {background-color: $primary_1;}.menu-left background-color: $primary_2;}.menu-right {background-color: $primary_3;}
Если дизайнер (или разработчик) решит изменить цвет какого-либо элемента, достаточно поменять значение один раз — у переменной.
Курс
Frontend-разработчик
Научитесь создавать адаптивные веб-сайты с использованием CSS, Flexbox и получите востребованную IT-профессию.
Узнать больше
Импорт
В вашем вы будете импортировать исходные файлы Sass для Bootstrap. У вас есть два варианта: включить весь Bootstrap или выбрать нужные вам части. Мы поощряем последнее, но имейте в виду, что между нашими компонентами существуют некоторые требования и зависимости. Вам также необходимо будет включить некоторый JavaScript для наших плагинов.
Имея такую настройку, вы можете начать изменять любые переменные и карты Sass в вашем . Вы также можете начать добавлять части Bootstrap в раздел по мере необходимости. Мы предлагаем использовать полный стек импорта из нашего файла в качестве отправной точки.
SCSS синтаксис
Для начинающих SCSS полностью совместим с CSS, что означает почти нулевые кривые обучения. SCSS синтаксис: он просто добавляет некоторые функции CSS
Это важно, когда вы работаете с неразборными разработчиками: они могут начать кодировать в ближайшее время, не поехав на изучение SASS
Кроме того, SCSS все ещеЛегко читать Потому что это семантическое, а не с символами. Когда вы читаетеВы будете знать, что это оператор микс; когда вы видите Вы здесь, чтобы ссылаться на микс. Он не использовал никаких сокращений, все они были очень ясны, когда вы прочитали его.
Кроме того, теперь почти все инструменты SASS, плагины и демонстрация разработаны на основе синтаксиса SCSS. Со временем SCSS станет предпочтительным выбором. Например, теперь вам трудно найти выделенный плагин синтаксиса отступа SASS, обычно можно использовать только SCSS.
Практическое применение
Мы рассмотрели множество возможностей и новых возможностей, которые могут выполнять препроцессоры, но мы не затронули практику. Вот краткий список приложений реального мира, где использование препроцессора — спасатель.
Приставка поставщиков
Это одна из раздутых причин использовать препроцессор и по очень веской причине — это экономит массу времени и слез. Создание mixin для обработки префиксов поставщиков это легко и экономит много повторений и болезненного редактирования. Вот как это сделать:
3D-текст
Подделка 3D-текста с использованием нескольких — умная идея. Единственная проблема в изменении цвета когда факт трудный и громоздкий. Используя mixins и цветовые функции, мы можем создавать 3D-текст и менять цвет «на лету»!
Я решил написать Stylus на одной строке, потому что я опустил фигурные скобки.
Конечный результат
Столбец
Использование числовых операций и переменных для столбцов — это идея, которую я придумал, когда я впервые играл с препроцессорами CSS. Объявив желаемую ширину в переменной, мы можем легко изменить ее в течении работы без какой-либо сложной математики. Вот как это делается:
Основные факторы в выборе
Согласно функциональным характеристикам Sass определенно лучше других программ по многим параметрам. Но если работа уже проходит с помощью Less, нет никакого смысла его менять. Как было указано выше, SASS позволяет применять Compass, что приводит к облегчению при работе с префиксами. У других программ нет проекта Compass, так как язык инструмента довольно сложен. SASS имеет логические и циклические операторы. Сайт LESS красивый и удобный по сравнению с другими сайтами.
При работе с правилами @media программист добавляет блоки с ними внизу страницы стилей. Это приводит к разъединению стилей. Less и Sass – оба инструмента, которые решают эту проблему, математика в них в целом похожа. По скорости работы оба препроцессора обладают хорошими показателями.
Разработчики обоих вариантов продолжают их дальнейшее совершенствование.
Согласно отзывам и комментариям программистов оба инструмента могут быть использованы с равными возможностями. Syntactically Awesome Style Sheets по некоторым данным имеет более низкую скорость по сравнению с другими. Некоторые считают, что Stylus сегодня превзошел оба препроцессора.
Итак, точного решения вопроса об использовании Less и Sass нет, так как они оба обладают хорошими свойствами и функционалом. Поэтому выбор определен целями и задачами программиста.
» и назрел вопрос вполне логичный вопрос: «В чем разница между SASS и SCSS?». Тема интересная, поэтому давайте разбираться.
Когда речь идет о Sass
, как правило, мы подразумеваем препроцессор и язык в целом.
Тем не менее, используя Sass
(препроцессор) мы можем использовать два различных синтаксиса:
- Sass (отступы)
; - SCSS (CSS-подобный синтаксис).
