Sass – препроцессор для ваших веб-гарниров

sass – preproczessor dlya vashih veb garnirov?v=1656589336

Значение эстетики, ее влияние и инструмент ее достижения.

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

Блюдо с хорошим покрытием иногда может превзойти вкус. Тенденция к внешности оказывает значительное влияние на наш выбор. Эта склонность к тарелке ограничивается не только едой. Стильная одежда, украшенная квартира и хорошо оформленный автомобиль – это несколько примеров.

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

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

По мере развития Интернета программы становятся все больше и больше. Чтобы соответствовать нашим потребностям, нам нужно больше CSS из коробки. Но у CSS есть некоторые ограничения.

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

Предпосылки

Вы должны хорошо понимать CSS и селекторы CSS. Вам также понадобятся установленные Node.js и npm.

Ограничение CSS

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

  1. Механизм программирования: такие функции, как переменные, функции, классы и операторы, отсутствуют в самом CSS3.
  2. Длинный файл CSS: в программах с богатым пользовательским интерфейсом таблицы стилей могут расти за одну ночь. Большие файлы могут быть кошмаром для обслуживания.
  3. Отсутствуют математические операторы: математические операторы, как +, -, *, / иногда может быть очень удобным.

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

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

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

CESwXT5CXZaW0zD9UFfMK5-Da4aDae98nXsv
Иллюстрация: препроцессор Sass

Препроцессор CSS расширяет синтаксис CSS, добавляя в него механизм программирования. SassScript — это набор CSS. После компиляции он создает действительные блоки CSS для веб-приложений.

Есть несколько доступных препроцессоров CSS, к примеру Less, Stylus и Sass. Мы сосредоточимся на Sass (Синтаксически удивительные таблицы стилей). Но концепция более-менее такая же для других препроцессоров.

Мы рассмотрим установку компилятора Node.js Sass, а позже мы увидим разные функции Sass в действии. Итак, готовьтесь украсить свои вкусные веб-рецепты?

Готовим Sass

Sass сначала был написан на Ruby, а затем на других языках. Вы можете выбрать из множества доступных реализаций. В этой статье мы будем придерживаться пакета Node.js – node-sass. Этот пакет использует высокопроизводительную реализацию Sass на C, называемую libSassSass.

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

npm install node-sass -g

Здесь мы просим установить менеджер пакетов узлов node-sass для нас. С флагом -g, мы установили пакет глобально. Прекрасно! Когда все кончится, убедитесь, что все на месте.

node-sass -v
HLBJvf-d3thAinPmMy57ICBe-Y7Ajv25U5lf
команда для проверки версии node-sass.

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

Различные вкусы Sass

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

  1. Стиль Sass: этот синтаксис использует отступы для разделения блоков кода и новых строк.
  2. Стиль SCSS: этот синтаксис использует блоки как язык программирования. В этой статье мы используем синтаксис SCSS.

Примечание: можно конвертировать из одного синтаксиса в другой с помощью простой команды Sass convert. Не стесняйтесь принять то, что вам нравится.

Приготовление основного блюда

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

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

zC4AvUGKCWqbLR5DreeRNgx7QjCadVK5LASJ

Пока мы создали папку и два файла.

  1. index.html: файл HTML.
  2. style.scss: корневой (или основной) файл сценария Sass.

Для начала создадим a divan h1и два buttons в файле HTML.

jTk6IeVPWVD77fz9CvCFXv36nJNtIULc60En

Давайте просмотрим наиболее часто используемые функции Sass. По дороге мы увидим скомпилированные блоки CSS.

Переменные

Переменные помогают централизовать свойства CSS. Вы можете назначить их один раз в верхней части файла и использовать их по всему файлу. Эти переменные похожи на заполнители для значения свойств CSS. В Sass имя переменной должно начинаться с a $ знак.

Мы собираемся создать две переменные: $h1-color и $h1-height. Затем мы будем использовать переменные, чтобы назначить свойства цвета и высоты файла. h1 элемент. Ниже представлен фрагмент Sass.

$h1-color     : blue;
$h1-height    : 50px;
h1{
   color  : $h1-color;
   height : $h1-height;
}

Хорошо! Пока у нас есть файл HTML и файл Sass. А как насчет файла CSS? Он еще не явился.

Ну мы почти на месте. Откройте терминал, чтобы перейти к папке, которую мы создали, и выполните следующую команду:

node-sass style.scss style.css

Параметры для node-sass компилятор – это путь к входному и выходному файлу. Теперь, если вы откроете HTML, созданный при настройке проекта в браузере, вы увидите следующее.

Y3ZYYB1x0X-4unWyqymzGItI3HPBe0rEBw6Y
HTML с применением CSS

Обратите внимание, что файл CSS уже включен в HTML headСм. раздел.

Операторы

Математические операторы всегда отсутствовали в CSS. Sass предоставляет основные математические операторы, например добавление +вычитание -умножение * и разделение/.

Вы можете использовать вместе переменные и операторы для манипулирования свойствами CSS. Давайте возьмем пример. Мы можем использовать операторы для вычисления заполнения для an h1 элемент в зависимости от ширины его родительского элемента div. Мы будем использовать оператор деления / для этого примера.

$h1-color   : blue;
$h1-font    : 50px;
$div-width  : 500px;
div{
   width: $div-width;
}
h1{
   color       :  $h1-color;
   height      :  $h1-font;
   padding     :  $div-width / 10;
}

Миксины

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

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

@mixin border-radius($radius){
   -webkit-border-radius   : $radius;
   -moz-border-radius      : $radius;
   -ms-border-radius       : $radius;
   border-radius           : $radius;
}
div{
   width    : $div-width;
   border   : 2px solid grey;
   @include border-radius(20px);
}

Здесь мы использовали @mixin директива для определения миксина с ним border-radius. Этот миксин содержит все возможные свойства для установки радиуса предела. Мы также передали этот миксин. Каждый раз, когда вам нужно установить радиус элемента, включайте этот миксин в @include ключевое слово.

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

//Processed CSS output
div {
   width: 500px;
   border: 2px solid grey;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   -ms-border-radius: 20px;
   border-radius: 20px; 
}

Гнездование

Элементы HTML имеют логическую древовидную структуру со вложенными элементами. Чтобы написать структурированные селекторы CSS, CSS также должен соблюдать определенную логическую вложенность. Однако CSS не поддерживает вложение.

Поскольку у вас есть Sass на вашем компьютере, написание вложенных CSS-селекторов – это просто.

div{
   >h1{
      color: blue;
      &:hover{
         color: greenyellow;
      }
   }
}

Здесь мы использовали два комбинатора, > аnd&. Цель комбинатора – объяснить взаимосвязь между элементами. Наш пример применит синий цвет к all h1 дети a элемент div. Другим селектором является родительский выборor &. Используйте этот селектор для псевдоклассов, таких как курсор, фокусировка и активная.

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

//Processed CSS output
div h1 {
   color: blue;
}
div h1:hover {
   color: greenyellow;
}

наследование:

Да, вы также можете использовать самую популярную функцию ООП в Sass. Начисление имущества одного из родителей – это наследование. Но имеет ли это какой-нибудь смысл в CSS? И можем ли мы ими воспользоваться? Мы можем! Поверьте мне, и я уверен, что вам понравится эта функция.

Рассмотрим приложение, где у вас есть разные типы кнопок. Сохраните, Отмените и Выбросьте. Вы понимаете, что они разделяют большинство своих характеристик. К примеру, отступление, размер шрифта, поля. Единственное отличие – цвет фона.

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

%common-button{
   padding: 16px 8px;
   border: none;
   font-size: 18px;
}
.save{
   @extend %common-button;
   background-color: blue;
   color: white;
}
.cancel{
   @extend %common-button;
   background-color: goldenrod;
   color: white;
}

Вот, save и cancel кнопки унаследовали свои общие свойства от common-button класс. Чтобы объявить родительский стиль, используйте % знак. Использовать @extend директива для наследования дочернего блока

Импорт

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

Sass также имеет решение этой проблемы: частичный файл. Фрагмент — это способ создания небольших модульных файлов Sass. Корневой файл Sass может импортировать эти модульные файлы вообще. Конвенция об именовании частичных файлов состоит в том, чтобы перед названием файла ставился символ подчеркивания. _.

1Gmm4N1YrO2DElcL8igxSY7CTEulf0gqKQNQ
@import '_buttonpartial';
h1{
   color:blue;
}

Использовать @import директиву для включения частичного файла в корневой скрипт Sass

Петля

Итерация является одним из наиболее часто используемых механизмов программирования. Скрипт Sass позволяет перебирать переменные. Вы можете использовать различные директивы, например @for, @each и @while.

$totalButton: 2;
@for $i from 1 through $totalButton{
   .button-#{$i} {
      width: 50px * $i;
      height: 120px / $i;
   }
}

Сгенерированный блок CSS будет иметь два класса с разными стилями.

//Processed CSS output
.button-1 {
  width: 50px;
  height: 120px; }
.button-2 {
  width: 100px;
  height: 60px; }

Избегайте повторений – используйте кухонный комбайн

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

Мы использовали пакет Node.js для компиляции Sass. Это может очень раздражать, если вам придется компилировать всякий раз, когда вы вносите изменения в сценарий Sass.

Существует фантастический способ избежать повторяющейся компиляции: задача бегун. Visual Studio Code имеет встроенный запуск задач, но вы можете использовать любое средство для запуска задач по вашему выбору. Gulp – еще один популярный бегун задач. Для компиляции сценария Sass с помощью Gulp вам понадобится компилятор gulp sass.

ВНИМАНИЕ! Sass – это только инструмент разработки. Избегайте отправки библиотек или файлов, относящихся к Sass. Они вам никогда не пригодятся на рабочем сервере.

Что дальше

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

Я также создал образец проекта. Давайте, клонируйте проект и начинайте играть.

Добавить комментарий

Ваш адрес email не будет опубликован.