Вопросы с меткой [stylus]

Stylus - препроцессор CSS, расширяющий возможности CSS. Позволяет использовать переменные, вложенные правила, примеси, импорт, функции и прочее, обеспечивая полностью CSS-совместимый синтаксис.

Фильтрация
Сортировка
Метки
0 голосов
1 ответ
306 показов

Задать CSS для всех заглавных букв в label по значению текста или задать значение текста lebel как атрибут

Задача - задать отдельный стиль для всех заглавных букв в тексте label. Например, в <label for="dd">Дата РОО</label> label[value*="/A-Z/"] { color: #17f; } Или как-то ...
1 голос
1 ответ
34 показа

Как на stylus записать стили?

как на stylus записать max-width: min(100vw, 816px); если прям так записать - не работает
0 голосов
1 ответ
66 показов

Stylus, использование calc() в миксинах не работает с переменными. Есть ли костыль?

В итоге должна работать так: adaptiv-text(minFontSize, minWidthDisplay, plusFontSize, maxWidth) // (минимальный размер текста) font-size: (minFontSize)rem // (минимальная ширина) @media ...
1 голос
1 ответ
985 показов

CSS масштабировать весь div под ширину экрана (transform scale)

Есть div блок с множеством элементов, включая картинки. Сейчас он по ширине вылазить за экран на малых экранах. Задача - масштабировать его под ширину экрана, т.е. пропорционально уменьшить. ...
2 голоса
1 ответ
2k показов

Как настроить поддержку Stylus в React.js-приложении?

Я хочу, чтобы классы в моём React.js-приложении были доступны для экспортирования из .styl-файлов таким же образом, как это можно сделать из CSS Modules, но я не могу найти никакого готового решения ...
0 голосов
2 ответа
38 показов

Почему не получается сделать адаптивку?

Я использую вот такой код .focus-form{ width: 24%; float: right; padding: 10px; background: rgba(255, 255, 255, 0.91); margin-top: 6%; margin-right: 13%; text-align: center; ...
1 голос
0 ответов
134 показа

gulp время от времени глючит

https://prnt.sc/jhuoza https://pastebin.com/A5ZLshgW gulp стал подглючивать на домашнем компе (на рабочем всё норм), не знаю что делать. Какое-то время всё нормально, потом выплёвывает кучу вот ...
2 голоса
0 ответов
38 показов

Можно ли использовать stylus и ng-cli в ionic?

Имею опыт разработки нескольких приложений на Angular. Использовал ng-cli и в качестве препроцессора stylus. Сейчас начал осваивать ionic и появилось 2 вопроса: Можно ли использовать stylus? Или ...
1 голос
0 ответов
166 показов

Автоформатирование и emmet для Stylus

Проблема такая - пишу на стилусе и часто вставляю код из инструмента для разработчиков в браузере. Выходит грязно, потому что в stylus нет двоеточия и точки с запятой по умолчанию. Но работает) Есть ...
3 голоса
1 ответ
114 показов

Выбор и структура классов по БЭМ

Пытаюсь правильно выбрать классы по БЭМ + что бы не было каскадности в css. Для css использую stylus, так что могу писать конструкции типа: .items border none &__li color cornflowerblue ...
0 голосов
1 ответ
107 показов

В gulp/webpack какой-то модуль ставит лишние пробелы в 0\\0 для @media

В проекте с gulp/webpack какой-то модуль ставит пробелы в 0\0 для @media для запроса @media all and (min-width:0\0) and (min-resolution:.001dpcm) Стиль написан на stylus. Т.е. в .css после сборки ...
2 голоса
0 ответов
63 показа

В tars не могу создать спрайт

Файл лежит тут: в коде я вызываю миксин так: bg("pdf"), но в итоге для браузера прописан следующий путь: url("../img/png-sprite/96dpi/null") почему так?
1 голос
1 ответ
1k показов

Картинка фоном в div

Имеется компонент vue со следующим содержимом: <template lang="html"> <div class="logo"></div> </template> <script> </script> <style lang="stylus" scoped>...
2 голоса
1 ответ
174 показа

Каждый элемент импорта в отдельный файл gulp

Добрый день имею папку с файлами папка "file" В ней файлы a.styl,b.styl,c.styl Есть файл f.styl Его содержание: @import "file/a" @import "file/b" @import "file/c" Вопрос: Как запрограммировать ...
3 голоса
1 ответ
657 показов

stylus import: выбрать кроме файлов с суффиксом

Есть .styl файл, который импортирует все другие файлы с определенных папок. Как верно задать правило для включения всех, кроме некоторых файлов, с суффиксом, например, *-ie.style? import(['../moduls/*...
1 голос
1 ответ
547 показов

css растянуть родительский с учетом scaleX дочернего элемента

В Javascript есть getComputedStyle, с которым можно получить то, что отобразилось... но как в чистом css (или stylus) родительскому элементу учесть растянутость scaleX дочернего элемента? .dd { ...
1 голос
1 ответ
155 показов

keyframes не определяется

@keyframes rot { 0% { background-color: #000 !important; } 100% { background-color: #c0c0c0 !important; } } #telegramSiteHelperChatLabel animation-name rot animation-duration 2s ...
0 голосов
1 ответ
101 показ

Stylus цикл for: можно ли сочетать диапазон и отдельные значения

Можно ли в Stylus задать для цикла for вместе и диапазон значений, и отдельные значения? for item in range(2, 7) 14 33 li:nth-child({item}) label color red или for item in 2..7 14 33 ...
1 голос
1 ответ
339 показов

Избежать дубликатов Stylus после преобразования в .css

В Stylus, в разных файлах, есть @-moz-document url-prefix() с стилями для определенных классов. f1.style: @-moz-document url-prefix() .f1 color green f2.styl: @-moz-document url-prefix()...
2 голоса
1 ответ
273 показа

css first-letter выше или ниже

Как можно с помощью css/stylus поднять или опустить первую букву в блоке? label { display: block; } label::first-letter { position: relative; top: -10px; margin-top: -10px; padding-top: -...
1 голос
1 ответ
76 показов

Stylus|CSS каждое слово выше на ХХpx

Есть предложение в теге span или div. <span>Есть предложение в теге span или div.</span> Можно ли с Stylus или CSS задать стиль для отдельного слова, наподобие span:nth-child(3): span:...
3 голоса
2 ответа
1k показов

Как изменить переменную в зависимости от разрешения экрана? stylus

Использую stylus. Есть переменная $font-size = 1em, которая используется везде по проекту. Нужно, чтобы на мелких девайсах (@media screen and (max-device-width: 768px)), $font-size поменялся на 2em. ...
2 голоса
1 ответ
449 показов

Webpack. Использование autoprefixer с stylus

Решил добавить поддержку префиксов для различных браузеров в стилях. Для этого обратился к модулю postcss-loader, на который многие ссылаются. Адаптировал код из документации (раз и два) ...
1 голос
1 ответ
261 показ

Лучший способ сделать checkbox/radio из изображения

Использую следующий код для получения checkbox из изображения: input[type='checkbox'] display none input[type='checkbox'] + label width 100px height 10px position relative &...
7 голосов
2 ответа
7k показов

Лучший способ указывать отдельные CSS правила для разных браузеров

Так, как в разных браузерах, например, шрифты и отступы отображаются по-разному, нужно для каждого браузера указывать отдельное Css правило. На данный момент использую следуее: // IE9+ @media screen ...
0 голосов
1 ответ
39 показов

Stylus. Изменение названия селектора в цикле

Имеются следующие стили .group-title_group-3 .group-title__wrapper .group-title_group-4 .group-title__wrapper .group-title_group-5 .group-title__wrapper .group-title_group-6 .group-title__wrapper ....
1 голос
2 ответа
248 показов

stylus как реализовать цикл?

Имеется объект с названиями классов и путем к иконке. currentProject = {'current-project': '../../sprites/123.png', 'composition-project': '../../sprites/123.png', ...
0 голосов
1 ответ
78 показов

Валидная запись @font-face

Спонтанно возник вопрос, есть ли отличия между этими записями: Stylus версия: @font-face font-family Avante src: url('../fonts/AvanteRegular.woff') format('woff') font-style normal @...
0 голосов
1 ответ
208 показов

Bootstrap Stylus не работает

Доброго времени суток. Не могу понять в чем проблема. Вроде делаю все по гайду. из за чего ошибка? использую https://github.com/maxmx/bootstrap-stylus
1 голос
1 ответ
190 показов

phpstorm ставит двоеточие в stylus

phpStorm в stylus ставит двоеточие, в настройках Emmet или плагине Stylus подобных настроек не нашел. Подскажите как их отключить?
1 голос
1 ответ
150 показов

Горизонтальная прокрутка внутри flexbox с максимальной шириной

Есть пример: http://codepen.io/LestaD/pen/ZOpBzM?editors=1100 main aside content section Hello footer .panel .avatar .text div Vestibulum ullamcorper ...
0 голосов
1 ответ
120 показов

Как правильно использовать data-image в stylus?

при попытке задать фон для элемента на основе данных из указанного источника (через конструкцию url() ), пакет gulp-stylus при компиляции файла выдает ошибку: expected ")", got ";" вот так не ...
0 голосов
1 ответ
731 показ

browser-sync + stylus не работает в chrome

Помогите найти причину по которой в хроме не обновляются автоматически стили. Сейчас использую связку browser-syn + stylus, (компиляция выполняется). Могу предположить, что проблема как-то связана с ...
0 голосов
1 ответ
757 показов

Как сделать css анимацию для списков меню при наведении?

Здравствуйте. Есть такой код: <ul className="vertical medium-horizontal menu"> <li> <a className="dropdown button" href="#">1</a> <a href="#">1</...
1 голос
1 ответ
60 показов

node.js + stylus + idea: проблема символов <>

При создании File Watcher для Stylus файлов возникла небольшая проблема. Хочу указать в Arguments выходной файл, но появляется ошибка: /home/ivan/.nvm/versions/node/v0.12.4/lib/node_modules/stylus/...
0 голосов
2 ответа
1k показов

Подключаем библиотеку nib для работы со stylus. Что и где нужно прописать?

Пробую препроцессор Stylus. Установить, запустить вотчер получилось. Пробую подключить билиотеку nib. Установил при помощи npm install nib. В style.styl прописал @import 'nib'. По аналогии с sass/...