Sass basics

General Sibling Selector

The general sibling selector selects all elements that are siblings of a specified element.


The following example selects all <p> elements that are siblings of <div> elements: 

Example

div ~ p {  background-color: yellow;}

Selector Example Example description
element element div p Selects all <p> elements inside <div> elements
element>element div > p Selects all <p> elements where the parent is a <div> element
element+element div + p Selects all <p> elements that are placed immediately after <div> elements
element1~element2 p ~ ul Selects every <ul> element that are preceded by a <p> element

Так для чего же нужен Sass?

Sass (или Syntactically Awesome Stylesheets) – это скриптовый метаязык (т.е. язык, описывающий другой язык), разработанный для упрощения файлов CSS. Этот модуль входит в Haml (HTML abstraction markup language), который используется для упрощения HTML.

Как Haml компилируется в HTML, так и Sass компилируется в обычные CSS-стили.

Выпуск Sass состоялся в ноябре 2006 года, актуальная стабильная на момент написания статьи версия – 3.5.6 от 23 марта 2018 года.

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

  • .sass — известный как синтаксис с отступами, через которые реализованы вложенные элементы; фигурных скобок нет;
  • .scss — Sassy CSS, где используются фигурные скобки.

Так как Haml был написан Ruby-разработчиками, то и Sass унаследовал Ruby-подобный синтаксис, который значительно отличается от CSS. Поэтому в 2010 году был презентован синтаксис SCSS, который приблизил синтаксис Sass к CSS и сделал его более совместимым.

Каждый из этих синтаксисов имеет свои особенности и преимущества.

Синтаксис Sass

Этот синтаксис короче, в нем отсутствуют скобки и точки с запятой, поэтому набирать его проще.

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

Такой синтаксис определенно понравится тем, кто в разработке использует Ruby или Python.

Синтаксис SCSS

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

Синтаксис SCSS – это более читаемый код, в котором проще разобраться. Поэтому все больше разработчиков выбирают именно его. На нем разрабатываются инструменты и плагины для Sass.

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

Локальные переменные и mixins

Переменные и mixins в Sass по умолчанию являются глобальными. Если вы определили $primary-color, то его значение можно использовать везде, что не всегда хорошо. Например, у вас есть статичное значение (фиксированная высота), и вы используете его только для самого компонента и его дочерних элементов. Первый способ (и не самый эффективный) — это записать значение в глобальную переменную. Такой подход в дальнейшем может сильно увеличить список глобальных переменных, которые к тому же будут очень специфичны.

Более эффективное решение — локальные переменные. Можно задать переменную внутри блока селектора, рядом со свойствами. Таким образом, она будет доступна только внутри селектора.

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

.filters-block {
    $_filter-height: 20px;
    
        @mixin _note-size($value) {
        height: $value;
        line-height: $value;
        margin-top: -($value);
    }
    &__list {
        height: $_filters-height * 7; // Display 7 filters
        overflow: auto;
    }
    &__item {
        height: $_filter-height;
    }
    &__note {
        @include _note-size(30px);
    }
    @media screen and (max-width 1000px) {
        &__note {
            @include _note-size(40px);
        }
    }
}

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

Для обозначения локальных переменных, я рекомендую использовать нижнее подчеркивание “_” перед названием переменной/mixin, так же как это делается в других языках программирования.

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors Colors RGB HEX HSL

CSS Backgrounds Background Color Background Image Background Repeat Background Attachment Background Shorthand

CSS Borders Borders Border Width Border Color Border Sides Border Shorthand Rounded Borders

CSS Margins Margins Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline Outline Outline Width Outline Color Outline Shorthand Outline Offset

CSS Text Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow

CSS Fonts Font Family Font Style Font Size Font Google Font Shorthand

CSS IconsCSS LinksCSS ListsCSS TablesCSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float Float Clear Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar Navbar Vertical Navbar Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS Specificity

Умные breakpoints

Предположим, вы храните layout значения в картах. Вы должны изменить layout на определенной breakpoint, таким образом вы определяете два layout карт: $small-layout и $big-layout. Но как вы получаете нужные значения, если у вас только одна функция (описанная в параграфе ‘Используйте карты или списки’), которая возвращает вложенные значения из дефолтной карты (скорее всего из $big-layout)? Создать отдельную функцию для получения $small-layout? Добавить layout карту, как дополнительный параметр для существующей функции?

Есть идея получше: создать breakpoint mixin. Этот шаблон взят из Susy, фреймворка для layout и grids. С тех пор как Susy использует карты для layout, на “susy-breakpoint” mixin вы можете задать layout карту как необязательный параметр. Ничего сверхъестественного не произойдет, но когда вы будет использовать другие функции (например gutter()) внутри breakpoint mixin, она автоматически возвратит значения в нужной layout карте. “Умный” breakpoint работает таким же образом, но использует специальную функцию для получения карты. Это даже может быть обертка для susy-breakpoint если вы используете Susy (для использования такого же Layout для обоих).

$small-layout: (
    header: (
        height: 30px
    )
);
$big-layout: (
    header: (
        height: 60px
    )
);
$default-layout: $big-layout;
$current-layout: $default-layout !default;
@mixin smart-breakpoint($breakpoint, $layout) {
    $_temp: $current-layout;
    $current-layout: $layout !global;
    @media screen and ($breakpoint) {
        @content;
    }
    $current-layout: $_temp !global;
}
.header {
    height: layout-value(header, height); // the value will be 60px
      @include smart-breakpoint('max-width: 768px', $small-layout) {
        height: layout-value(header, height);  // the value will be 30px
    }
}

Работающий код можно найти здесь.

Можете поиграть с кодом и посмотреть, как он работает, но в принципе mixin получает layout как параметр и переопределяет глобальное значения, добавляя !global флаг вначале. Когда вы используете функцию карты внутри breakpoint mixin, новое значение становится значением по умолчанию и вы получаете желаемый результат. До того, как закончить работу, mixin изменяет значение по умолчанию.

Переменные

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

CSS Output

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

Немного истории

Первоначально Sass являлся частью другого препроцессора — Haml, который придумали и написали разработчики из Ruby.


Поэтому стили Sass использовали Ruby-подобный синтаксис, без скобок, без точек с запятой и строгих отступов, например:

По сравнению с синтаксисом CSS есть ощутимая разница.

Переменная задается через !, а не $, символ присвоения значения =, а не 

Но так Sass выглядел до версии 3.0, выпущенной в мае 2010 года, в которой был представлен совершенно новый синтаксис под названием SCSS или Sassy CSS.

Его целью было приблизить синтаксис Sass к CSS, сделав его более совместимым с CSS:

SCSS определенно более близок к CSS, чем Sass. Разработчики Sass потрудились над тем, чтобы сделать оба синтаксиса ближе друг к другу, заменив ! (знак переменной) и = (знак присвоения) на $ и : из CSS.

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

Плюсы синтаксиса Sass с отступами

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

В нем не нужны @mixin или @include, когда достаточно простого символа: = и +.

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

Существует только один метод составления кодов Sass: составлять их правильно.

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

Например:

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

Полагаю, что синтаксис на основе отступов больше понравится команде, работающей в основном с Ruby/Python, нежели команде PHP/Java программистов (но это не точно).

Плюсы SCSS синтаксиса

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

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

Кроме того, они стараются следить, за тем, что может стать валидным синтаксисом CSS в будущем, и реализовать это (отсюда @directives).

Так как SCSS совместим с CSS, он практически не требует дополнительного обучения. Синтаксис почти тот же: в конце концов, это просто CSS с некоторыми дополнениями.

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

Когда вы видите @mixin, вы знаете, что это объявление примеси; когда вы видите @include, вы знаете, что это вызов примеси

Кроме того, он более читаем, так как конкретные конструкции уже имеют смысл. Когда вы видите @mixin, вы знаете, что это объявление примеси; когда вы видите @include, вы знаете, что это вызов примеси.

Нет никаких привязок, и все имеет смысл без интерпретации.

Также почти все существующие инструменты, плагины и демо-презентации для Sass разрабатываются с помощью синтаксиса SCSS. Этот синтаксис становится все более ориентированным на профессионалов и выбирается ими по умолчанию (если не является единственно возможным).

В основном в силу указанных выше причин. Например, становится все труднее найти подсветку чистого синтаксиса Sass с отступами; как правило, доступны только варианты подсветки SCSS.

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

В качестве окружения для работы с 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 командой:

npm i --save-dev gulp gulp-sass

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

var gulp = require('gulp'), // Подключаем Gulp
		sass = require('gulp-sass'); // Подключаем Sass пакет

gulp.task('sass', function() { // Создаем таск "sass"
	return gulp.src(['sass/**/*.sass', 'sass/**/*.scss']) // Берем источник
		.pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError)) // Преобразуем Sass в CSS посредством gulp-sass
		.pipe(gulp.dest('css')) // Выгружаем результата в папку css
	});

gulp.task('watch', function() {
	gulp.watch(['sass/**/*.sass', 'sass/**/*.scss'], ); // Наблюдение за sass файлами в папке sass
});

gulp.task('default', );

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

  • myproject/
    • css/

      common.css

    • sass/

      common.sass

    • node_modules/
    • gulpfile.js
    • package.json

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

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

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

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

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors Colors RGB HEX HSL

CSS Backgrounds Background Color Background Image Background Repeat Background Attachment Background Shorthand

CSS Borders Borders Border Width Border Color Border Sides Border Shorthand Rounded Borders

CSS Margins Margins Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline Outline Outline Width Outline Color Outline Shorthand Outline Offset

CSS Text Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow

CSS Fonts Font Family Font Style Font Size Font Google Font Shorthand

CSS IconsCSS LinksCSS ListsCSS TablesCSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float Float Clear Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar Navbar Vertical Navbar Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS Specificity

Приступим!

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

Что такого есть в Sass/SCSS, чего нет в стандартном CSS?

  • Вложенные правила: вы можете вкладывать CSS свойства, в несколько наборов скобок {}. Это сделает ваш CSS чище и понятней.
  • Переменные: в стандартном CSS тоже есть переменные, но переменные Sass куда более мощный инструмент. Например, вы можете использовать переменные в циклах и генерировать значения свойств динамически. Также можно внедрять переменные в имена свойств, например так: property-name-N { … }.
  • Лучшая реализация операторов: вы можете суммировать, вычитать, делить и умножать CSS значения. Sass реализация более интуитивна, чем стандартный функционал CSS calc().
  • Функции: Sass позволяет многократно использовать CSS стили, как функции.
  • Тригонометрия: помимо базовых операций (+, -, *, /), SCSS позволяет писать собственные функции. Например, функции sin и cos можно написать, используя только синтаксис Sass/SCSS. Конечно, вам понадобятся знания тригонометрии. Такие функция могут понадобится для создания анимации.
  • Удобный рабочий процесс: вы можете писать CSS, используя конструкции, знакомые по другим языкам: for-циклы, while-циклы, if-else. Но имейте в виду, это только препроцессор, а не полноценный язык, Sass контролирует генерацию свойств и значений, а на выходе вы получаете стандартный CSS.
  • Миксины: позволяют один раз создать набор правил, чтобы потом использовать их многократно или смешивать с другими правилами. Например, миксины используют для создания отдельных тем макета.

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

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

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

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

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

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

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

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

  • SASS (.sass) Syntactically Awesome Style Sheets.
  • SCSS (.scss)Sassy Cascading Style Sheets.

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

Используем команду sass-convert

Конвертация форматов .scss и .sass. Используем команду sass-convert.

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

Sass переменные можно назначить любому свойству CSS

Extend/Inheritance


This is one of the most useful features of Sass. Using lets you share a set of CSS properties from one selector to another. It helps keep your Sass very DRY. In our example we’re going to create a simple series of messaging for errors, warnings and successes using another feature which goes hand in hand with extend, placeholder classes. A placeholder class is a special type of class that only prints when it is extended, and can help keep your compiled CSS neat and clean.

CSS Output

What the above code does is tells , , , and to behave just like . That means anywhere that shows up, , , , &  will too. The magic happens in the generated CSS, where each of these classes will get the same CSS properties as . This helps you avoid having to write multiple class names on HTML elements.

You can extend most simple CSS selectors in addition to placeholder classes in Sass, but using placeholders is the easiest way to make sure you aren’t extending a class that’s nested elsewhere in your styles, which can result in unintended selectors in your CSS.

Note that the CSS in isn’t generated, because is never extended.

SassScript

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

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

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

Sass CSS — готовый результат
$accent: #FF9910

.button
	background-color: $accent
	color: #fff
.button {
	background-color: #FF9910;
	color: #fff;
}

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

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

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

Sass CSS — готовый результат
$summ: 10 + 20 / 2
$cn: content

.selector
	margin:
		top: $summ + px
		bottom: 12px + 8px
	background-color: trans + parent
	#{$cn}: "con" + "tent"
.selector {
	margin-top: 20px;
	margin-bottom: 20px;
	background-color: transparent;
	content: "content";
}

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

Обратите внимание, что при сложении 12px + 8px, мы получим 20px

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

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

Sass CSS — готовый результат
$in: интер

.interpol
	content: "#{$in}поляция"
.interpol {
	content: "интерполяция";
}

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

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

Sass CSS — готовый результат
$color1: #440203 + #550506
$color2: #010203 * 2
$color3: rgba(180, 0, 0, 0.75) + rgba(20, 255, 0, 0.75)

body
	background-color: $color1
	color: $color2
	border-color: $color3
body {
	background-color: #990709;
	color: #020406;
	border-color: rgba(200, 255, 0, 0.75);
}
Sass CSS — готовый результат
$translucent-red: rgba(255, 0, 0, 0.5);

p
	color: opacify($translucent-red, 0.3)
	background-color: transparentize($translucent-red, 0.25)

.selector
	background-color: rgba(#333, 0.75)
p {
	color: rgba(255, 0, 0, 0.8);
	background-color: rgba(255, 0, 0, 0.25);
}

.selector {
	background-color: rgba(51, 51, 51, 0.75);
}

Препроцессинг

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

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

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

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

sass –watch input.scss output.css

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

Sass будет отслеживать все файлы в директории и компилировать CSS в директорию .

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

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

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

Создание компонентов

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

Существует множество различных стратегий, но после многократных попыток их применения, я выбрал одну, которая лучше всего сработала для Devbridge Group — это стратегия компонентов. Компоненты — это независимые элементы, которые можно многократно использовать в различных местах. Это могут быть небольшие элементы, как, например, “Button”, “Input” или большие — например, “Article.” Главное — сделать их независимыми: не создавайте страницы или модули, зависящие от контента. Делайте так, чтобы они представляли объект, тип графического элемента или функцию и называйте их так, чтобы легко было понять, что они означают (избегайте сокращений, например, btn, frm, ppl, и т.д.).

Что касается структуры файлов: рекомендуется создавать один файл для одного компонента. Это вначале может показаться странным, но в итоге такой подход позволяет в будущем найти необходимый компонент намного быстрее. Воспринимайте файл как класс в ООП, или, если вы знакомы с ReactJS, как React компонент. Если же у вас сотни и тысячи небольших компонентов — создавайте папки. Например, вы можете положить все компоненты формы в папку /form-elements.

Другая проблема — инкапсуляция стилей. Иногда нужно сделать небольшие изменения — допустим, нужно сделать кнопку шире или выше. В таком случае, вы возможно захотите переопределить ее как “.my-custom-page .button”. Однако в дальнейшем такой подход может вызвать путаницу — вам будет тяжело поддерживать код с большим количеством переопределений. Вместо этого, измените сам компонент, например: “.button—large”.

Лучший способ придерживаться этого шаблона, на мой взгляд — это использовать стратегию именования CSS классов BEM (если вы не в курсе, что такое BEM, вы можете прочитать здесь). BEM хорошо подходит для Saas. Используя селектор & и вложенность, вы легко сможете сконструировать модули.

.article {
    width: 100px;
     
    &__title {
        font-size: 20px;
        font-weight: 500;
    }

    &--wide {
        width: 200px;
    }
}

Nesting

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

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

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

CSS Output

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


С этим читают