less经常使用技能

2024年1月30日 228次阅读 来源: 小皇帝James

本文主如果纪录本身一样平常事情顶用到过的一些less小技能

1. 组件库主题定制

平常组件库的款式编写都会为运用者设想一些主题款式替换计划，我这里依据本身对主流组件库antd和iview的研讨，总结出这两类：

iview引入主题款式，复写

@import '~iview/src/styles/index.less';
// Here are the variables to cover, such as:
@primary-color: #1B88EE;

antd经由过程less-loader的modifyVars注入主题变量

rules: [{
    test: /\.less$/,
    use: [{
        loader: 'style-loader',
    }, {
        loader: 'css-loader', // translates CSS into CommonJS
    }, {
        loader: 'less-loader', // compiles Less to CSS
        options: {
            modifyVars: {
                'primary-color': '#1B88EE',
            },
            javascriptEnabled: true,
        },
}], //注重 less-loader 的处置惩罚局限不要过滤掉 node_modules 下的 antd 包。

所以在给公司定制组件库的时刻我们能够运用这两种要领来给运用者定制主题，固然了，我们设想的时刻最好和主流框架的变量名保持一致，使得运用者更好上手。

@primary-color: #1B88EE;                         // 全局主色
@link-color: #1B88EE;                            // 链接色
@success-color: #4FC7AF;                         // 胜利色
@warning-color: #F8AC59;                         // 正告色
@error-color: #F95355;                           // 毛病色
@font-size: 28px;                                // 主字号
@text-color: rgba(0, 0, 0, .65);                 // 主文本性
@text-color-secondary : rgba(0, 0, 0, .45);      // 次文本性
@disabled-color : rgba(0, 0, 0, .25);            // 失效色
@border-radius: 4px;                             // 组件/浮层圆角
@border-color: #d9d9d9;                          // 边框色
@box-shadow-base: 0 2px 8px rgba(0, 0, 0, .15);  // 浮层暗影

2. 给项目设置经常使用款式common.less

不知道人人在现实开辟中有没有遇到过为了一个padding或margin或fontsize而经常须要多写一层class的状况。

.loop(20);
.loop(@n, @i: 0) when (@i =< @n) {
    @size: @i*2;

    .pt-@{size} { padding-top: unit(@size, px) !important; }
    .pr-@{size} { padding-right: unit(@size, px) !important; }
    .pb-@{size} { padding-bottom: unit(@size, px) !important; }
    .pl-@{size} { padding-left: unit(@size, px) !important; }

    .mt-@{size} { margin-top: unit(@size, px) !important; }
    .mr-@{size} { margin-right: unit(@size, px) !important; }
    .mb-@{size} { margin-bottom: unit(@size, px) !important; }
    .ml-@{size} { margin-left: unit(@size, px) !important; }

    .fs-@{size} { font-size: unit(@size, px) !important; }

    .loop(@n, (@i + 1));
} // e.g. pt-2 pt-16 pt-40 fs-16 fs-24等等

把以上这段加到通用less里后，如果有一些特别的边距或字体就能够直接写class=”mb-20″如许了，能够省去一些工夫多写个不必要的class，固然经常使用的width或height之类的都能够经由过程when轮回处理，须要注重的less没有if-else推断，一切的推断也都是经由过程when关键字来处理。

    原文作者：小皇帝James
    原文地址: https://segmentfault.com/a/1190000018932550
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞