Как использовать плагин stylus firefox
Русские Блоги
Stylus Начало работы Как использовать
введение STYLUS
Что такое призрак? Для развития, слабость CSS является статической. Нам нужен инструмент, который действительно повышает эффективность разработки. LESS ， SASS Оба способствовали в этом отношении.
Stylus Это является основой CSS предварительной обработки, произведенным в 2010 году, от сообщества Node.js, в основном используется для CSS предварительной обработки поддержки проекта узла, так Stylus Это новый тип языка, который может создать надежный, динамичный, выразительный CSS. Это более молодой, это предметы первой необходимости. SASS / LESS Подождите, как, должно быть много ссылок, поэтому приблизительный сценарий будет писать код CSS.
Stylus Функция является более сильной, и JS более близко. Поэтому я выбрал Stylus ， SASS После игры на некоторое время, это в основном это полагаться на Ruby, так что я буду отказываться от использования.
установка Stylus
Глобальная установка, вам необходимо устанавливать перед установкой nodejs Как установить этот поиск.
Это будет использовать стилус, как правило, если он установлен.
Создание CSS
Командная строка
ГРУНТ поколение
Справочник Stylusexample создает два файла, что является существенным ГРУНТ файл.
Package.json: Используется для сохранения метаданных проекта.
GRUNTFILE.JS: Используется для настройки или определить задачи, загрузите GRUNT плагин.
Необходимый плагин затем устанавливается, что позволяет файл Стилус для автоматического изменения, создавать в соответствующий каталог файлов. Если сообщение об ошибке, вам нужно добавить Sudo перед командной строкой, чтобы дать ему наибольшее разрешения выполнения.
Это предупреждение устанавливается npm WARN package.json [email protected] No README data Вы можете игнорировать это, если смотреть неудобно, вам нужно создать файл readme.md ниже каталога Stylusexample и введите содержание. Может быть также выполнена Эхо «#stylus обучения» >> Readme.md
После того, как модуль выполнен package.json Файл стал как это.
В это время вы должны использовать эти плагин для выполнения ваших потребностей задачи Gruntfile.js Написать выполнение задачи внутри.
Обратите внимание на чтение, каталог высок, это не нужно, чтобы напомнить ему, на этот раз вы можете играть стилус.
Stylus от Stylus Team, Jeremy Schomery
Метаданные расширения
Используется
Функции и возможности
Стилус использует только небольшое подмножество каждого разрешения. Как вы можете увидеть в документации WebExtensions API или в упрощенных описаниях, невозможно применить вообще никакие изменения к странице сайта без получения разрешения на полный доступ к этой странице. Стилус преимущественно используется с глобальными стилями, поэтому запрашивает глобальное разрешение. В будущем мы, возможно, сумеем воплотить более разграниченный подход, но это отнюдь не тривиально.
Нам и нашему браузерному расширению, в отличие от некоторых схожих, не интересно кто вы и чем вы занимаетесь. Пусть сомнительные сайты останутся между вами и провайдером. Стилус не «стучит».
Сообщить о нарушении правил этим дополнением
Если вы считаете, что это дополнение нарушает политики Mozilla в отношении дополнений, или имеет проблемы с безопасностью или приватностью, сообщите об этих проблемах в Mozilla, используя эту форму.
Не используйте эту форму, чтобы сообщать об ошибках или запрашивать новые функции в дополнении; это сообщение будет отправлено в Mozilla, а не разработчику дополнения.
Этому дополнению нужно:
December 27, 2014
Установка Stylus
Препроцессор Stylus является Open Source проектом, расположенным на GitHub, поэтому его можно легко установить как из исходных файлов, так и с помощью менеджера пакетов npm :
Основы синтаксиса Stylus
Синтаксис Stylus очень похож на синтаксис остальных препроцессоров (Sass или LESS). Но давайте более детально рассмотрим, что он из себя представляет на деле:
Создание и использование миксинов
Миксины чрезвычайно полезны по нескольким причинам. Благодаря им при написании стилей на CSS можно использовать логику, а также структурировать код.
Создание миксинов в Stylus является простой задачей, а синтаксис миксинов именно такой, какой и ожидалось увидеть:
При создании миксинов под Stylus можно задать значения по умолчанию для аргументов:
Миксин может возвращать вычисляемое значение с помощью ключевого слова return или же возвращать стили, определенные внутри самого миксина. Такие стили можно применить к элементу, который вызывает этот миксин:
И конечно же, внутри миксинов можно использовать условия (впрочем, как и в любом другом месте кода на Stylus):
Представленный выше миксин генерирует grid на основе минимального значения (минимальной ширины столбца), максимального значения (максимальной ширины столбца) и количества столбцов (которое изменяется с помощью инкремента). Последний аргумент return-dimension служит для указания того, будет ли миксин просто возвращать полученное значение, не создавая CSS-классов.
Полезные миксины Stylus
Обнуление last child
С помощью этого миксина устанавливается margin или padding для блока-родителя. А затем просто убирается пустое пространство у последнего элемента этого блока.
Стилизация placeholder
Стилизация placeholder является достаточно хитрой задачей из-за необходимости использования вендорных префиксов, поэтому использование миксина значительно упрощает эту задачу:
Заключение
На этом перевод закончен.
От себя могу добавить.
Плагин Emmet имеет поддержку синтаксиса Stylus (меня Emmet не перестает радовать). Все горячие клавиши Emmet остались неизменными и под Stylus, как если бы я кодил в старом добром CSS.
В одной из предыдущих статей мы установили и запустили Gulp
Что такое Stylus?
Stylus наименее популярный среди них, но я выбрал именно его. По возможностям, которые я использую, Stylus не уступает остальным. Но, так как предпочитаю минимализм во всем, то для меня синтаксис Stylus оказался самым комфортным из всех вышеперечисленных
Синтаксис Stylus
Визуальные отличия от синтаксиса CSS
Тем не менее Stylus воспринимает обычный синтаксис CSS, то есть рядом с синтаксисом Stylus можно вставить обычный CSS
Логические отличия от синтаксиса CSS
Пример 1: Стилизуем ненумерованный список
На CSS это выглядит следующим образом
Чтобы не писать цепочку селекторов от родительского до дочернего, в Stylus используем отступы Tab
Stylus
Пример 2: Стилизуем навигацию
Stylus
Дополнительные возможности
Переменные
Используем объявленные переменные
Будут сгенерированы следующие CSS стили
Миксины
Миксины позволяют писать намного меньше стилей вручную. Они могут содержать в себе целый блок свойств, которые при верстке повторяются неоднократно, а также при необходимости принимать параметры
Используем объявленные миксины
Сгенерированный CSS
Также в миксинах можно передавать параметры. Название параметра может быть произвольным словом на английском языке
Сгененированный CSS
Можно передавать несколько параметров через запятую
Сгененированный CSS
Можно передавать параметры без указания единиц измерения, а единицы измерения указать внутри миксина
Сгененированный CSS
В миксинах можно использовать объявленные переменные и другие объявленные миксины
Из примера выше генерируется следующий CSS
За счет такой гибкости, можно настроить множество миксинов, с которыми вам будет комфортно работать
Пока приводил простые примеры, на которых проще понять принцип работы миксинов.
Данный миксин можно будет использовать во всем проекте при создании любого количества кнопок, передавая только необходимые параметры. Миксин можно настроить максимально гибко, передавая и другие параметры, например цвет фона, цвет текста, закругление углов и так далее
В итоге будет сгенерирован следующий CSS
Операторы Stylus
Расчеты желательно производить в круглых скобках
Сгененированный CSS
Операторы удобно использовать в миксинах для динамически вычисляемых значений
Сгененированный CSS
Встроенные функции Stylus
В Stylus большое количество встроенных функций. Рассмотрим некоторые из них
Встроенные функци round() и floor() для округления чисел.
Сгененированный CSS
Встроенные функции darken() и lighten() для вычисления цвета. Чаще всего применяется при вычислении цвета при наведении на элемент или выделении активного элемента.
Сгененированный CSS
Импортирование файлов стилей
В больших проектах основной файл CSS становится довольно большим. На этапе разработки Stylus предоставляет возможность разбивать стили на отдельные фрагменты, сохранять их в отдельных *.styl файлах и подключать эти файлы в основной файл стилей
main.styl
Создадим рядом с main.styl файл media.styl и перенесем в него часть стилей для адаптивности
media.styl
Импортируем файл media.styl в основной файл стилей main.styl, для этого используем @import
В итоге генерируется main.css включая стили прописанные в файле media.styl
В больших проектах можно отдельно создавать и импортировать файлы для переменных, миксинов, даже определенных секций. Все это настраивается индивидуально для комфортной разработки в зависимости от задач
Возможные проблемы и их решения
Итоги
Stylus значительно ускоряет процесс верстки, за счет краткого, логичного и понятного синтаксиса, использования переменных, миксинов, операторов, встроенных функций, импортов и прочего. В статье рассмотрены только базовые возможности, но даже эти возможности экономят много времени
Итоговый CSS файл получается чистым, корректно сформатированым, где не будет разных отступов, пропущенных фигурных скобок, двоеточий и точек с запятой 😉
Zencoder
Полезные статьи о вёрстке для верстальщиков
Декабрь 27, 2014
Установка Stylus
Препроцессор Stylus является Open Source проектом, расположенным на GitHub, поэтому его можно легко установить как из исходных файлов, так и с помощью менеджера пакетов npm :
Основы синтаксиса Stylus
Синтаксис Stylus очень похож на синтаксис остальных препроцессоров (Sass или LESS). Но давайте более детально рассмотрим, что он из себя представляет на деле:
Создание и использование миксинов
Миксины чрезвычайно полезны по нескольким причинам. Благодаря им при написании стилей на CSS можно использовать логику, а также структурировать код.
Создание миксинов в Stylus является простой задачей, а синтаксис миксинов именно такой, какой и ожидалось увидеть:
При создании миксинов под Stylus можно задать значения по умолчанию для аргументов:
Миксин может возвращать вычисляемое значение с помощью ключевого слова return или же возвращать стили, определенные внутри самого миксина. Такие стили можно применить к элементу, который вызывает этот миксин:
И конечно же, внутри миксинов можно использовать условия (впрочем, как и в любом другом месте кода на Stylus):
Представленный выше миксин генерирует grid на основе минимального значения (минимальной ширины столбца), максимального значения (максимальной ширины столбца) и количества столбцов (которое изменяется с помощью инкремента). Последний аргумент return-dimension служит для указания того, будет ли миксин просто возвращать полученное значение, не создавая CSS-классов.
Полезные миксины Stylus
Обнуление last child
С помощью этого миксина устанавливается margin или padding для блока-родителя. А затем просто убирается пустое пространство у последнего элемента этого блока.
Стилизация placeholder
Стилизация placeholder является достаточно хитрой задачей из-за необходимости использования вендорных префиксов, поэтому использование миксина значительно упрощает эту задачу:
Заключение
На этом перевод закончен.
От себя могу добавить.
Плагин Emmet имеет поддержку синтаксиса Stylus (меня Emmet не перестает радовать). Все горячие клавиши Emmet остались неизменными и под Stylus, как если бы я кодил в старом добром CSS.