Настройка препроцессора sass, подключение postcss плагинов

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 используется для получения нового значения переменной, благодаря «интегрированию» в значение другой переменной, посредством конструкции #{}, например:

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);
}

Step 3: Using Sass variables in a Next.js app

Now that we’re using Sass in our project, we can start using some of the basic features like variables.

To show how this works, we’re going to update the blue inside of our app to my favorite color, purple!

At the top of , add the following:

The color is what Next.js uses by default in the app.

Next, update each location that uses that color in our home CSS file to our new variables, such as changing:

to

If we refresh the page, nothing should change.


Unchanged Next.js app

But now because we’re using a variable to define that color, we can easily change it.

At the top of the page, change the variable to purple or whatever your favorite color is:

And when the page reloads, we can see that our colors are now purple!


Next.js app with purple color

Variables are just the start to the superpowers Sass gives our CSS, but we can see that they allow us to easily manage our colors or other values throughout our application.

Расширение возможностей CSS с помощью Sass

1.1 Правила вложения

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

1.2 Привязка к родительскому селектору

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

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

1.3 Вложенные свойства

Для удобства, вы можете разбивать суффикс пространства имен свойства на вложения. Например, margin
-top, margin
-bottom, margin
-left, margin
-right имеют общую основу margin
и могут быть разбиты на вложения следующим образом:

1.4 Селекторы-шаблоны

Иногда возникает ситуация, когда несколько элементов на странице используют одинаковую CSS базу, одинаковый набор свойств, характерный только для них. Данные базовые CSS правила можно оформить в виде селектора-шаблона для использования в нескольких местах Sass. Селекторы-шаблоны выводятся посредством директивы @extend
.

Authors (Авторы)

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

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

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

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

Лицо, которому могут быть адресованы вопросы по статье (Corresponding Author), помечается звездочкой или другим обозначением.

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

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

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

Вступление

Что такое линтинг?

Линтинг — это процесс проверки исходного кода на программные и стилистические ошибки. Это самый лучший способ выявления распространенных, и не очень, ошибок во время набора кода. Это как «проверка правописания» для языков программирования. В то время как линтинг полезен при самостоятельной работе, он становится незаменимым при работе в команде — когда много (неосторожных) рук касаются кода. Линт или линтер — инструмент реализующий проверку качества кода. Линтеры доступны для большинства языков: C, Python, JavaScript, CSS и прочих.

Почему мы должны линтовать наши CSS?

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

Давайте рассмотрим несколько примеров.

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

Они так же хороши в отлове описок (опечаток), как в примере с неправильным цветом. Ошибки такого типа могут сломать внешний вид страницы, если не будут отловлены.

Сегодня большинству CSS3-свойств больше не нужны префиксы. Линтинг позволяет найти ненужные префиксы и очистить устаревший код. Линтинг префиксов особенно полезен в паре с Autoprefixer — он позволит вам убрать все префиксы из исходного кода и добавить нужные, в зависимости от настроек Autoprefixer, учитывая вашу аудиторию.

Повторение свойств часто скрывает серьёзные ошибки. Что если разработчик хотел переход для обоих свойств и ? В этом случае эффект перехода для будет утерян. Линтинг покажет эту ошибку.

Достаточно убедительно? Если нет, то продолжайте чтение.

Представляем Stylelint

Stylelint — супер-расширяемый CSS-линтер на JS, который вы можете настроить под свой вкус. Это самое новое и лучшие в мире линтинга CSS. Он поддерживает синтаксис по последним черновикам спецификаций, понимает другие CSS-подобные синтаксисы, а также расширяется с помощью плагинов. Более того, он гораздо быстрее scss-lint, поскольку написан на JavaScript, а не на Ruby.

Линтер разработан на базе PostCSS, так что он понимает любой синтаксис, который может распарсить PostCSS, включая SCSS (и Less, прим. переводчика).

Главное предназначение PostCSS — это делать одну вещь, и делать ее хорошо; всё остальное делают плагины. Сейчас насчитывается более 200 плагинов для PostCSS и, поскольку все они написаны на JavaScript, они работают супер-быстро!

PostCSS и Stylelint — это то, что мы будем использовать, чтобы линтить наши стили в следующем разделе.

Расширяем Stylelint плагинами

Так же, как PostCSS, Stylelint расширяется с помощью плагинов, что на самом деле удивительно!

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

Проект-менеджер, который любит кодить

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

Что может быть хуже?

Вот код, который менеджер добавляет в проект:

Ух!

Вложенность селекторов в Sass — это плохо! Используем линтер!

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

Однако, более важно то, что вложенность здесь вообще не нужна

Вот CSS, в который будет скомпилировано правило, показанное выше:

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

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

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

И просто добавляем в наш файл для Gulp следующий код в таск :

Для команд, которые знают, что они делают, я бы установил максимальный лимит вложенности равный трём. (Установите его ниже для неопытных команд)

С максимальным лимитом вложенности равным трём, Stylelint заставит проект-менеджера исправить код выше. Проект-менеджер пойдёт, подумает и вернётся с таким кодом:

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

Вот, теперь мы уже пришли к чему-то! Теперь это будет принято линтером, и сборка пройдёт. Код выше не плох, но он всегда может быть лучше! Если вы хотите быть действительно суровым, вы можете отключить вложенность вовсе, оставив только (например для , — примечание переводчика). Это заставит членов команды, включая проект-менеджеров серьезно думать о том, что они пишут.

Отлично! Без линтинга стилей при сборке, который заставлял рефакторить код — эта опасная лень не была бы поймана и качество кода постепенно бы деградировало.

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

В добрый путь, мой друг разработчик и дизайнер!

Иди и линтуй!

Step 2: Importing Sass files into a Next.js app

Now that Sass is installed, we’re ready to use it.

In order you use any Sass-specific features though, we’ll need to use Sass files with either the or extension. For this walkthrough, we’re going to use the SCSS syntax and the extension.

To get started, inside of , change the import of the styles object at the top of the page to:

And once the page reloads, as we probably expect, the page is actually broken.


Next.js failed to compile

To fix this, rename the file:

to

The difference is we’re changing the file extension from to .

Once the page reloads, we’ll see that our Next.js site is loading and is back ready for action!


New.js app loading

Note: We’re not going to cover the global styles file here – you can do the same thing by renaming the global styles file and updating the import inside of

Next, we’ll learn how to use Sass features for our Next.js app.

Design a Styles Scheme with Sass Maps

With the help of maps, which are mainly like key indexed arrays, we can build a more semantic, meaningful set of styles for our theme, which will be easier to maintain and understand by our colleague developers. We could use lists as well, but, personally, I find maps more suitable for this purpose. Lists do not have keys while keys are self-explainable.

The map for our new approach will be a nested map:

If we wanted to access each section of our scheme and its sub-maps, we use the directive to loop through each of them:

will return the key of the current section, and will return the nested map that corresponds to that key.

Then, we can access the properties of each map, let’s say the background (bg) property, using the function:

Finally, combining our new mixin, based on our map structure, we can create as many themes as we like:

Note that we are also using the directive to differentiate properties for sections that are not buttons.

This way, we can add different properties for some sections to create specific properties or even rules, or we can distinguish between a key with a single value from another with a nested map.

Our theme could also consist of many maps used by several mixins, applied in different parts of our stylesheet. It all depends on the complexity of our base layout and, of course, our personal approach.

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

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

npm i --save-dev gulp sass gulp-sass

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

var gulp = require('gulp'), // Подключаем Gulp
		sass = require('gulp-sass')(require('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/, можно спокойно продолжать обучение и выполнять примеры, которые мы будем сегодня разбирать, на практике.

SASS Architecture

One of the things that makes preprocessing so useful is the ability to siphon your styling into separate files without having to compromise on performance. Here is an example of what the file structure might look like:

Utilities concerns itself with the variables and styles that are used across the entire application. The reset folder is where you would be your version of a CSS Reset and define anything that concerns the font of your webpage.

The components folder will have structural specific rules for buttons, carousels and other such elements. Each component should have its own file. The layout folder looks at the overall position on the page. This will be where you put definitions for your grid, your navbar, your footer, etc. The pages folder looks at each individual page’s style.

Typically, some sort of main file is created in the root of the sass folder that all the other files are into. These files are listed in the order you would like the styling applied. The cascading nature of CSS still applies.

References (Список литературы)

Подготовка правильного списка литературы – один из самых утомительных аспектов подготовки рукописи для публикации. Частично проблема заключается в том, что не существует стандартного или унифицированного формата для цитирования литературы, за исключением того, что «в Списке литературы указывают только те работы, на которые есть ссылки в тексте». Другими словами, раздел «Список литературы» и текстовые ссылки должны точно совпадать.

Хотя высказывание о том, что «стилей цитирования столько же, сколько журналов», является преувеличением, кажется, стилей цитирования столько же, сколько издателей. Некоторое время говорили о стандартизации стиля цитирования, и в этом плане был достигнут определенный прогресс. Лучшее правило, которому нужно следовать – как и во многих других аспектах научного письма – это следовать инструкциям журнала!

Существуют даже некоторые программы и онлайн-сервисы, которые помогают создавать/форматировать раздел «Список литературы», но здесь авторы уже следуют своим предпочтениям.

Общие стили цитирования литературы

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

1. Система цитирования с указанием имени автора и года публикации (стили оформления – APA, Harvard и Chicago). Фамилия первого автора и год публикации указаны в самом тексте (в скобках или без них); список литературы расположен в алфавитном порядке.

В этой системе легко добавлять или удалять цитируемую литературу, что является преимуществом для автора. А вот для читателя довольно утомительно, когда сразу несколько цитат указаны в одном предложении или абзаце, как это часто бывает в разделах «Введение» и «Обсуждение». Такое написание значительно увеличивает объем текста статьи, сравните: «Johnson and Schwarzkopf (2018)» или просто число «».

2. Нумерованный алфавитный список (Numbered Alphabetical Listing). Список литературы так же представляется в алфавитном порядке, но цитируемая литература нумеруется, цитата в тексте обозначается числом в круглых или квадратных скобках, а не именем и годом.

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

3. Система последовательности цитирования (Citation-Sequence System). Каждой цитате в тексте присваивается номер, обычно в виде верхнего индекса, в том порядке, в котором она впервые упоминается в тексте; список литературы распологается последовательно по номерам и не в алфавитном порядке.

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

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

Большинство зарубежных научных редакторов склоняется к формированию несложных для понимания списков литературы с минимумом знаков препинания. Таким образом, аббревиатуры журнала становятся практически единообразными. В настоящее время «J» с точкой или без после буквы является приемлемой аббревиатурой для «Journal» (ранее этот термин указывали как «Journal» или «Jour.»), а все термины с суффиксом «ology» сокращаются, удаляя последнюю часть «ogy» («Bacteriol» вместо «Bacteriology»; «Physiol» вместо «Physiology»; и т.д.)

Обратите внимание, однако, что однословные названия журналов (Science, Biochemistry) не сокращаются

The CSS @import Rule

is a CSS @-rule that was briefly popular before falling out of favor due to performance issues. If you’ve been developing websites for awhile, you may remember using it a number of years ago.

Using CSS’ @import you could include stylesheets inside other stylesheets. The included files could either be located on the same server or included with a URL to a directory on another server.

@import "style.css";  
@import "css/style.css";  
@import url("https://domain.com/css/styles.css");

While this allowed developers to import CSS files into other CSS files, the practice fell out of favor mainly because of a performance hit in @import, but some other issues as well. Sass removes the performance hit because the @import statements are removed from your Sass code when it compiles to CSS.

@forward

There’s more you can do with loading your stylesheets in SCSS but one of the most useful ones in relation to @use is the @forward rule. It allows you to gain access to members through another file. Here’s a quick example.

The _newBox.scss can’t access the variable from _button.scss. We will need to pass the styles explicitly forward. The @forward rule loads the styles as if they were defined inside the target file.

Get familiar with the @use rule to keep your projects organised and tidy and to avoid CSS conflicts and bugs. Use @forward to control which files can access which members. For more tips and tricks check out the Sass documentation and to bring your projects up to date have a look at the migration tool.

This article was posted in Development, Quick Tips by Minna Ylitalo

Minna Ylitalo
Our junior front-end developer, Minna is passionate about all things code. By day, she smashes through CSS and JS on projects like it’s nothing, and by night, she organises codebar Brighton. When she needs time away from the keyboard, Minna hits the local countryside for a walk in the fresh air.

Рейтинг
( Пока оценок нет )
Editor
Editor/ автор статьи

Давно интересуюсь темой. Мне нравится писать о том, в чём разбираюсь.

Понравилась статья? Поделиться с друзьями:
Люкс-хост
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: