В последнее время я пристрастился к учебе (на самом деле большую часть времени я наблюдал за финалами League of Legends S8), поэтому я сделал краткий обзор Stylus, который я изучал в эти дни. Эта статья должна быть полезна для тех, кто плохо знаком со Stylus~ Чтобы сделать код лучше для всех, код здесь представлен в виде скриншотов, а используемая IDE — VSCode.
представлять
Стилус очень хорошийПрекомпилятор CSS, — новый фаворит интерфейсного рабочего процесса. Очень лаконично написано! Насколько это просто?Пожалуйста, посмотрите на картинку
Стилус написан слева, а родной CSS написан справа. Не нужно писать точку с запятой! ! Не нужно писать двоеточие! ! Даже фигурные скобки можно опустить! ! ! Простой отступ по сравнению с написанным от руки кодом CSS просто...
Установить
Вы можете использовать пряжу для установки (рекомендуется) (Не знаю, как маленький партнер может видеть пряжу до того, как я написал статьи об использовании пряжи ~nuggets.capable/post/684490… )
yarn global add stylus
Вы также можете использовать npm для установки
npm install stylus -g
После установки вы можете использовать команду стилуса для компиляции и создания файлов css.
Например: это мой файловый каталог, сначала создайте файл стилуса, имя файла можно выбрать произвольно, здесь я называю его стилем, а суффикс файла должен заканчиваться на .styl
Содержимое файла написано аналогично CSS, но двоеточие, точка с запятой и фигурные скобки могут быть опущены, что достаточно лаконично.Затем откройте консоль (терминал) в каталоге файлов и введите стилусом командуВы обнаружите, что стилус автоматически компилирует и генерирует для нас файл style.css в этом каталоге.Затем откройте файл style.css, и вы обнаружите, что формат и все остальное автоматически заполнены для нас.Это очень удобно~ Стоит отметить, что когда мы пишем файлы стилуса, мы должны обращать внимание на отступ, потому что стилус идентифицирует уровни селектора и соответствующие правила стиля CSS на основе отступа. НапримерСкомпилируем снова стилусомВы обнаружите, что сгенерированные файлы css беспорядочны и сообщают о всевозможных ошибках!
Вы обнаружили, что каждый файл STYLUS будет повторно компилироваться каждый раз, когда файл Stylus перекомпилируется, так что у нас есть большие неудобства для наших разработчиков. Таким образом, стилус предоставляет решение, заключающееся в добавлении -w к исходной основе.
Таким образом, вы можете отслеживать изменения в режиме реального времени и компилировать их в режиме реального времени.
Когда мы изменяем файл стилуса (не забудьте сохранить после изменения Ctrl+S )Вы можете видеть, что консоль помогает нам перекомпилировать в реальном времени.Затем мы снова смотрим на файл cssЭто обеспечивает мониторинг в режиме реального времени, что также необходимо в нашем современном интерфейсном рабочем процессе, отслеживая обновления в режиме реального времени.
Селектор
отступ Как я уже говорил в начале, отступ стилуса очень важен, по отступу стилус различает селекторы и стили CSS, поэтому после написания селектора обязательно обратите внимание на отступ следующей строки.
запятая Stylus, как и CSS, позволяет вам определять свойства для нескольких селекторов одновременно с помощью запятых.Вы также можете опустить запятую и написать селектор в одной строке, чтобы добиться того же эффекта.
вложенный стилус поддерживает вложенный синтаксис, эквивалентный селекторам потомков
родительская ссылка Родительская ссылка проста: соединение с родительским селектором. Синтаксис заключается в добавлении вложенного селектора с&характер, давайте посмотрим непосредственно на примере
Реализовать использование селекторов пересечения
Реализовать использование псевдоэлементов
Переменная
В Stylus можно определить переменные для хранения часто используемых данных, а затем использовать их в наших стилях. Метод определения переменных также очень прост и может использоваться напрямую.имя переменной = значение переменнойформа
bgc = green
fz = 10px
...
Рекомендуется унифицировать объявление переменных и присвоение в верхней части.
Конечно, вы также можете определить переменные с идентификаторами. Стилус поддерживает символ $ для определения переменных, если вы изучили Sass, он должен быть вам знаком.Переменные могут даже относиться друг к другу, чтобы сформировать список выраженийПоиск недвижимости Stylus имеет еще одну интересную уникальную функцию, которая позволяет вам определять ссылочные свойства без присвоения значений переменным. Вот хороший пример выравнивания элементов по горизонтали и вертикали (обычно с использованием процентов и отрицательных полей). Мы можем даже не использовать здесь переменные w и h, а просто добавить символ @ перед именем атрибута, чтобы получить доступ к значению, соответствующему имени атрибута. то есть@+属性名можно использовать как переменнуюПузырьковый поиск переменных
смешивание
Смесь может быть похоже на блок кода, который может быть мультиплексирован кодом, например,
Вы также можете написать правила стиля CSS в миксе для повторного использования.Подводя итог, нужно написать несколько часто используемых блоков кода в миксе и использовать их повторно, что может сократить объем кода!
метод (функция)
Сила Stylus заключается во встроенных определениях языковых функций. Определение такое же, как у примесей, разница в том, что ссылка предназначена для повторного использования блока кода напрямую, а ссылка на функцию — для возврата возвращаемого значения. Возьмем простой пример
Функция параметров по умолчаниюСтилус также может поддерживать несколько возвращаемых значений, что очень важно!Мы также можем передавать функции в качестве аргументов для новых функций.
Примечания
Давайте поговорим о комментариях, однострочных и многострочных комментариях. однострочный комментарий
многострочный комментарий
представлять
sylus также может вводить внешние файлы стилуса.
Суммировать
Использование препроцессора CSS на самом деле очень похоже, не более чем предоставление программируемых возможностей CSS, включая некоторые переменные, функции, операторы и операции if-else. Если вы хотите узнать больше о Stylus, я рекомендую всем прочитать статью Zhang Xinxu о Stylus.www.zhangxinxu.com/jq/stylus/ Вот лишь список часто используемых способов, которого достаточно для решения большинства задач в реальном бою. Я надеюсь, что смогу помочь вам. Если вы считаете, что эта статья хороша, вы можете поставить лайк и поддержать ее. Спасибо!