less常用技巧

voyagelab 发布于2019-08-23 17:02 / 2331人阅读

摘要：所以在给公司定制组件库的时候我们可以使用这两种方法来给使用者定制主题，当然了，我们设计的时候最好和主流框架的变量名保持一致，使得使用者更好上手。

本文主要是记录自己日常工作中用到过的一些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关键字来解决。

云服务器 GPU云服务器 less less2 html使用less linux密令less

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103708.html

less常用技巧

摘要：所以在给公司定制组件库的时候我们可以使用这两种方法来给使用者定制主题，当然了，我们设计的时候最好和主流框架的变量名保持一致，使得使用者更好上手。本文主要是记录自己日常工作中用到过的一些less小技巧 1. 组件库主题定制一般组件库的样式编写都会为使用者设计一些主题样式更换方案，我这里根据自己对主流组件库antd和iview的研究，总结出这两类： iview引入主题样式，复写 @im...

whlong 2019-08-29 18:41 评论0 收藏0
sublime配置及使用技巧

摘要：第三步，安装插件安装方法一快捷键，输入回车，然后输入你想安装的包的名称，回车安装方法二当然你也可以打开文件夹，然后去等平台下相关插件放在这里即可。如果需要 vim 配置，可以移步面向 web 前端及 node 开发人员的 vim 配置 sublime 3 配置和使用技巧第一步，设置settings 一下是我个人喜欢的格式配置，在perferences -> settings { ...

LoftySoul 2019-08-29 16:40 评论0 收藏0
sublime配置及使用技巧

摘要：第三步，安装插件安装方法一快捷键，输入回车，然后输入你想安装的包的名称，回车安装方法二当然你也可以打开文件夹，然后去等平台下相关插件放在这里即可。如果需要 vim 配置，可以移步面向 web 前端及 node 开发人员的 vim 配置 sublime 3 配置和使用技巧第一步，设置settings 一下是我个人喜欢的格式配置，在perferences -> settings { ...

kumfo 2019-08-23 11:53 评论0 收藏0
12个常用的javascript简写技巧---可以大大减少js代码量

摘要：极大的简化了代码量变量声明尽管会自动讲变量上提，使用该方法可以讲所有的变量都在函数的头部用一行搞定。简化前简化后译者译文原文微信公众号个人博客知乎本文是并非本人所写，只是我看了觉得对自己很有帮助，所以分享给大家，原文链接在最下面，谢谢观看。1. 空(null, undefined)验证当我们创建了一个新的变量，我们通常会去验证该变量的值是否为空(null)或者未定...

kyanag 2019-08-21 11:51 评论0 收藏0