less常用技巧

栏目: CSS · 发布时间: 5年前

内容简介:一般组件库的样式编写都会为使用者设计一些主题样式更换方案,我这里根据自己对主流组件库antd和iview的研究,总结出这两类:所以在给公司定制组件库的时候我们可以使用这两种方法来给使用者定制主题,当然了,我们设计的时候最好和主流框架的变量名保持一致,使得使用者更好上手。不知道大家在实际开发中有没有遇到过为了一个padding或margin或fontsize而常常需要多写一层class的情况。

本文主要是记录自己日常工作中用到过的一些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-base: 14px;                           // 主字号
@text-color: rgba(0, 0, 0, .65);                 // 主文本色
@text-color-secondary : rgba(0, 0, 0, .45);      // 次文本色
@disabled-color : rgba(0, 0, 0, .25);            // 失效色
@border-radius-base: 4px;                        // 组件/浮层圆角
@border-color-base: #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关键字来解决。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

自流量生活

自流量生活

斯科特·福克斯(Scott Fox) / 王晶晶 / 中信出版社 / 2018-8-1

一位远嫁他国的平凡女孩,陌生的环境、陌生的语言……她不得不从头学起。有写作爱好的她在网络上记录着她学习生活中的小故事。神奇的是,越来越多的人联系她,有人要付钱看新的故事,还有人想把这些故事拍成电视短片。她是怎么做到的? 这本书将告诉你如何利用互联网打造自己的“流量”生活,使你既能获取收入,又能以自己喜欢的方式过一生。在阅读这本书的过程中,你可能会找到自己喜欢的生活方式,了解成功打造自身“流量......一起来看看 《自流量生活》 这本书的介绍吧!

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具