Уже существует множество готовых стилей, которые можно установить, нажав на значок расширения, когда вы находитесь на сайте :
После нажмите Найти стили
Вам будет предложен список всех доступных готовых стилей
Нажмите на стиль и он автоматически установится
Создание своего стиля
Также можно создать свой стиль. Для этого понадобятся знания CSS
Выберите пункт Создать стиль для :
Откроется окно, где вы сможете настроить свой стиль
Управление стилями
Выберите пункт Менеджер :
Откроется окно со списком всех установленных стилей
Здесь вы можете включить или выключить нужные стили
Здесь же можно отредактировать любой из стилей
Подводя итог, могу сказать, что это самое полезное расширение. С помощью него можно убирать некоторые блоки на странице (например, рекламные ), а также настраивать цветовые гаммы, форму и вид сайта
Поставь лайк , чтобы я понял, что тебе понравился этот лайфхак
Подпишись , если хочешь узнать больше о возможностях компьютера
Рисую на телефоне разными стилусами ( ˙-˙ )
Источник: dzen.ru
Stylus — препроцессор CSS
Stylus наименее популярный среди них, но я выбрал именно его. По возможностям, которые я использую, Stylus не уступает остальным. Но, так как предпочитаю минимализм во всем, то для меня синтаксис Stylus оказался самым комфортным из всех вышеперечисленных
Как и другие препроцессоры, Stylus имеет много преимуществ над обычным CSS — переменные, миксины, операторы, функции, импорты и так далее. В статье расскажу о базовых возможностях, которые очень упрощают и ускоряют написание стилей
Синтаксис Stylus
Сравним CSS и Stylus — слева синтаксис Stylus, справа синтаксис CSS
Визуальные отличия от синтаксиса CSS
- Не нужны фигурные скобки
- Не нужны точки с запятой после каждого свойства
- Не нужны двоеточия после названия свойства
Тем не менее Stylus воспринимает обычный синтаксис CSS, то есть рядом с синтаксисом Stylus можно вставить обычный CSS
Логические отличия от синтаксиса CSS
- Вложенность селекторов осуществляется через отступ Tab
- Возможность зависимости от названия родительского класса
Пример 1: Стилизуем ненумерованный список
На CSS это выглядит следующим образом
CSS
ul < padding: 0; margin: 0; >ul li < list-style: none; >ul li a
Чтобы не писать цепочку селекторов от родительского до дочернего, в Stylus используем отступы Tab
Stylus
ul padding 0 margin 0 li // генерируется селектор ul li list-style none a // генерируется селектор ul li a font-size 18px text-decoration underline
Пример 2: Стилизуем навигацию
CSS
.nav < background: #fafafa; >.nav__flex < display: flex; >.nav__item < background: #fff; >.nav__item:not(:last-child) < margin-right: 30px; >.nav__item a < font-size: 18px; text-transform: uppercase; text-decoration: underline; color: #0d3b66; >.nav__item a:hover < text-decoration: none; >.nav__item_active < background: #0d3b66; >.nav__item_active a
Если в обычном CSS решим переименовать родительский селектор .nav в .navigation , то необходимо будет искать все селекторы, которые зависят от него, и каждый переименовывать вручную.
S Pen — уникальный стилус или бесполезная «палочка» в смартфоне? | Краткая история и фишки S Pen
В Stylus существует специальный служебный символ — __flex // генерируется селектор .nav__flex (Элемент по методологии БЭМ) display flex :not(:last-child) // .nav__item:not(:last-child) margin-right 30px a // .nav__item a font-size 18px text-transform uppercase text-decoration underline color #0D3B66 _active // генерируется селектор .nav__item_active (Модификатор по методологии БЭМ) background #0D3B66 a // .nav__item_active a color #fff
Если в Stylus решим переименовать родительский селектор .nav в .navigation , то нужно будет переименовать только его, а так как дочерние селекторы зависят от наименования родительского селектора, то будут переименованы автоматически
Дополнительные возможности
Переменные
Переменные объявляются следующим образом — название_переменной = значение переменной . Название переменной может состоять просто из слова на английском языке, но предпочитаю имена переменных начинать со знака $ , чтобы не было пересечений с CSS свойствами и визуально было легче воспринимать переменные в файле стилей
Значением переменной может быть любое значение CSS-свойства, например — цвет, размер шрифта, размер отступа и так далее.
$main = #0D3B66 $second = #FF5964 $title-size = 48px $padding = 30px
Используем объявленные переменные
$main = #0D3B66 $second = #FF5964 $title-size = 48px $padding = 30px body background $main // генерируется background: #0d3b66; .section font-size $title-size // генерируется font-size: 48px;
Будут сгенерированы следующие CSS стили
body < background: #0d3b66; >.section__body < padding: 30px; >.section__title
Миксины
Миксины позволяют писать намного меньше стилей вручную. Они могут содержать в себе целый блок свойств, которые при верстке повторяются неоднократно, а также при необходимости принимать параметры
Объявление миксинов — название_миксина(параметр, параметр) , и на следующей строке после отступа Tab указываем свойство или несколько свойств (каждое свойство на отдельной строке)
// Плавный переход из одного состояния элемента в другое tr() transition all .3s ease // Масштабируем изображение на всю область родительского элемента fit() display block width 100% height 100% object-fit cover
Используем объявленные миксины
tr() transition all .3s ease fit() display block width 100% height 100% object-fit cover a color red tr() // генерируется свойство transition: all .3s ease; color: #f00; transition: all 0.3s ease; >a:hover < color: #00f; >.image < width: 400px; height: 300px; >.image img
Также в миксинах можно передавать параметры. Название параметра может быть произвольным словом на английском языке
tr(duration) // duration — продолжительность transition all duration ease a color red tr(.5s) // генерируется свойство transition: all 0.5s ease; color: #f00; transition: all 0.5s ease; >a:hover
Можно передавать несколько параметров через запятую
tr(prop, duration) // prop — свойство, для которого будем применять плавный переход, duration — продолжительность transition prop duration ease a color red tr(color,.5s) // генерируется свойство transition: color 0.5s ease; color: #f00; transition: color 0.5s ease; >a:hover
Можно передавать параметры без указания единиц измерения, а единицы измерения указать внутри миксина
tr(duration) // duration — продолжительность transition all (duration s) ease // в скобках на первом месте — параметр, на втором месте через пробел — единица измерения fontSize(val) font-size val em // если у свойства только одно значение, то можно писать без скобок — на первом месте — параметр, на втором месте через пробел — единица измерения a color red fontSize(2) // генерируется свойство font-size: 2em; tr(.5) // генерируется свойство transition: all 0.5s ease; color: #f00; font-size: 2em; transition: all 0.5s ease; >a:hover
В миксинах можно использовать объявленные переменные и другие объявленные миксины
$main = #0D3B66 fontSize(val) font-size val em button() fontSize(2) color $main a button()
Из примера выше генерируется следующий CSS
За счет такой гибкости, можно настроить множество миксинов, с которыми вам будет комфортно работать
Пока приводил простые примеры, на которых проще понять принцип работы миксинов.
Рассмотрим пример посложнее — сделаем миксин кнопки
$main = #0D3B66 $second = #FF5964 tr() transition all .3s ease btn(height,fontSize) // принимаем два параметра — высота кнопки без единиц измерения, размер шрифта кнопки height height px // подставляем значение параметра высоты и указываем единицу измерения — пиксели font-size fontSize // подставляем значение параметра размера шрифта, параметр будет передаваться с единицами измерения display inline-flex align-items center justify-content center text-align center text-decoration none text-transform uppercase font-weight bold color $second // подставляем значение переменной $second background $main // подставляем значение переменной $main padding 0 (height px) // внутренние боковые отступы будут равняться высоте, подставляем значение параметра высоты border-radius (height/2) px // используем оператор деления чтобы высчитать закругление углов (о них чуть позже) tr() // вызываем миксин плавного перехода tr() который сгенерирует transition: all 0.3s ease; height: 48px; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; text-transform: uppercase; font-weight: bold; color: #ff5964; background: #0d3b66; padding: 0 48px; border-radius: 24px; transition: all 0.3s ease; >a.button-large:hover < background: #114f89; >a.button-small < height: 30px; font-size: 0.7rem; display: inline-flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; text-transform: uppercase; font-weight: bold; color: #ff5964; background: #0d3b66; padding: 0 30px; border-radius: 15px; transition: all 0.3s ease; >a.button-small:hover
Операторы Stylus
Stylus имеет самые различные операторы для вычислений — сложение, вычитание, деление, умножение, отрицание, сравнение, логические операторы и так далее. Все перечислять не буду, покажу пару примеров, как их можно использовать
Если межстрочный интервал line-height в макете указан в пикселях, а в CSS наиболее корректно указывать его относительное значение в зависимости от размера шрифта, то с помощью оператора деления можно быстро вычислить относительное значение — значение межстрочного интервала делим на значение размера шрифта.
Расчеты желательно производить в круглых скобках
p font-size 18px line-height (30/18) // например, в макете line-height равен 30px p.accent font-size 36px line-height (48/36) // например, в макете line-height равен 48px
Сгененированный CSS
p < font-size: 18px; line-height: 1.666666666666667; >p.accent
Операторы удобно использовать в миксинах для динамически вычисляемых значений
btn(height) height height px font-size (height / 2) px // размер шрифта будет в два раза меньше высоты padding 0 ((height + 15) px) // размер внутренних бокобых отступов будет суммой значения высоты + 15px border-radius (height / 2) px // каждый угол будет закруглен ровно на половину от значения высоты a.button-large btn(100) // задаем кнопку высотой 100, остальные значения для свойств расчитываются автоматически
Сгененированный CSS
a.button-large
Встроенные функции Stylus
В Stylus большое количество встроенных функций. Рассмотрим некоторые из них
Встроенные функци round() и floor() для округления чисел.
В круглых скобках указываются параметры: первое значение — чаще всего результат деления, второе значение — количество знаков дробной части (после точки/запятой)
p font-size 18px line-height round(30/18, 3) // округляет до трех знаков дробной части в большую или меньшую сторону в зависимости от следующего знака дробной части p.accent font-size 36px line-height floor(48/36, 2) // округляет в меньшую сторону до двух знаков дробной части
Сгененированный CSS
p < font-size: 18px; line-height: 1.667; >p.accent
Встроенные функции darken() и lighten() для вычисления цвета. Чаще всего применяется при вычислении цвета при наведении на элемент или выделении активного элемента.
В круглых скобках указываются параметры: первое значение — цвет, который будет преобразован, второе значение — насколько процентов цвет будет преобразован
$main = #0D3B66 .circle background red :hover background lighten($main, 20%) // при наведении цвет фона указанный в переменной $main становится на 20% светлее
Сгененированный CSS
.circle < background: #f00; >.circle:hover < background: #d90000; >.square < background: #0d3b66; >.square:hover
Импортирование файлов стилей
В больших проектах основной файл CSS становится довольно большим. На этапе разработки Stylus предоставляет возможность разбивать стили на отдельные фрагменты, сохранять их в отдельных *.styl файлах и подключать эти файлы в основной файл стилей
Рассмотрим простой пример — вынесем часть стилей для адаптивности в отдельный файл media.styl и импортируем его в основной файл стилей main.styl
main.styl
Создадим рядом с main.styl файл media.styl и перенесем в него часть стилей для адаптивности
media.styl
В итоге генерируется main.css включая стили прописанные в файле media.styl
В больших проектах можно отдельно создавать и импортировать файлы для переменных, миксинов, даже определенных секций. Все это настраивается индивидуально для комфортной разработки в зависимости от задач
В шаблоне gulp-dev, который рассматривали в одной из предыдущих статей, в CSS генерируется только основной файл стилей main.styl (находится в папке app/styl/main.styl) в файл main.css (dist/css/main.css), любые другие *.styl файлы генерироваться не будут — они должны быть импортированы в основной файл main.styl
Возможные проблемы и их решения
Как и в случае с Pug, основная ошибка — это использование в отступах Пробелы вместо Tab. В качестве отступов можно использовать или только Пробелы или только Tab.
Решить эту проблему очень просто. В редакторе кода, в файле main.styl или в любом другом *.styl файле выделяем весь код сочетанием клавиш Ctrl+A и ищем настройку Tab size (в Sublime Text и VS Code справа внизу), нажимаем и выбираем пункт Convert Indentation to Tabs — все отступы конвентируются в Tab
Итоги
Stylus значительно ускоряет процесс верстки, за счет краткого, логичного и понятного синтаксиса, использования переменных, миксинов, операторов, встроенных функций, импортов и прочего. В статье рассмотрены только базовые возможности, но даже эти возможности экономят много времени
Итоговый CSS файл получается чистым, корректно сформатированым, где не будет разных отступов, пропущенных фигурных скобок, двоеточий и точек с запятой 😉
Источник: frontips.ru
Как ускорить вёрстку на CSS. Обзор главных препроцессоров в 2023
Препроцессоры — это инструменты, которые позволяют разработчикам с помощью новых синтаксических конструкций расширить возможности CSS. Например, они добавляют селекторы наследования, вложенные правила, примеси и многие другие.
Одна из важных задач препроцессоров — упростить и ускорить процесс разработки и поддержку стилей в проекте.
В обзоре рассмотрим наиболее популярные препроцессоры в 2023 году и расскажем, как выбрать подходящий.
Препроцессор Sass
Sass (Syntactically Awesome Style Sheets) — один из первых CSS-препроцессоров, создан в 2007 году и имеет большое сообщество разработчиков. На github.com у Sass 3500 звёзд, еженедельно препроцессор скачивает более одиннадцати миллионов разработчиков:
Sass расширяет возможности CSS, добавляя вложенные правила, использование ссылки на родительский селектор, вложенные свойства, шаблонные селекторы.
Sass позволяет вкладывать правила CSS друг в друга. Благодаря этому, родительские селекторы не повторяются и CSS-файлы со множеством вложенных селекторов становятся понятнее:
Среди CSS-свойств существует разные пространства имён, например, font . Чтобы каждый раз не вводить пространство имён при указании свойства, с помощью Sass можно указать пространство один раз, и затем добавлять нужные свойства:
Кроме того, Sass предоставляет возможность использовать операторы и функции, что весьма упрощает написание и поддержку CSS.
Это самостоятельный препроцессор, который не требует установки дополнительных инструментов. Его можно использовать с любым проектом, который применяет CSS, и компилировать с помощью инструмента Sass CLI или плагинов для сборки.
Препроцессор имеет два отдельных синтаксиса — Sass и SCSS.
Sass (Syntactically Awesome Style Sheets) — упрощённый синтаксис CSS, считается устаревшим. Он использует отступы вместо фигурных скобок, они указывают на вложение селекторов. Новые строки заменяют точки с запятой для разделения свойств:
SCSS (Sassy CSS) — основан на стандартном для CSS синтаксисе.
Сегодня SCSS является более используемой версией, но и у синтаксиса Sass остаются свои приверженцы. SCSS — стабильный и широко поддерживаемый препроцессор, часто используется в проектах, для него создают множество плагинов и расширений для улучшения функциональности.
Препроцессор Less
Less — это тоже распространённый препроцессор, у него 16 900 звёзд на github.com и около 5 миллионов скачиваний в неделю на npmjs.com.
Less был выпущен в 2009 году, поддерживает переменные, вложенные правила и миксины. Но он имеет менее сложный синтаксис, чем Sass, что делает его простым для изучения и использования.
Подобно Sass, Less является самостоятельным препроцессором, его код компилируется в обычный CSS. Для компиляции используют Less CLI или плагины, интегрированные в систему сборки проекта.
Препроцессор Less имеет схожие с Sass базовые функции. Но Less обладает дополнительными возможностями — в нём можно поднимать переменные, извлекать определённые компоненты из цвета, например, оттенок, насыщенность, яркость и контрастность.
С помощью Less этот пример компилируется в CSS:
.banner
Less используют множество разработчиков, он имеет широкий набор функций, быстрый и эффективный в использовании.
Препроцессор Stylus
Stylus — CSS-препроцессор, написанный на Node.js, создан в 2010 году. Использует синтаксис, похожий на Python.
font-size = 14px font-stack = «Lucida Grande», Arial, sans-serif body font font-size font-stack //Компилируется в CSS: body
Он добавляет множество функций — переменные, вложенные правила, миксины и наследование стилей. Stylus также имеет мощный набор своих функций, в том числе операторы, условные выражения и циклы.
У Stylus не такая обширная база пользователей, как у Less и Sass. У него 11 100 звёзд на github.com и больше 3 миллионов скачиваний в неделю.
Stylus удобен для работы и имеет свои преимущества. Его отличает гибкость — работая в нём, можно не использовать двоеточия, точки с запятой и запятые. Например, так будет выглядеть задание свойств сразу для нескольких селекторов:
textarea, input border 1px solid #eee
Также не нужны фигурные скобки для определения блоков, вместо них используются отступы. Для переменных, как и в Sass, применяется знак $.
$font-size = 14px body
Эти особенности позволяют разработчику сокращать время написания и создавать чистый код. Но в такой гибкости есть недостаток — при работе над крупным проектом код становится сложным для восприятия, так как отсутствуют чёткие разделители и идентификаторы.
Инструмент PostCSS
PostCSS — это инструмент, который позволяет преобразовывать CSS с помощью плагинов. Его выпустили в 2013 году, и сейчас он существует в 7 версии. Он не добавляет новый синтаксис, как Sass или Less, но предоставляет возможность модифицировать CSS с помощью JavaScript-плагинов.
У PostCSS множество плагинов, позволяющих выполнить широкий спектр задач, таких как оптимизация CSS-кода и многие другие. Благодаря этому, PostCSS позволяет гибко настраивать процесс компиляции CSS, используя только те плагины, которые нужны для конкретного проекта.
PostCSS также интегрируется с различными сборщиками проектов, например, с Webpack или Gulp, и позволяет автоматически запускать компиляцию CSS при изменении исходного кода, что делает его гибким и удобным в использовании.
Какой препроцессор выбрать?
Выбор препроцессора основывается на конкретных требованиях проекта, личных предпочтениях и опыте разработчика, а также на возможностях интеграции с другими инструментами и CMS.
Если вы новичок, то лучше начать с простых препроцессоров, таких как Sass или Less. Эти препроцессоры имеют более простой синтаксис, чем чистый CSS, большое сообщество, которое может помочь со сложными вопросами. Если вы опытный разработчик, то PostCSS — хороший выбор, так как он предоставляет более широкие возможности настройки и оптимизации.
Новичкам — Sass или Less, опытным — PostCSS
Если вы работаете над большим проектом, то отлично подойдут Sass или Less. Они имеют более структурированный синтаксис, который облегчит управление большим объёмом кода. Если вы заняты маленьким проектом, то PostCSS позволяет использовать только необходимые плагины, что может сделать процесс компиляции более быстрым и эффективным.
Для большого проекта — Sass или Less, для маленького — PostCSS
Если вам нужно оптимизировать CSS-код, то PostCSS может быть лучшим выбором, так как он предоставляет множество плагинов для оптимизации CSS.
Для оптимизации кода — PostCSS
Некоторые разработчики выбирают более традиционные препроцессоры Sass или Less, в то время как другие предпочитают гибкий инструмент PostCSS. Выбор препроцессора основывается на опыте и личных предпочтениях разработчика.
Если нужен более гибкий инструмент — PostCSS
Важно учитывать, что не все препроцессоры поддерживаются инструментами сборки проектов и CMS. Например, если вы работаете с WordPress, то удобнее использовать препроцессоры, которые легко интегрируются с этой CMS — Sass или Less.
Если работаете с WordPress — Sass или Less
При работе в команде выбор препроцессора может зависеть от предпочтений и опыта других разработчиков. Лучше всего обсудить этот вопрос с командой и выбрать препроцессор, который будет удобен для всех участников проекта.
При работе в команде — выбор согласуется со всеми
Также следует учитывать, что некоторые препроцессоры могут иметь большой объём кода, что может сказаться на производительности и скорости загрузки сайта. В таких случаях используют оптимизирующие плагины или инструменты, которые помогают уменьшить размер CSS-кода.
Материалы по теме
- В каких браузерах тестировать вёрстку в 2023
- 10 библиотек для CSS и JS анимации
- Обзор цветовых форматов в CSS
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Источник: htmlacademy.ru