使用less预处理语言定义常用的class

微信扫一扫,分享到朋友圈

使用less预处理语言定义常用的class

相信我们做前端的都有一个特别头疼的问题,就是如何给html标签定义css名称而且又要防止样式冲突,并且在写样式的时候,存在很多重复性的样式,比如margin,padding,font-size,color等等,我最近就在想一个问题,怎样才能更高效的将页面进行布局并具有高效的可维护性,并且如果将此套代码集成到其他新项目,是否可以快速使用呢?Less提供的函数可以帮助我们快速定义一些常用的class,话不多说,开干!

Less

Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。

Less 可以运行在 Node 或浏览器端。

具体的文档可以访问 less官网 查阅。

思路梳理

颜色

可以发现,很多ui组件库都会提供5种行为相关的颜色:primary(主题),success(成功),info(通知),warning(警告),error(错误)。同样我们可以参考这种模式定义变量:

//variable.less:定义变量文件
/* 行为相关颜色 */
@color-primary: #4897ff;
@color-success: #4cd964;
@color-info:#007aff;
@color-warning: #f0ad4e;
@color-error: #dd524d;
//定义下面两个变量的意义在于方便遍历处理,接下来就知道用途所在;
//因为less变量不支持定义对象形式,所以需要将key和value单独定义,一一对应即可;
@list:primary,success,info,warning,error;//颜色列表key
@colors:@color-primary,@color-success,@color-info,@color-warning,@color-error;//颜色列表value
复制代码

定义变量之后,我们就可以根据自己的需求去定义一些常用的class:

下面会用到less的一些语法,具体的使用可以访问官网:

  • 循环Loops

    示例:

    .generate-columns(@n, @i: 1) when (@i =< @n) {
    .column-@{i} {
    width: (@i * 100% / @n);
    }
    .generate-columns(@n, (@i + 1));
    }
    .generate-columns(4);
    复制代码

    输出结果:

    .column-1 {
    width: 25%;
    }
    .column-2 {
    width: 50%;
    }
    .column-3 {
    width: 75%;
    }
    .column-4 {
    width: 100%;
    }
    复制代码
  • 选取extract

    实例:

    @list: apple, pear, coconut, orange;
    value: extract(@list, 3);
    复制代码

    输出结果:

    value: coconut;
    复制代码
  • 长度length

    实例:

    @list: "banana", "tomato", "potato", "peach";
    n: length(@list);
    复制代码

    输出结果:

    n:4
    复制代码
  • 颜色操作darken/lighten

//color.less:颜色文件
@import './variable.less';//上个定义变量的文件
// 生成主题字体颜色方法
.create-color(@lt,@i:1,@key:extract(@lt, @i),@val:extract(@colors,@i)) when (length(@lt)>=@i){
.color-@{key}{
color : @val;
}
.create-color(@lt, @i + 1);
}
.create-color(@list);
// 生成主题背景颜色方法
.create-bg-color(@lt,@i:1,@key:extract(@lt, @i),@val:extract(@colors,@i)) when (length(@lt)>=@i){
.bgcolor-@{key}{
background-color : @val;
}
.create-bg-color(@lt, @i + 1);
}
.create-bg-color(@list);
// 生成主题背景颜色hover方法--lighten变浅颜色
.create-bghover-color(@lt,@i:1,@key:extract(@lt, @i),@val:extract(@colors,@i)) when (length(@lt)>=@i){
.bgcolor-@{key}.bg-hover{
background-color : lighten(@val,0.85);
}
.create-bghover-color(@lt, @i + 1);
}
.create-bghover-color(@list);
// 生成主题背景颜色active方法--darken加深颜色
.create-bgactive-color(@lt,@i:1,@key:extract(@lt, @i),@val:extract(@colors,@i)) when (length(@lt)>=@i){
.bgcolor-@{key}.bg-active{
background-color : darken(@val,0.15);
}
.create-bgactive-color(@lt, @i + 1);
}
.create-bgactive-color(@list);
复制代码

为了方便测试,可以使用lessc工具(npm i less -g),编译less为css(如果项目中有less环境,则会自动编译无需此步骤):

lessc color.less > color.css
复制代码

输出结果:

.color-primary {
color: #4897ff;
}
.color-success {
color: #4cd964;
}
.color-info {
color: #007aff;
}
.color-warning {
color: #f0ad4e;
}
.color-error {
color: #dd524d;
}
.bgcolor-primary {
background-color: #4897ff;
}
.bgcolor-success {
background-color: #4cd964;
}
.bgcolor-info {
background-color: #007aff;
}
.bgcolor-warning {
background-color: #f0ad4e;
}
.bgcolor-error {
background-color: #dd524d;
}
.bgcolor-primary.bg-hover {
background-color: #4c99ff;
}
.bgcolor-success.bg-hover {
background-color: #50da67;
}
.bgcolor-info.bg-hover {
background-color: #047cff;
}
.bgcolor-warning.bg-hover {
background-color: #f0af52;
}
.bgcolor-error.bg-hover {
background-color: #de5651;
}
.bgcolor-primary.bg-active {
background-color: #4797ff;
}
.bgcolor-success.bg-active {
background-color: #4bd963;
}
.bgcolor-info.bg-active {
background-color: #007afe;
}
.bgcolor-warning.bg-active {
background-color: #f0ad4d;
}
.bgcolor-error.bg-active {
background-color: #dd514c;
}
复制代码

通过上面的方式,我们可以很方便定义一些常用的class,当在html标签中需要使用时,直接加入到classname就可以,也无需考虑命名的问题;当然还有很多其他的class也需要定义,比如字体,间距(padding ,margin)等,方式是同理的;

padding

我以padding举个例子:间距的方式可以考虑size的形式来命名:xs,sm,base,lg,xl等,当然如果你有其他的可以继续添加;

//variable.less
/* 间距 */
@spacing-base: 20px;
@spacing-xs: @spacing-base - 15px;//5px
@spacing-sm: @spacing-base - 10px;//10px
@spacing-lg: @spacing-base + 10px;//30px
@spacing-xl: @spacing-base + 20px;//40px
@size:xs,sm,base,lg,xl;
@spacings:@spacing-xs,@spacing-sm,@spacing-base,@spacing-lg,@spacing-xl;
复制代码

定义间距的函数来生成class

//spacing.less
@import './variable.less';
//padding==================
// 生成间距方法
.create-padding(@lt,@i:1,@key:extract(@lt, @i),@val:extract(@spacings,@i)) when (length(@lt)>=@i){
.padding-@{key}{
padding : @val;
}
.create-padding(@lt, @i + 1);
}
.create-padding(@size);
// 生成上下间距方法
.create-padding-tb(@lt,@i:1,@key:extract(@lt, @i),@val:extract(@spacings,@i)) when (length(@lt)>=@i){
.padding-tb-@{key}{
padding : @val 0;
}
.create-padding-tb(@lt, @i + 1);
}
.create-padding-tb(@size);
// 生成左右间距方法
.create-padding-lr(@lt,@i:1,@key:extract(@lt, @i),@val:extract(@spacings,@i)) when (length(@lt)>=@i){
.padding-lr-@{key}{
padding : 0 @val;
}
.create-padding-lr(@lt, @i + 1);
}
.create-padding-lr(@size);
// 生成上间距方法
.create-padding-top(@lt,@i:1,@key:extract(@lt, @i),@val:extract(@spacings,@i)) when (length(@lt)>=@i){
.padding-t-@{key}{
padding-top : @val;
}
.create-padding-top(@lt, @i + 1);
}
.create-padding-top(@size);
// 生成右间距方法
.create-padding-right(@lt,@i:1,@key:extract(@lt, @i),@val:extract(@spacings,@i)) when (length(@lt)>=@i){
.padding-r-@{key}{
padding-right : @val;
}
.create-padding-right(@lt, @i + 1);
}
.create-padding-right(@size);
// 生成下间距方法
.create-padding-bottom(@lt,@i:1,@key:extract(@lt, @i),@val:extract(@spacings,@i)) when (length(@lt)>=@i){
.padding-b-@{key}{
padding-bottom : @val;
}
.create-padding-bottom(@lt, @i + 1);
}
.create-padding-bottom(@size);
// 生成左间距方法
.create-padding-left(@lt,@i:1,@key:extract(@lt, @i),@val:extract(@spacings,@i)) when (length(@lt)>=@i){
.padding-l-@{key}{
padding-left : @val;
}
.create-padding-left(@lt, @i + 1);
}
.create-padding-left(@size);
复制代码

编译输出结果:

//===================间距
.padding-xs {
padding: 5px;
}
.padding-sm {
padding: 10px;
}
.padding-base {
padding: 20px;
}
.padding-lg {
padding: 30px;
}
.padding-xl {
padding: 40px;
}
//=================上下间距
.padding-tb-xs {
padding: 5px 0;
}
.padding-tb-sm {
padding: 10px 0;
}
.padding-tb-base {
padding: 20px 0;
}
.padding-tb-lg {
padding: 30px 0;
}
.padding-tb-xl {
padding: 40px 0;
}
//=================左右间距
.padding-lr-xs {
padding: 0 5px;
}
.padding-lr-sm {
padding: 0 10px;
}
.padding-lr-base {
padding: 0 20px;
}
.padding-lr-lg {
padding: 0 30px;
}
.padding-lr-xl {
padding: 0 40px;
}
//=================上间距
.padding-t-xs {
padding-top: 5px;
}
.padding-t-sm {
padding-top: 10px;
}
.padding-t-base {
padding-top: 20px;
}
.padding-t-lg {
padding-top: 30px;
}
.padding-t-xl {
padding-top: 40px;
}
//=================右间距
.padding-r-xs {
padding-right: 5px;
}
.padding-r-sm {
padding-right: 10px;
}
.padding-r-base {
padding-right: 20px;
}
.padding-r-lg {
padding-right: 30px;
}
.padding-r-xl {
padding-right: 40px;
}
//=================下间距
.padding-b-xs {
padding-bottom: 5px;
}
.padding-b-sm {
padding-bottom: 10px;
}
.padding-b-base {
padding-bottom: 20px;
}
.padding-b-lg {
padding-bottom: 30px;
}
.padding-b-xl {
padding-bottom: 40px;
}
//=================左间距
.padding-l-xs {
padding-left: 5px;
}
.padding-l-sm {
padding-left: 10px;
}
.padding-l-base {
padding-left: 20px;
}
.padding-l-lg {
padding-left: 30px;
}
.padding-l-xl {
padding-left: 40px;
}
复制代码

除了padding,margin,font-size,border-radius等都可以使用size的形式来定义,方法是一样的;

总结

程序员一定要学会越来越‘懒’,重复性的工作坚决不做,所以我们就要去学习和探索如何才能做到‘懒’到极致,就像我们写style一样,我们会发现padding,margin,text-align,display,font-size,color,background-color等会在每个页面甚至每个标签都会不断的重复,不仅写的很烦,而且还特别降低效率,这样我们就需要去寻找属于我们自己偷懒的方法;当然这些class只是一部分,后续我会将我定义好的less文件提供给大家下载,希望大家能指出存在的问题以及有没有更好的建议。

微信扫一扫,分享到朋友圈

使用less预处理语言定义常用的class

Docker容器的数据卷

上一篇

go-micro的etcd服务注册管理界面使用方法

下一篇

你也可能喜欢

使用less预处理语言定义常用的class

长按储存图像,分享给朋友