这是什么css写法?

Question

最近在用element做项目,想写一些自己的组件.在看element他们的css部分有点蒙,求大神指教.

@component-namespace el {
    @b button {
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        background: var(--button-default-fill);
        border: var(--border-base);
        color: var(--button-default-color);
        -webkit-appearance: none;
        text-align: center;
        box-sizing: border-box;
        outline: none;
        margin: 0;
        @utils-user-select none;
        &+.el-button {
            margin-left: 10px;
        }
        @mixin button-size var(--button-padding-vertical),
        var(--button-padding-horizontal),
        var(--button-font-size);

取部分button.css代码,其中@component-namespace el, @b, @utils-user-select none; @mixin 是什么意思?求指教

Answer 1

找到了,是element自家开发的post-salad插件,Postcss-salad 是一个基于 PostCSS 的 CSS 解决方案，它提供了一系列快捷的 at-rule 和默认语法声明来帮助你快速地搭建项目样式与类库，它只在调用时才输出代码，而不是直接提供 CSS 类库。
https://github.com/ElemeFE/po...

Answer 2

这是less，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，你去看下文档

Answer 3

用LESS写的，你可以搜索下你想知道的变量看他最初的意思。

Answer 4

less css预处理框架，可以方便 css的开发，减少代码重复，更易维护代码

Answer 5

这是less， css预处理器，它添加了一些类似变量、混合（mixin）、函数等功能，更快的进行css的开发，减少代码的冗余，更易进行代码的维护管理。