Gulp stylus: gulp-stylus + gulp-concat = любовь? — Хабр Q&A

0.54.5″,

• gulp
• сборка
• media-queries
• stylus

1

https://stackoverflow.com/a/45814394/873481

Вы можете использовать @css, что бы не дать stylus изменить ваше правило:

@css{
  @media all and (min-width:0\0) and (min-resolution:.001dpcm){
    // здесь ваш css код
  }
}

и получаете точно это:

 @media all and (min-width:0\0) and (min-resolution:.001dpcm){
   // здесь ваш css код
 }

Так же Вы можете использовать интерполяцию:

@media all and ({"min-width:0\0"}) and (min-resolution:.001dpcm)

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Создание социконок с помощью Gulp, stylus, bower, font-awesome, yeoman MODX

Создание рабочей папки проекта с помощью Yeoman

Создадим папку с названием myicons и воспользуемся генератором Tapp, который создаст все директории с пакетами Stylus, Jade, Gulp, Browserify, Bower и остальными.

При успешном запуске Yeoman у вас должна получится такая картинка:

После выполнения этих команд у вас получится приблизительно такая структура:

Запустим Gulp командой:

gulp serve

Остальные команды вы можете просмотреть в файле .gulpfile.

При успешном запуске у вас должна получится следующая картинка:

кроме этого должно открыться окно браузера по-умолчанию по адресу http://localhost:9000, которая будет иметь следующий вид:

Перейдём к нашему главному шаблону app/index.jade и вставим туда код для социконок, у меня получился такой:

Пару слов о том, как работает gulp с jade шаблоном в нашем случае при запуске команды gulp serve, если совсем упрощённо:

1. Он наблюдает за изменениями файлов jade в папке app
2. Конвертирует все файлы . jade в .html, сжимает и передаёт их в папку dist

Установка и подключение Font-awesome

Tapp генератор установит также и Bower — установщик пакетов. Воспользуемся им и установим иконочный шрифт Font Awesome:

bower install font-awesome

Укажем стили в index.jade:

После этого в браузере у вас должны отобразится иконки:

Создание стилей с помощью Stylus

В комплекте у нас шёл и Stylus, цвета для социконок я брал с Brandcolors. Давайте воспользуемся мощью Stylus, создадим пару функций и придадим стили нашему коду, сделанному по BEM-методологии:

Для красоты я добавил transition свойство при наведении и уходе с иконки, поэтому получился такой код.

В результате этого должны получится вот такие иконки:

Код для вставки в ваш сайт можете найти в dist/index. html и dist/styles/main.css

Я создал на Github репозиторий с этим кодом, поэтому можете сразу склонировать себе и запустить проект:

Демо можете увидеть внизу на этом сайте. Как обычно — не стесняйтесь задавать вопросы и давать замечания в комментариях.

14-01-2016 Frontend Yeoman Gulp Виктор Матушевский

Создание SVG спрайтов с помощью Gulp… Введение в PostCSS

Please enable JavaScript to view the comments powered by Disqus.

gulp-stylus — Анализ работоспособности пакетов npm

Все уязвимости безопасности относятся к производственных зависимостей прямых и косвенных пакеты.

Риск безопасности и лицензии для важных версий

Все версии

9 02. 2022 |

Версия				Уязвимости	Лицензионный риск
12/2022		C H M L	H M L
2. 7.1	|	12/2021		C H M L	H M L
2. 7.0	|	12/2017	Popular	C H M L	H M L
1. 3.7	|	01/2015		C H M L	H M L
0. 2.1	|	04/2014		C H M L	H M L

License

Массачусетский технологический институт

Политика безопасности

Нет

Ваш проект подвержен уязвимостям?

Сканируйте свои проекты на наличие уязвимостей. Быстро исправить с помощью автоматизированного исправления. Начните работу со Snyk бесплатно.

Начните бесплатно

Еженедельные загрузки (11 896)

Скачать тренд

Звезды GitHub

224

Вилки

63

Авторы

40

---

Популярность прямого использования

TOP 5%

---

Пакет npm gulp-stylus получает в общей сложности 11 896 загрузок в неделю. Таким образом, мы забили Уровень популярности gulp-stylus должен быть признан.

На основе статистики проекта из репозитория GitHub для npm package gulp-stylus, мы обнаружили, что он снялся 224 раза.

Загрузки рассчитываются как скользящие средние за период из последних 12 месяцев, за исключением выходных и известных отсутствующих точек данных.

Частота фиксации

Открытые вопросы

0

Открытый заказ на продажу

1

Последняя версия

4 месяца назад

Последняя фиксация

4 месяца назад

---

Дальнейший анализ состояния обслуживания gulp-stylus на основе каденция выпущенных версий npm, активность репозитория, и другие точки данных определили, что его обслуживание Устойчивый.

Мы обнаружили, что gulp-stylus демонстрирует положительную частоту выпуска версий. по крайней мере с одной новой версией, выпущенной за последние 12 месяцев.

За последний месяц мы не обнаружили никаких запросов на вытягивание или изменений в статус issue был обнаружен для репозитория GitHub.

Совместимость с Node.js

>= 4.2.0

---

Возраст

9 лет

Зависимости

7 прямых

Версии

49

Размер установки

20,6 КБ

Распределенные теги

1

Количество файлов

27

Обслуживающий персонал

1

Типы TS

Да

---

gulp-stylus имеет более одного и последнего тега по умолчанию, опубликованного для пакет нпм. Это означает, что для этого могут быть доступны другие теги. пакет, например рядом, чтобы указать будущие выпуски, или стабильный, чтобы указать стабильные релизы.

Стилус | WebStorm Documentation

WebStorm позволяет на лету переводить код Stylus в CSS.

Перед началом работы

1. Убедитесь, что на вашем компьютере установлен Node.js.

2. Установите и включите плагин Stylus в меню «Настройки | Страница плагинов, вкладка Marketplace, как описано в разделе Установка плагинов из репозитория JetBrains.

3. Убедитесь, что в настройках включен плагин File Watchers. Нажмите Ctrl+Alt+S , чтобы открыть настройки IDE и выбрать Плагины. 1″ data-primary_windows=»Alt+F12″ data-primary_gnome=»Alt+F12″ data-secondary_sublime_text_macos=»⌥ F12″ data-primary_netbeans=»Alt+F12″ data-primary_sublime_text=»Alt+F12″ data-primary_emacs=»Alt+F12″ data-primary_eclipse=»Alt+F12″ data-secondary_eclipse_macos=»⌥ F12″ data-primary_visual_studio=»Ctrl+Alt+1″ data-secondary_intellij_idea_classic_macos=»⌥ F12″> Alt+F12 ) введите:

Компиляция кода Stylus

Для автоматической компиляции кода вам необходимо настроить Stylus File Watcher, который будет отслеживать изменения в ваших файлах и запускать компилятор.

Когда вы открываете файл, WebStorm проверяет, доступен ли в текущем проекте соответствующий File Watcher. Если такой File Watcher настроен, но отключен, WebStorm отображает всплывающее окно, информирующее вас о настроенном File Watcher и предлагающее включить его.

Если соответствующий File Watcher настроен и включен в текущем проекте, WebStorm автоматически запускает компилятор по событию, указанному в диалоговом окне New Watcher.

• Если установлен флажок Автоматически сохранять отредактированные файлы для срабатывания наблюдателя, наблюдатель за файлами вызывается, как только в исходный код вносятся какие-либо изменения.

• Если флажок Автосохранение отредактированных файлов для запуска наблюдателя снят, наблюдатель файлов запускается при сохранении (Файл | Сохранить все, Ctrl+S ) или при перемещении фокуса из WebStorm (при деактивации фрейма) .

Узнайте больше от File Watchers.

WebStorm создает отдельный файл со сгенерированным выводом. Файл имеет имя исходного файла Stylus и расширение .css. Расположение сгенерированных файлов определяется в поле Выходные пути для обновления диалогового окна Новый наблюдатель. Однако в дереве проекта они отображаются под исходным файлом, который теперь отображается как узел.

Создать наблюдателя за файлами

1. В диалоговом окне «Настройки» ( Ctrl+Alt+S ) щелкните «Следопыты за файлами» в разделе «Инструменты». N"> Alt+Insert и выберите из списка предопределенный шаблон Stylus.

2. В поле Программа укажите путь к исполняемому файлу:

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

3. Действуйте, как описано в File Watchers.

Настройка подсветки синтаксиса

Вы можете настроить подсветку синтаксиса с поддержкой стилуса в соответствии со своими предпочтениями и привычками.

1. В диалоговом окне «Настройки» ( Ctrl+Alt+S ) выберите «Редактор | Цветовая схема | Стилус.