vue 中 style 的写法

Question

@component-namespace page {
    @component toast {
        @descendent wrapper {
            padding: 0 20px;
            position: absolute 50% * * *;
            width: 100%;
            transform: translateY(-50%);
            button:not(:last-child) {
                margin-bottom: 20px;
            }
        }
    }
}

这个是什么写法啊。。。。

Answer 1

postcss-bem插件功能 at-rule能力。
https://github.com/kezzbracey/postcss-bem
饿了么的vue框架用了基于PostCSS的CSS解决方案-沙拉 其中就有该插件。

Answer 2

不知道你这段代码从哪看的，我在mint-ui里也看到了差不多的写法，然而他的lang标记的是css，所以我猜是post-css的某个插件的功能。。。

Answer 3

补充一个：PostCSS深入学习: 结合BEM和SUIT方法使用PostCSS - w3cplus

Answer 4

less或者sass吧。总之是一种CSS预处理语言。

Answer 5

我做了一个分叉，https://github.com/baryon/min... 希望可以帮助大家

Answer 6

我看了mint-ui的源码，package。json中没有关于postcss-bem的插件啊，只包含了postcss和postcss-loader.