project-stub + grid + preprocessor

Форум /

Здравствуйте. Подскажите пожалуйста, я использую сетку для верстки, которую можно скомпилировать на одном из четырех перпроцессоров: less || scss || sass || styl, которая в дальнейшем импортируется в файл со стилями, одного из выбранных препроцессоров и из него дергаются примеси из этой библиотеке с сеткой, Например: grid.styl(кусок библиотеки с сеткой)

$offset = 30px
$offset_one_side = ($offset / 2)

row-flex()
    display flex
    flex-wrap wrap
    margin-left ($offset_one_side * -1)
    margin-right ($offset_one_side * -1)

В файле со стилями, на том же stylus

.menu
       $__page
             row-flex()

На выходе style.css

.menu__page{
    display: flex
    flex-wrap: wrap
    margin-left: -15px
    margin-right: -15px
}

Подскажите пожалуйста, как правильно будет подключить такую библиотеку, что бы я мог вызывать примеси для блоков, в любом блоке? Можно ли просто расширить блок page и в стилях ему импортировать свою библиотеку с сеткой или это делается как-то по другому?

Второй вопрос: На ранних видео по БЭМу видно что использовался stylus, можно было писать стили на его синтаксисе. Сейчас его заменил postCss, но это же по сути своей не препроцессор? Можно ли его как-то расширить что бы он понимал синтаксис одного из четырех перпроцессоров(less || scss || sass || styl)? Или же как-то добавить отдельно, что бы работали полезные модули postCss. С резюмирую: Есть необходимость писать стили на синтаксисе препроцессоров (желательно stylus) и пользоваться плюшками сторонних библиотек.

7 years ago

mrScrpt

Отвечу сам себе, немного разобрался, возможно кому-то из новичков информация пригодится:
для работы postCss в качестве полноценного препроцессора, что бы он понимал миксины например, необходимо установить модуль для этих самых миксин

npm i postcss-mixin

и добавить его в make.js

postcssPlugins: [
           ......
            require('postcss-mixins'),            
            ........
        ],

В моем случае придется немного переработать генератор сетки, под синтаксис postCss, например для математических вычислений необходимо переписать правила, добавив проход через calc(он подключен по умолчанию в project-stub)

margin-left: calc($offset_one_side * -1);
margin-right: calc($offset_one_side * -1);

к переменным добавить $ и так далее. Нужда в поддержке другим препроцессором вроде бы отпала. Так же, если описать сетку в блоке page.css, то миксины с нее работают и в других блоках на странице, на сколько это правильно не знаю, еще экспериментирую. Много новой информации, по этому прошу прощения, возможно, за элементарные вопросы

Чтобы оставлять комментарии, необходимо авторизоваться.