Простой, быстрый и надежный доступ к любому из ваших почтовых ящиков

Сравнение с другими препроцессорами CSS

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

LESS вдохновлен Sass. Sass был спроектирован с целью как упростить, так и расширить CSS, в первых версиях фигурные скобки были исключены из синтаксиса (этот синтаксис называется sass). LESS разработан с целью быть как можно ближе к CSS, поэтому у них идентичный синтаксис. В результате существующие CSS можно использовать в качестве LESS кода. Новые версии Sass также включают CSS-подобный синтаксис, который называется SCSS (Sassy CSS).

Подробное сравнение синтаксиса см. «Sass/Less Comparison».

ZUSS (ZK User-interface Style Sheet) это язык стилей, основанный на идеях LESS. Он имеет аналогичный синтаксис, за исключением того, что предназначен для использования на стороне сервера вместе с языком программирования Java. Он не использует интерпретатор JavaScript (Rhino), но позволяет напрямую вызывать Java методы.

FAQ

My VS Code is displaying a lot of errors on my templates when I try to use …

If you have configured to use some kind of preprocessor and is displaying errors like it’s ignoring your preprocess configuration, that’s happening because needs to know how to preprocess your components. works by having a svelte compiler running on the background and you can configure it by file on your project’s root. Please check this document section.

My compilation is sloooooooow

If you have a medium-to-big project, the typescript processor might start to get slow. If you already have an IDE type checking your code, you can speed up the transpilation process by setting to :

const preprocess = require('svelte-preprocess')
...
{
  ...svelteOptions,
  preprocess preprocess({
    typescript {
      // skips type checking
      transpileOnly true,
      compilerOptions {
        ...
      },
    },
  })
}
...

Почему бы не подождать развития CSS?¶

Развитие CSS идёт очень маленькими и неуверенными шагами, так как W3C придерживается приоритета скорости срабатывания CSS (производительности)

С одной стороны это правильно и очень важно, но с другой — это отсутствие удобства для разработчиков

В пример поставлю одну из спецификаций CSS4, которую ввели под давлением разработчиков — селектор по родителю. Столь долгий путь от идеи до принятия решения был из-за того, что W3C считало такой селектор медленным и дальнейшее его использование на сайтах привело бы к диким тормозам. Конечно же, речь идёт о повсеместном применении этого селектора, а не о единичных случаях.

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

Сравнение SASS и LESS:

Теперь перейдём к самому сравнению этих двух технологий.

Подробнее о каждом:

SASS (Syntactically Awesome Stylesheets) — это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS кода и упрощения файлов каскадных таблиц стилей.

Был создан в 2006 году, не большой командой разработчиков, но главный автор этого языка Хамптон Катлин (англ. Hampton Catlin).

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

LESS (Leaner Style Sheets, компактная таблица стилей)— это динамический язык стилей. Он создан под влиянием языка стилей SASS, и, в свою очередь, оказал влияние на его новый синтаксис «SCSS», в котором также использован синтаксис, являющийся расширением СSS.

Этот язык был создан в 2009 году, силами человека по имени Алексис Селье (англ. Alexis Sellier).

Также надо сказать, что сейчас его разработка прикрашена, ещё в 2016 году, но зато он перерос практически в отдельную JavaScript библиотеку, что усложнит его использование не подготовленному человеку, то есть не знающего JS.

Синтаксис:

Как говорилось выше у SASS есть два синтаксиса, первый это стандартный который был изначально, но он на мой взгляд не удобный и не понятный сразу, поэтому буду использовать второй, который был создан под влиянием LESS, называется SCSS.

Для LESS всё стандартно, покажу как использовать именно в обычно LESS, без JavaScript.

Попытаемся сделать эту картинку.

Сначала посмотрите как сделать это на SASS со синтаксисом  SCSS.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

@mixindisplayAt($vertical,$horizontal){

@if($vertical==top){

top;

}@elseif($vertical==bottom){

bottom;

}

@if($horizontal==left){

left;

}@elseif($horizontal==right){

right;

}

}
 

.toastMessage {

@includedisplayAt(bottom,right);

}
 

.toastMessage {

width200px;

positionabsolute;

background#BBF5BB;

border1pxsolid#99C995;

border-radius6px;

box-shadow6px12pxrgba(0,0,0,0.17);

padding10px;

margin20px;

font-family-apple-system,BlinkMacSystemFont,»Segoe UI»,Roboto,Oxygen-Sans,Ubuntu,Cantarell,»Helvetica Neue»,sans-serif;

font-size13px;

}

Теперь LESS.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

.displayAt(@position) when (@position = top) {

top;

}

.displayAt(@position) when (@position = bottom) {

bottom;

}

.displayAt(@position) when (@position = left) {

left;

}

.displayAt(@position) when (@position = right) {

right;

}
 

.toastMessage {

.displayAt(bottom);

.displayAt(right);

}
 

.toastMessage {

width200px;

positionabsolute;

background#BBF5BB;

color#478342;

border1pxsolid#99C995;

border-radius6px;

box-shadow6px12pxrgba(0,0,0,0.17);

padding10px;

margin20px;

font-family-apple-system,BlinkMacSystemFont,»Segoe UI»,Roboto,Oxygen-Sans,Ubuntu,Cantarell,»Helvetica Neue»,sans-serif;

font-size13px;

}

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

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

Работа:

Самое главное, это сколько вакансий можно найти по каждой технологии.

SASS всего 223 вакансии, что не так много, как я думал на момент 4 Января 2020 года, LESS же 283 вакансии, что в больше, это всё по Москве.

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

Разновидности препроцессоров

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

  • Sass (SCSS)
  • Stylus

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

Для полной картины, я хочу привести краткую справку по каждому препроцессору:

Less

Собственно, герой этой книги. Самый популярный на момент написания книги препроцессор. Основан в 2009 году Алексис Сельер (Alexis Sellier) и написан на JavaScript (изначально был написан на Ruby, но Алексис вовремя сделал правильный шаг). Имеет все базовые возможности препроцессоров и даже больше, но не имеет условных конструкций и циклов в привычном для нас понимании. Основным плюсом является его простота, практически стандартный для CSS синтаксис и возможность расширения функционала за счёт системы плагинов.

Sass (SCSS)

Самый мощный из CSS-препроцессоров. Имеет довольно большое сообщество разработчиков. Основан в 2007 году как модуль для HAML и написан на Ruby (есть порт на C++). Имеет куда больший ассортимент возможностей в сравнении с Less. Возможности самого препроцессора расширяются за счёт многофункциональной библиотеки Compass, которая позволяет выйти за рамки CSS и работать, например, со спрайтами в автоматическом режиме.

Имеет два синтаксиса:

  • Sass (Syntactically Awesome Style Sheets) — упрощённый синтаксис CSS,
    который основан на идентации. Считается устаревшим.
  • SCSS (Sassy CSS) — основан на стандартном для CSS синтаксисе.

Stylus

Самый молодой, но в тоже время самый перспективный CSS-препроцессор. Основан в 2010 году небезызвестной в наших кругах личностью TJ Holowaychuk. Говорят, это самый удобный и расширяемый препроцессор, а ещё он гибче Sass. Написан на JavaScript. Поддерживает уйму вариантов синтаксиса от подобного CSS до упрощённого (отсутствуют: , ; , {} и некоторые скобки).

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

LESS — это надстройка над CSS. LESS — это программируемый CSS. LESS расширяет CSS динамическими возможностями, такими как переменные, примешивания и операции.

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

Импорт стилей в Less¶

В Less импорт стилей происходит с помощью всё той же директивы, но с расширенным функционалом. Перед именем файла можно указывать (необязательно) ключевое слово, которое указывает компилятору, как ему поступать с файлом.

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

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

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

Файлы с расширением :

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

Файлы без расширения:

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

Файлы с другими расширениями:

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

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

Пример 2.6.1

Рассмотрим пример, который отображает всю суть импорта стилей в Less. Для этого создадим в директории следующие файлы: , , и . В этих файлах объявим одноимённые с названиями файлов классы и укажем с помощью свойства официальный цвет сервиса. Кроме них нам понадобится файл , к которому будут подключаться эти файлы.

Для наглядности я предлагаю посмотреть на карту директории этого примера:

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

Содержимое файла :

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

Содержимое файла , полученное после компиляции:

Во время компиляции происходит конкатенация содержимого файлов. А файлы с расширением подключаются стандартным для CSS способом.

Синтаксический сахар

Перед тем, как перейти к дальнейшему рассмотрению CSS-препроцессоров, давайте обновим наш лексикон новым понятием — «синтаксический сахар».

Синтаксический сахар
(от англ. syntactic sugar) — это дополнения синтаксиса языка программирования, которые не вносят каких-то существенных изменений или новых возможностей, но делают этот язык более читабельным для человека.

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

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

File Extensions

statements may be treated differently by Less depending on the file extension:

  • If the file has a extension it will be treated as CSS and the statement left as-is (see the below).
  • If it has any other extension it will be treated as Less and imported.
  • If it does not have an extension, will be appended and it will be included as a imported Less file.

Examples:

The following options can be used to override this behavior.

Import Options

Syntax:

The following import directives have been implemented:

  • : use a Less file but do not output it
  • : include the source file in the output but do not process it
  • : treat the file as a Less file, no matter what the file extension
  • : treat the file as a CSS file, no matter what the file extension
  • : only include the file once (this is default behavior)
  • : include the file multiple times
  • : continue compiling when file is not found

Example:

Scoping

A detached ruleset can use all variables and mixins accessible where it is defined and where it is called. Otherwise said, both definition and caller scopes are available to it. If both scopes contains the same variable or mixin, declaration scope value takes precedence.

Declaration scope is the one where detached ruleset body is defined. Copying a detached ruleset from one variable into another cannot modify its scope. The ruleset does not gain access to new scopes just by being referenced there.

Lastly, a detached ruleset can gain access to scope by being unlocked (imported) into it.

Definition and Caller Scope Visibility

A detached ruleset sees the caller’s variables and mixins:

compiles into:

Variable and mixins accessible form definition win over those available in the caller:

compiles into:

A ruleset does not gain access to new scopes just by being referenced there:

throws an error:

CSS-препроцессоры

Это языки написания стилей, похожие на CSS, но с возможностями, которых не хватает в CSS. Напрямую в браузере не работают, нуждаются в компиляции, результатом которой является CSS-файл. Как это работает: вы запускаете какое-либо ПО (в моём случае — gulp или webpack), оно следит за сохранением препроцессорных файлов и собирает (компилирует) из них CSS-файл. Заодно и страницу в браузере автоматически обновляет.

Актуальные CSS-препроцессоры: Sass (2006 г., лидер рынка), LESS (2009 г., весьма хорош), stylus (2010 г., прекрасен, но не разрабатывается) и PostCSS (2013 г., изначально для постпроцессинга, но с ним можно повторить почти всю функциональность настоящих препроцессоров). PostCSS используется почти во всех проектах и в виде постпроцессора.

Далее сравнение CSS-препроцессоров с обычным CSS.

Features

Template tag

Add vue-like support for defining your markup between a tag. The tagname can be customized to something like for example. See .

Note: only for auto preprocessing

template>
  div>Heydiv>
template>

style>style>

script>script>

Global style

Add a attribute to your tag and instead of scoping the css, all of its content will be interpreted as global style.

style global>
  div {
    color: red;
  }
style>

Note1: needs postcss to be installed
Note2: if you’re using it as a standalone processor, it works best if added to the end of the processors array.

Preprocessors

Current supported out-of-the-box preprocessors are , , , , , , , .

template lang="pug">
  div Posts
  +each('posts as post')
    a(href="{post.url}") {post.title}
template>

script lang="typescript">
  // Compatible with Svelte v3...
  export const hello string = 'world';
script>

script type="text/coffeescript">
  # ...and v2!
  export default
    methods
      foo () ->
        console.log('Hey')
script>

style src="./style.scss">style>



style src="./style.styl">style>



style lang="scss">
  $color: red;
  div {
    color: $color;
  }
style>



style type="text/stylus">
  $color=reddivcolor: $color;
style>

Modern Javascript syntax

allows you to run your component code through before sending it to the compiler, allowing you to use new language features such as optional operators and nullish coalescing. However, note that should transpile your component code to the javascript version supported by the Svelte compiler, so ES6+.

For example, with your config could be:

import preprocess from 'svelte-preprocess'
  ...
  preprocess preprocess({
    babel {
      presets [
        [
          '@babel/preset-env',
          {
            loose true,
            // No need for babel to resolve modules
            modules false,
            targets {
              // ! Very important. Target es6+
              esmodules true,
            },
          },
        ],
      ],
    },
  });
  ...

Note: If you want to transpile your app to be supported in older browsers, you must run babel from the context of your bundler.

Компиляция через GULP

Создаём файл зависимостей packege.json

1
npm init

Установка пакетов less gulp без сохранения на продакшене

1
npm i --save-dev less gulp

Установка дополнительный пакетов

1
2
3
4
5
6
7
8
9
10
/*
gulp-less - преобразует less в css,
gulp-concat - сборка одного css из файлов less,
gulp-autoprefixer - добавление автопрефиксов,
gilp-sourcemaps - отслеживание позиции изменений less файла
gulp-clean-css - минификация css
browser-sync - синхронизация 
*/
 
npm i --save-dev gulp-less gulp-concat gulp-autoprefixer gilp-sourcemaps gulp-clean-css browser-sync

Создаём файл gulp.js с кодом:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
var gulp = require('gulp');
var less = require('gulp-less'); (преобразуем все файлы less в css)
var autoprefixer = require('gulp-autoprefixer'); (автоматическое добавление префиксов для разных браузеров)
var concat = require('gulp-concat'); (все файлы less, данного проекта, сохраняем в один файл rezstyle.css)
var sourcemaps = require('gulp-sourcemaps'); (отслеживание позиции изменения less файла)
var cleancss = require('gulp-clean-css'); (сжатие css файла)
var browsersync = require('browser-sync').create(); (автоматическое обновление)
 
var config = {
	paths:{
		less: './lessfiles/**/*.less', // путь к файлам less
		html: './index.html' // путь к index.html
	}
	output:{
		cssname: 'rezstyle.css', // все файлы less, данного проекта, сохраняем в один файл rezstyle.css
		path: 'css' // путь к файлу css
	}
};
 
gulp.task('less', function(){
	// получаем все файлы less, инициализируем sourcemaps, компилируем less в css, объединение всех less в rezstyle.css, добавление автопрефиксов, минификация css, куда сохранять результат, синхронизация
 
	return gulp.src(config.paths.less).pipe(sourcemaps.init()).pipe(less()).pipe(concat(config.output.cssname)).pipe(autoprefixer()).pipe(cleancss()).pipe(sourcemaps.write()).pipe(gulp.dest(config.output.path)).pipe(browsersync.stream());
});
 
gulp.task('serve', function(){
	browsersync.init({
		server: {
			basedir: config.output.path
		}
	});
 
	// смотреть за файлами всеми less
	gulp.watch(config.paths.less, );
 
	gulp.watch(config.paths.html).on('change', browsersync.reload);
});
 
// запуск функций less и serve
gulp.task('default', );

Подаём команду в терминале

1
gulp

Ilya Web developer

Author

«Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете.»Martin Golding

More or Less

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

Библиотека «More or Less» добавляет недостающий функционал Less. К сожалению, документация предполагает следующий принцип работы: Хочешь пользоваться моей библиотекой? — Посмотри на простейший пример, а все более-менее сложные варианты использования узнай разобравшись в коде. Это не порядок. Поэтому рассмотрим все самые интересные функции на житейских и не очень примерах.

Полноценные условные конструкции

Немногим раньше мы говорили, что условные конструкции в Less, мягко говоря, не очень. Не хватает else . Именно такой функционал предлагает нам «More or Less». Для работы с библиотекой необходимо всего лишь её подключить и запомнить несколько простых конструкций.

Здесь и в других примерах статьи, я буду подключать все функции по отдельности, используя Bower. Поэтому, оставлю команду для установки пакета:

Bower i —save more-or-less

Итак, у нас есть вот такой код:

@import «bower_components/more-or-less/less/fn/_if.less»;
.class-test-if {
.if(isnumber(2), {
.-then() {
background-color: #fff;
}
.-else() {
background-color: #000;
}
});
}

На выходе:

Class-test-if {
background-color: #fff;
}

Поменяем 1
на string
:

Class-test-if {
background-color: #000;
}

Замечательно. Но как сравнить, например, переменную с каким-то конкретным значением, а не типом? — Почти так же легко.

Class-test-if {
@variable: col;
.if(@variable eq col, {
.-then() {
content: «true»;
}
.-else() {
content: «false»;
}
});
}

Всё работает как часики:

Class-test-if {
content: «true»;
}

Кстати, вы заметили ключевое слово, которое придётся запомнить? — Не беда! Ничего сложного тут нет:

  • ls
    (less,
  • lte
    (less-than or equal to,
  • gt
    (greater, >) — больше;
  • gte
    (greater-than or equal to, >=) — больше или равно;
  • eq
    (equality, =) — равно;

Полноценный цикл for

Наиболее удобным в этой библиотеке получился стандартный во всех ЯП цикл for. Давайте подключим функцию библиотеки и рассмотрим подробнее пример.

Заметили, что синтаксис куда приятнее, чем у оригинального цикла, который мы рассматривали в начале статьи?

В этом примере генерируется простейшая сетка, без всяких фишек. Код после трансляции в CSS:

Class-test-for-1 { width: 25%; }
.class-test-for-2 { width: 50%; }
.class-test-for-3 { width: 75%; }
.class-test-for-4 { width: 100%; }

For(@n);.-each(@i) {

}

Судя по всему, этот вариант записи пытается имитировать стандартную форму записи for в других ЯП. Должен признать, что выглядит это ужасно, поэтому советую использовать вариант из этой статьи.

Конкатенация элементов массива

Для объединения всех элементов массива (списка) в одну строку используется функция join , принимающая аргументами массив, который необходимо преобразовать в строку, и разделитель.

К слову, этот разделитель называется glue
— строковый аргумент, с помощью которого будут соединены в строку все элементы массива.

Class-test-join {
// Список (массив)
@animals: «cat», «tiger», «lion»;
// Конкатенация элементов списка (массива)
.join(@animals, » «);
content: «@{string}»;
}

На выходе получим вот такую вот строку:

Class-test-join .animals:after {
content: «cat tiger lion»;
}

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

Цикл repeat

Ещё одно сомнительное изобретение, которое не может найти в моей голове практического применения.

Class-test-repeat {
.repeat(«.test», » + «, 5);
@{string} {
float: right;
}
}

Какой-то глуповатый пример из документации:

Class-test-repeat .test + .test + .test + .test + .test {
float: right;
}

Переменные LESS

Как и SASS, LESS также использует переменные. Если вы до этого занимались составлением кода, вы знаете, насколько использование переменных упрощает любой процесс.

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

Для определения переменной LESS использует знак @. Давайте посмотрим на практике, как это работает.

Откройте файл LESS и вставьте в него следующий код. Для этого кода я создал 3 переменные для цвета, размера шрифта и рамки.

Я добавил переменные myColor и myFontSize в тэг H1, переменную myBorder я добавил в список идентификаторов myList:

@myColor: #1f7eff;
	@myFontSize: 30px;
	@myBorder: 1px solid #1f7eff;
	 
	h1 {
	color: @myColor;
	font-size: @myFontSize;
	}
	 
	#myList {
	border: @myBorder;
	}

Теперь, если вы откроете файл style.css, вы увидите, что код был обновлен. Идем дальше, запускаем этот код через адресную строку браузера.

Вы увидите что-то похожее на то, что приведено на рисунке ниже:

Другие препроцессоры

Haml и Sass не единственные доступные препроцессоры, включая также препроцессоры JavaScript. Вот некоторые другие популярные препроцессоры: Jade, Slim, LESS, Stylus и CoffeeScript.

Ради краткости Haml и Sass были единственными препроцессоры, рассмотренные в этом уроке. Они также были выбраны потому, что построены с использованием Ruby и прямо подходят к приложениям Ruby on Rails. Они также получили огромную поддержку сообщества.

Когда речь заходит о выборе, какой препроцессор использовать, важно рассмотреть вопрос о том, что лучше для вашей команды и проекта. Проекты, построенные в Node.js могут, вероятно, больше выиграть от Jade и Stylus

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

Работа с селекторами, медиа-запросами и файлами¶

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

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

  • Комментарии
  • Вложенные правила
  • Ссылка на родителя селектора
  • Группировка селекторов
  • Использование медиавыражений
  • Импорт стилей
  • Домашнее задание
Ссылка на основную публикацию