Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Как использовать переменные в stylus? #49

Closed
gruzzilkin opened this issue Sep 30, 2013 · 3 comments
Closed

Как использовать переменные в stylus? #49

gruzzilkin opened this issue Sep 30, 2013 · 3 comments

Comments

@gruzzilkin
Copy link

Привет!

В enb-make.js пробовал писать

[ require("enb/techs/css-stylus"), {ie: 'false', ie8: 'false', ie9: 'false'/*, import: 'if-ie.styl/if-ie'*/ } ],

или

new (require('enb/techs/css-stylus'))({ variables: {ie: 'false', ie8: 'false', ie9: 'false'}/*, import: 'if-ie.styl/if-ie'*/}),

Но почему-то не взлетело. Можно пример?

Мне это нужно чтобы удобнее использовать либу if-ie.styl.
Сейчас приходится импортировать эту либу через @import внутри одного из .styl файлов, а потом для каждого блока дублировать технологию .styl в файлах *.ie.styl, *.ie8.styl и т.п.

Вне рамок enb у меня получалось красиво подключать всё это дело через grunt вот таким образом:

stylus: {
    all: {
        options: {
            paths: ['code/styl', 'node_modules'],
            compress: false,
            define: {
                'ie': false,
                'ie8': false
            },
            import: [
                'nib',
                'if-ie.styl/if-ie',
                'utilities/variables',
                'utilities/mixins'
            ]
        },
        files: {
            'code/css/styles.css': fileList
        }
    },
    ie8: {
        options: {
            paths: ['code/styl', 'node_modules'],
            compress: false,
            define: {
                'ie': false,
                'ie8': true
            },
            import: [
                'nib',
                'if-ie.styl/if-ie',
                'utilities/variables',
                'utilities/mixins'
            ]
        },
        files: {
            'code/css/styles.ie8.css': fileList
        }

    },
    ie: {
        options: {
            paths: ['code/styl', 'node_modules'],
            compress: false,
            define: {
                'ie': true
            },
            import: [
                'nib',
                'if-ie.styl/if-ie',
                'utilities/variables',
                'utilities/mixins'
            ]
        },
        files: {
            'code/css/styles.ie.css': fileList
        }

    }
}

Т.е. ставим if-ie.styl через npm, определяем переменные для каждой цели, определяем импорты (почему-то require('if-ie.styl/if-ie') не ищется, а с импортом норм) и не нужно писать лишние файлы, что очень напрягает в моём случае.

@gruzzilkin
Copy link
Author

Кстати, если в файле технологии, допустим, css-stylus-with-nib.js писать

renderer.use(nib());
renderer.define('ie', false);
renderer.define('ie8', false);
renderer.define('ie9', false);
renderer.include('./node_modules');
renderer.import('if-ie.styl/if-ie');

return renderer;

То всё работает как надо. Но при каждом обновлении enb приходится этот блок кода заново вставлять, т.к. про локальное определение технологий я в доке ничего не нашел, а делать pull request с таким говном (а также сопутствующими css-stylus-with-nib-ie*.js) не хочется...

@iplus
Copy link

iplus commented Sep 30, 2013

Можно написать свою технологию, унаследовавшись от css-stylus-with-nib.js, и добавить туда все нужные дефайны :
module.exports = require('enb/techs/css-stylus-with-nib').buildFlow().name('my-stylus-with-nib').....
и положить ее в папку .bem/techs.
А потом вызывать в enb-make.js: new (require('./techs/my-stylus-with-nib'))(),

@gruzzilkin
Copy link
Author

Отлично, это то что мне нужно, спасибо!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants