专栏首页javascript艺术less的基本用法

less的基本用法

less的基本用法

less是一门css预处理语言,它扩展了css语言,增加了变量,Mixin,函数等新特性,使css更易维护和扩展,less可以运行在浏览器和服务器端

01

嵌套

less的优势有很多,最常用也是最让人舒坦的应该就是它的嵌套规则。 我们写css时如果元素过多,每个都像

.test .contnet ul li{ }

这样写的话,大概会疯,结构不清晰,查找起来也不知道哪块归哪块,反正长长的都是css。在less中,则可以这样写

.test{

  .content{

    ul{

    li{}

    }

  }

}

看起来好像很烦,其实不是,因为css要写起来,需要四个块,每个块都得把父元素写清楚,不然有可能重名出错(尤其项目大起来的时候,几十个页面,class重名太常见了),而less只需要一个块, .test连同其后代元素全部在它的包裹内设定好,每个元素名称只需要写一次就够了。

&

这个符号在less中可以代替父级元素,举个栗子

a{

  color:blue;

  &:hover{

    color:red;

  }

}

再比如,父元素叫.wrap 儿子元素中有一个叫 .wrap_2,那就可以这样写

.wrap{

  &_2{}

}

优点:块和块界限可以更清楚,很多东西不需要并列写;时不时还可以偷个懒,比如爸爸类的名字改来改去的时候,写&也省心好多。

02

变量

重要说明:变量需要@开头,比如@width,@height,名字可以随便取

定义的话在相应位置直接写就好,类似于这种(写.box外面也可以)

.box{

  @width:200px;

  @height:500px;

  @my_color:#ccc;

  width:@width;

  height:@height;

  background:@my_color;

}

例子比较简单可能看不出什么优越性,事实上大量重复的,或者是统一的样式使用变量就很方便,而且便于查找和修改,比如统一的背景色,或者统一的字体,字体大小;

注意点:变量有作用域,只能给自己和后代元素用,出了最外层的{},别的类没法调用。

运算

有变量当然可以计算,比如

@width:500px;

.box{

  width:@width-50;

}

意思就是450px,这里的计算加减乘除皆可,单位可加可不加。

03

混合

有点类似于函数的调用,这里的话就要说点别的东西了,工作前,我对于css的理解大概就是给html对应的元素设定样式,工作后我才发现,不对,css应该是罗列各种各样的样式,html里只是选择了其中的一款。为什么会产生这种感觉,因为样式会重复,组件会重复,这个页面有个tab切换,别的页面也有tab切换;这个位置有个按钮,其他好几个位置也有一个按钮。如果每个页面都私人定制,那就意味着我们需要不断的写重复的东西,在css中我们没有办法,最多花点时间拷贝过来,但是less中可以方便很多。

/*这里是按钮的统一设置,最好写最外层,方便调用*/

.btn{

  width:120px;

  height:30px;

  line-height:30px;

  border-radius:15px;

  color:#fff;

  font-size:14px;

  text-align:center;

  background:#55E276;

  cursor:pointer;

}

//下方为各种位置的按钮,less中允许双斜线的注释

.submit,.buy,.star{

  .btn;

}

一次书写,直接调用就好。

但按钮和按钮毕竟是不一样的,所以需要有所区别,区别可能是颜色,也可能是大小长度,解决方法有两个,planA:公用部分直接调用,区别的部分自己写。planB:传入参数。

planA

/*这里是按钮的统一设置,最好写最外层,方便调用*/

.btn{

  width:120px;

  height:30px;

  line-height:30px;

  border-radius:15px;

  color:#fff;

  font-size:14px;

  text-align:center;

  background:#55E276;

  cursor:pointer;

}

//下方为各种位置的按钮,less中允许双斜线的注释

.submit{

  .btn;

  box-shadow:0 1px 5px #ccc;

}

.star{

  .btn;

  &:hover{

    background:#E65151;

  }

}

.buy{

  .btn;

  border:1px solid #ccc;

}

planB

/*传参类似于函数,所以这里的变量作用域仅在{}之内,取什么名字都随意*/

.btn(@color){ //这里加个了括号放参数

  width:120px;

  height:30px;

  line-height:30px;

  border-radius:15px;

  color:#fff;

  font-size:14px;

  text-align:center;

  background:@color; //用参数表示

  cursor:pointer;

}

//下方为各种位置的按钮,背景颜色作为参数传入

.submit{

  .btn(red);

  box-shadow:0 1px 5px #ccc;

}

.star{

  .btn(#55E276);

  &:hover{

    background:#E65151;

  }

}

其实最后我把两个方案相当于合并了一下,共用但是有区别的用传参解决,独有的,直接写就可以了。

传参也可以放入默认值,具体这样写

.btn(@width:500px){width:@width;}

调用时候是这样的

.submit{

  .btn(); //这里一定要加括号,需要改默认值,直接写括号里,否则宽度就是500px

}

04

匹配模式

还是上面的例子,如果我一定要用一个.btn(xxxxx)解决,涵盖所有按钮样式,可不可以,答案是可以。匹配模式就是这种可以随便定制的东西,其实理解起来也很简单,括号里多一个命名而已,比如调用这个.btn(no_border,#55E276); 表示无边框样式,背景色为#55E276(注意,命名是没有@符号的),如果调用.btn(border,#E65151); 表示有边框样式,背景色为#E65151,具体写法如下

.btn(@_,@color){ //不同命名的公共部分要这样写,必须是@_,表示公共部分

  width:120px;

  height:30px;

  line-height:30px;

  border-radius:15px;

  color:#fff;

  font-size:14px;

  text-align:center;

  background:@color; //用参数表示

  cursor:pointer;

}

.btn(no_border,@color){

  //可以直接这样放着,或者写个border:none 这里的列子举得不好,如果换成左浮动右浮动,或者绝对定位的上下左右,应该更好点

}

.btn(border,@color){

  border:1px solid #ccc;

}

.btn(border); //表示默认背景色有边框,边框颜色也可以写个参数进去

.btn(border,#E65151)//表示背景色#E65151,有边框

05

总结

less相关的函数还有一些,一些高级功能可以去官网上查找,但就我目前而言,工作中使用上面的肯定足够足够了,它已经节省了我大量的时间,免去了很多重复劳动。

转载至https://www.cnblogs.com/grey-zhou/p/5796496.html

本文分享自微信公众号 - javascript艺术(gh_4e5484fd6b52),作者:出世sunny

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-04-27

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Less 常用基础知识

    LESS 中的注释   也可以额使用css 中的注释(/**/) 这种方式是可以被编译出来的。   也可以使用// 注释 不会被编译的 变量 ...

    用户1197315
  • numpy的基本用法——基本运算

    Tyan
  • numpy的基本用法——基本运算

    Tyan
  • 项目常用的less语法详解

    双愚
  • LESS简介与使用方法

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

    Leophen
  • LitePal 的基本用法

    SkyRiN
  • String的基本用法

    Mshu
  • OkHttp3的基本用法

    这篇文章说下OkHttp的基本用法,是最新的3哦,如果你曾经在网上搜索OkHttp怎么使用发现有些类没有了可能是因为人家说的是2。

    Albert陈凯
  • tensorflow的基本用法

    Tyan
  • BeautifulSoup的基本用法

    Beautiful Soup 是一个可以从HTML或XML文件中提取数据的Python库.它能够通过你喜欢的转换器实现惯用的文档导航,查找,修改文档的方式。

    py3study
  • requests库的基本用法

    Requests 是使用Python语言编写,基于urllib,采用Apache2 Licensed开源协议的HTTP库。 它比urllib库更加方便,可以节约...

    爱吃西瓜的番茄酱
  • 一、Django的基本用法

    学习Django有一段时间了,整理一下,充当笔记。盗张图: ? MVC 大部分开发语言中都有MVC框架 MVC框架的核心思想是:解耦 降低各功能模块之间的耦合性...

    酱紫安
  • Java BufferedImage的基本用法

    用户5927264
  • tensorflow的基本用法——placeholder

    本文主要是介绍tensorflow中的placeholder及用法。placeholder,中文意思是占位符,在tensorflow中类似于函数参数,运行时必须...

    Tyan
  • 一、Ajax的基本用法

    指发送一个请求,需要等待返回,然后才能够发送下ー个请求。同步交互相当于排队,轮到下一个的情况会因为前一个而有所不同。

    Dreamy.TZK
  • js---- localStorage的基本用法

    容量大小约为20M左右, 存储的数据不会随着用户浏览时会话过期而过期,但会应用户的请求而删除。

    小蔚
  • Linux命令之less命令的用法汇总

      Linux中的less命令主要用来浏览文件内容,与more命令的用法相似,不同于more命令的是,less命令可往回卷动浏览以看过的部分,下面随小编一起来了...

    菲宇
  • Realm 基本用法

    code_horse
  • OkHttp3 基本用法

    这篇文章说下OkHttp的基本用法,是最新的3哦,如果你在网上搜索OkHttp怎么使用发现有些类没有了可能是因为人家说的是2。

    一个会写诗的程序员

扫码关注云+社区

领取腾讯云代金券