CSS препроцессоры - первые шаги, введение в Sass (SCSS)

CSS является одним из наиболее важных языков для веб-разработчиков. Каскадные таблицы стилей ( C ascading S as more heets) - это информация для браузера о том, как должна выглядеть страница. Что касается давно устаревшего стиля страницы с помощью элементов и атрибутов HTML, CSS кажется настоящей революцией. Может ли быть что-нибудь лучше?

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

Самые популярные CSS-препроцессоры включают Sass и Less . Мы позаботимся о Sax , потому что его знания будут более полезными при использовании популярного Bootstrap или Materialise CSS.

В Sass доступны два синтаксиса: SCSS и Sass . Синтаксис SCSS - это действительно расширенный синтаксис CSS. Это означает, что любой код CSS будет действительным кодом SCSS . Из-за этого свойства SCSS я рекомендую этот синтаксис новичкам, но стоит помнить, что это просто еще одна запись на том же языке!

1 Каковы преимущества Sass?

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

caniuse caniuse.com - браузеры, отмеченные красным без поддержки CSS-переменных.

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

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

2 Кому нужен Sass?

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

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

3 Итак, мы устанавливаем!

на Сасса официальный сайт Есть много способов начать его использовать. Вы можете выбрать любой из перечисленных там или использовать наиболее удобное на мой взгляд предложение - описанное ниже;)

Если у вас еще нет кода Visual Studio (VS Code) , установить его ,
Запустите VS Code и перейдите в Расширения
Введите в поле поиска Easy Sass .
Найдите в списке Easy Sass и нажмите Установить .
Отключите и включите VS Code (вы можете нажать Обновить ).

Отключите и включите VS Code (вы можете нажать Обновить )

Уже! Правда легко ?

4 Первые шаги!

Давайте начнем с создания файла HTML ( Файл-> Новый файл ) - вы можете использовать этот код:

<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <link rel = "stylesheet" href = "main.css"> <title> Здравствуйте, Sass! </ title> </ head> <body> <h1> Hello, Sass! </ h1> <main> <p class = "warning"> Пример Sass </ p> <p> Пример Sass 2 </ p> </ main > <p> Пример Sass 3 </ p> </ body> </ html>

Как вы, наверное, заметили, мы загружаем в него файл CSS ( main.css ), потому что браузер не будет понимать файлы .scss. Давайте создадим новый файл SCSS в той же папке и сохраним его как main.scss . Таким образом, мы должны иметь эти 2 файла в папке:

Таким образом, мы должны иметь эти 2 файла в папке:

Так где же файл main.css ?! Spokojnie ;) Введите main.scss и введите любой код CSS , например, такой:

h1 {цвет: красный; } p {color: blue; }

Сохраните файл. Что случилось? При работе в фоновом режиме Easy Sass генерируется файл main.css и его модифицированная версия. Содержимое main.css в настоящее время ничем не отличается от main.scss :

scss :

Браузер правильно отображает написанный нами стиль:

5 Переменные и вложенность селекторов

Для проекта даже среднего размера цвет переднего плана - это значение, которое будет отображаться в таблице стилей десятки раз. Итак, давайте определим один раз цвета, используемые на странице в одном месте, и вместо значения мы даем имена переменных (имена переменных в SCSS начинаются с символа $):

$ основной цвет: красный; $ вторичный цвет: синий; h1 {color: $ primary-color; } p {color: $ second-color; }

Результирующий CSS выглядит так же, как ранее сгенерированный. То же, что страница в браузере. Если на странице появляется другой элемент красного цвета, используйте $ primary-color. Когда вы передумаете и обнаружите, что хотите зеленую страницу, измените только значение $ primary-color с красного на зеленый .

Другое упрощение - это вышеупомянутая вложенность селекторов. Если вы хотите применить стиль к абзацам (<p>) в элементе <main>, просто напишите:

main {p {color: $ second-color; }}

Полученный код CSS будет выглядеть так:

главная п {цвет: синий; }

Стилизация в соответствии со структурой элементов в файле HTML не только более естественна , но также экономит время и улучшает читаемость кода . В приведенном выше примере у нас есть только два дочерних элемента в <main>, но на практике их может быть намного больше - нам не нужно повторять запуск селектора каждый раз.

Давайте теперь применим стиль к абзацу с классом предупреждения :

main {p {color: $ second-color; .warning {color: $ primary-color; }}}

После копирования этого кода никаких изменений не видно. Почему? Компилятор создал такие селекторы в файле CSS:

главная п {цвет: синий; } main p .warning {color: red; }

Таким образом, красный цвет будет иметь элемент с классом предупреждения, который является потомком абзаца в <main>. У нас нет этого в коде страницы. Чтобы предотвратить появление пробела между p и .warning в результирующем CSS, используйте & .

main {p {color: $ second-color; & .warning {color: $ primary-color; }}}

Мы получим ожидаемый код:

главная п {цвет: синий; } main p.warning {color: red; }

warning {color: red; }

5 Резюме

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

Могу ли я добавить собственный CSS на свои целевые страницы загрузок?
Могу ли я добавить собственный CSS на свои целевые страницы загрузок? Да. В настройках плагина у вас есть вкладка для пользовательских CSS, где целевые страницы загрузок, а также общий каталог загрузок могут быть настроены в соответствии с вашей темой. Это позволит вам изменить CSS на лету. Вы также можете переписать CSS в своей теме CSS, используя те же классы и убедившись, что он загружается после плагина CSS. Последний вариант - отредактировать плагин css,

Может ли быть что-нибудь лучше?
Каковы преимущества Sass?
Кому нужен Sass?
Css ?
Что случилось?
Почему?
Как выглядит конверсия?
Могу ли я добавить собственный CSS на свои целевые страницы загрузок?

CSS препроцессоры - первые шаги, введение в Sass (SCSS)

Похожие

Комментарии