SASS для CSS: улучшите свои навыки работы с фронтендом с помощью препроцессора CSS

Серия SASS для начинающих

• SASS для CSS: совершенствуйте свои навыки интерфейса с помощью препроцессора CSS

• Лучшие практики SASS: 9 советов по внешнему интерфейсу для препроцессоров CSS

• Учебное пособие по Sass: модульное тестирование с помощью Sass True

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

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

Вот что мы рассмотрим сегодня.

• Что такое SASS?
• Почему вам следует использовать препроцессор CSS?
• SASS против CSS. vs. SCSS
• Руководство по функциям и процессам SASS
• Что изучать дальше

Поднимите свои навыки работы с CSS на новый уровень

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

SASS для CSS: расширенная разработка интерфейса

Что такое SASS?

SASS (Syntactically Awesome Style Sheets) — это язык сценариев и препроцессор CSS, который компилируется в CSS. чтобы создавать более быстрые, простые и элегантные таблицы стилей. SASS добавляет новые функции и инструменты поверх базового CSS, которые помогают упорядочивать таблицы стилей для больших баз кода удобным и удобным способом. Расширяя код CSS, SASS опирается на все, что вам нравится в CSS, и делает большие базы кода удобными для пользователя.

Что такое препроцессор CSS?

SASS — это инструмент, называемый препроцессором CSS , который можно использовать для кодирования более удобного для сопровождения CSS. Но что это на самом деле означает? Как вы, возможно, знаете, написание CSS может стать довольно повторяющимся. Препроцессор решает эту проблему! Препроцессор CSS — это, по сути, язык сценариев, который принимает один тип данных и преобразует его в другой тип. Он расширяет возможности CSS по умолчанию, позволяя создавать CSS с использованием синтаксиса исходного языка, который может быть скомпилирован в CSS.

SASS для CSS: почему вам следует использовать препроцессор CSS

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

• Они генерируют более чистый код благодаря вложенности и переменным. Одним из огромных преимуществ SASS является то, что вы можете вкладывать селекторы CSS в селекторы. Это означает, что вам нужно изменить имя элемента только один раз. Точно так же с SASS вы можете использовать переменные. Это позволяет вам сохранять значения и повторно использовать их в ваших файлах, упрощая ваш код в целом!

• Вы сохраняете свой код CSS Dry («Не повторяйся»). Так как теперь вы можете повторно использовать код, который вы уже написали, у вас меньше шансов совершить ошибки, вы остаетесь более организованным и экономите время, не повторяя задачи. Код, который вы напишете и протестируете, будет продолжать работать независимо от того, где вы его используете.

• Они обеспечивают большую гибкость. A Препроцессор CSS устраняет некоторые жесткие особенности CSS. Есть еще много вещей, которые вы можете делать спонтанно, используя препроцессор CSS, например, условные выражения или вычисления. Вы даже можете изменять цвета на лету, чтобы вам не приходилось жестко кодировать их в CSS.

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

• Они делают код CSS более организованным. Такие функции, как переменные и функции означают, что вы можете избавиться от подробного кода CSS, сделав его более читаемым и организованным. В конечном итоге с организованным кодом легче работать, публиковать и редактировать.

Sass против CSS против Scss

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

Вот почему SASS был разработан как «лучший CSS». В нем представлены новые функции и простота. SASS имеет два разных синтаксиса, которые часто сбивают с толку новичков: SASS и SCSS . Давайте разберемся в различиях.

SCSS (он же Sassy CSS) — это современный стандарт CSS, в котором используются скобки и точки с запятой. SCSS был представлен в версии 3 SASS как надмножество CSS. Он учитывает опасения, что SASS использует чужой синтаксис. SCSS не расширяет стандарт CSS, а просто улучшает синтаксис CSS. Фактически, CSS действителен в синтаксисе SCSS, поэтому их легко преобразовать. Файлы SCSS используют расширение .scss , и когда мы используем SCSS, мы по-прежнему называем его SASS..

SASS , с другой стороны, представляет собой препроцессор CSS и более старый синтаксис, который использует отступы для организации и разделения блоков кода. По сути, он предоставляет краткий способ написания CSS, расширяющий его функциональные возможности. Файлы SCSS используют расширение .sass .

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

Учебник по функциям и процессам SASS

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

Переменные

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

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

Определить переменную в SASS довольно просто. Вам просто нужен символ $ . Давайте посмотрим на пример, в котором мы определяем цвет как переменную.

  $ color-primary: # ffff00; //Желтое тело {background-color: $ color-primary;}  

Теперь background-color желтый, и когда мы компилируем наш код, он генерирует следующий код CSS.

  body {color: # ffff00;}  

Вложенность

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

Взгляните на исходный код CSS и сравните его с вложенным кодом SASS. Обратите внимание, как вложение li и ul добавляет иерархическую визуальную структуру к CSS-коду, что значительно упрощает его использование, редактирование и чтение.

CSS
CSS
• CSS
путь > CSS (SCSS)
• CSS(SCSS)

Миксины

Миксины позволяют группировать вместе несколько строк кода, которые можно повторно использовать в своем коде. Они похожи на функции в других языках программирования.

Обратите внимание, что миксины отличаются от функций SASS, поэтому не путайте их.

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

Создание миксина SASS

  @mixin transform {-  webkit-transform: повернуть (180 градусов);  -ms-transform: повернуть (180 градусов);  transform: rotate (180deg);}  

Добавление микширования в наш код

   .navbar {цвет фона: оранжево-красный;  набивка: 1 бэр;  ul {стиль списка: нет;  } ли {выравнивание текста: центр;  маржа: 1бэр;  @include преобразование;  }}  

Частичные и импорт

Частичные файлы SASS позволяют нам разбивать наши файлы на файлы меньшего размера. Мы можем существенно модулировать CSS, чтобы сделать код более удобным для сопровождения. Вы можете создать частичный файл, содержащий только соответствующий код для каждого раздела. Это полезно, если ваш файл SASS становится слишком большим..

Имя части начинается с подчеркивания _ . Затем его можно импортировать в любое время с помощью директивы @import .

Примечание. Эта директива отличается от директивы CSS, поскольку он не выполняет HTTP-запросы. Вместо этого он импортирует и объединяет файлы в один файл CSS, не влияя на производительность.

Например, мы могли бы создать заголовок с именем _header. scss и перенесите весь соответствующий код в этот файл. Затем его можно импортировать обратно в main.css с помощью этой директивы:

 //В main.scss@import 'header';  

Процессы сборки для ускорения рабочего процесса разработки

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

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

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

1. Компиляция: файл main.scss выполняет компиляцию в CSS. Как мы узнали ранее, SCSS очень легко компилируется в CSS. Мы выполняем компиляцию с использованием файла package.json .

2. Объединение: здесь мы объединяем все наши файлы CSS в один. Мы можем проверить это с помощью файла CSS с именем additional.css .

3. Префикс: использование автопрефикса гарантирует, что наши файлы будут работать во всех основных браузерах, добавляя в наш код префиксы поставщиков. Это можно сделать вручную или с помощью такого инструмента, как Autoprefixer.

4. Сжатие: это этап, на котором мы сжимаем наш код, чтобы максимизировать производительность. Мы делаем это, используя следующую строку кода:

  "compress-css": "node-sass css/style.prefix.css css/style.css --output-  стиль сжатый " 

Написание скрипта для запуска нашего кода

Выполнив эти шаги в вашем package.json , мы можем написать один последний скрипт для запуска всего нашего кода сразу. Мы используем следующую строку кода.

  "build-css": "npm-run-all compile-sass concat-css prefix-css compress-css"  

Наш последний код добавит все наши задачи, которые будут запускаться при выполнении нашей команды сборки, включая compile-sass , concat-css , prefix-css и compress-css . Затем мы можем использовать пакет npm-run-all , чтобы проверить его работу на разных платформах, используя следующую команду:

  npm install npm  -run-all --save-dev  

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

  npm run build-css  

Теперь все ваши файлы CSS создаются с помощью одной команды! Насколько это просто?

Заключение

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

Мы лишь прикоснулись к тому, что может предложить SASS. Другие полезные инструменты и функции включают

• функции
• наследование
• & операторы
• интерполяция
• и многое другое

Если вы готовы улучшить свои навыки интерфейса и освоить эти другие функции SASS, ознакомьтесь с учебным курсом SASS для CSS: расширенная разработка интерфейса . Этот интерактивный, удобный для новичков курс проведет вас через всю необходимую информацию о SASS.

Удачного обучения!

Продолжить чтение о CSS

• Анимация кода CSS: создание анимации панды с помощью HTML и CSS
• Рекомендации по SASS: 9 советы по интерфейсу для препроцессоров CSS
• React Bootstrap Tutorial: обновление приложений React с помощью CSS-фреймворка