十分钟学会less

2017-08-10 249 0 编辑:唯丽是从 来源:互联网

我们都知道在大型的项目中,当css有数千行代码的时候,css的编写有一些麻烦。我们经常会出现复制相同的代码到不同的地方或者通过我们的编辑器来替换所有相同的颜色。这需要我们费很大的力气去保持css的可维护性。但是其实我们并不是一定要这样。


幸运的是,web开发社区已经解决了这个问题。我们现在有了类似Less, Sass和Stylus等的CSS预处理器。这些工具相比于原始的css给了我们以下的优点:


变量,我们可以定义变量来很方便的在你的css中改变值

动态的变量计算。(在css中我们可以使用calc,但是这个只可以用于长度的单位计算)

Mixins, 可以帮助我们复用和组合css代码,甚至还支持传参。

Functions, 提供了一系列使用的工具,用于控制颜色,将图片转为data-uris等.

一个不好的方面是,一旦你你使用了这些预处理器中的任何一个,你就必须要编译你的样式表为普通的css文件你才可以让它在浏览器中正常的工作。


1. Getting Started


Less是由JavaScript编写的,所以需要Node.js或者web浏览器来运行。你可以在你的web站点中加入less.js,它会在实时编译所有的

.less

文件,但是速度比较慢同时也不推荐这么使用。比较好的办法是把编译你的less为css,然后在线上部署普通的css文件。有很多的免费的图形化软件可以编译.less文件,不过在这里我们会使用node.js。


如果你已经安装了node,而且你也知道terminal是什么,那就打开一个而且你也知道terminal是什么,然后使用NPM安装less:


npm install -g less

安装完毕后你可以在任何一个terminal中使用

lessc

命令,你可以通过类似下面这个命令来编译你的.less文件来输出一个CSS文件


lessc styles.less > styles.css

我们下面所有的样式都是基于less的,可以将代码转换为类似

styles.css

的普通的CSS代码。然后在html中加入css文件。如果你的编译出现了错误,错误的相关信息会展示在你的terminal上面。


2. Variables(变量)


Less中很重要的一个特性就是可以像普通的编程语言一样创建变量。变量可以存储任何你经常使用的变量:类似颜色,尺寸,选择器,字体名字,url等等。less的核心就是尽可能的复用你的css代码。


这里,我们定义了两个变量,一个用于背景颜色,另一个用于文字颜色,它们都包含了16进制的代码。你可以切换两个变量来编译出不同版本的代码:


@background-color: #ffffff;

@text-color: #1A237E;

p{

  background-color: @background-color;

  color: @text-color;

  padding: 15px;

}

ul{

  background-color: @background-color;

}

li{

  color: @text-color;

}

p{

  background-color: #ffffff;

  color: #1A237E;

  padding: 15px;

}

ul{

  background-color: #ffffff;

}

li{

  color: #1A237E;

}

在上面的例子中,背景颜色是白色,文字是深色的,如果我们想要深色的背景和白色的文字,我们只需要改变变量的值,所有用到这些变量的地方都会被替换。


在 http://lesscss.org/features/#variables-feature 你可以获取关于less中变量的更多信息


3. Mixins


LESS可以帮你把一个已经存在的class或者id下面所有的样式应用在其他的选择器里面。下面这个例子可以更好的说明:


#circle{

  background-color: #4CAF50;

  border-radius: 100%;

}

#small-circle{

  width: 50px;

  height: 50px;

  #circle

}

#big-circle{

  width: 100px;

  height: 100px;

  #circle

}

#circle {

  background-color: #4CAF50;

  border-radius: 100%;

}

#small-circle {

  width: 50px;

  height: 50px;

  background-color: #4CAF50;

  border-radius: 100%;

}

#big-circle {

  width: 100px;

  height: 100px;

  background-color: #4CAF50;

  border-radius: 100%;

}

你过你不想把你用于mixin输出在最终的css文件里,你可以加上一个圆括号:


#circle(){

  background-color: #4CAF50;

  border-radius: 100%;

}

#small-circle{

  width: 50px;

  height: 50px;

  #circle

}

#big-circle{

  width: 100px;

  height: 100px;

  #circle

}

#small-circle {

  width: 50px;

  height: 50px;

  background-color: #4CAF50;

  border-radius: 100%;

}

#big-circle {

  width: 100px;

  height: 100px;

  background-color: #4CAF50;

  border-radius: 100%;

}

mixins还有一个很酷的特性就是可以接收参数。在下面的例子中,我们在circles添加了一个参数用于width和height,同时设置默认值为25px。下面会生成一个宽高为25的#small-circle和一个宽高为100的#big-circle。


#circle(@size: 25px){

  background-color: #4CAF50;

  border-radius: 100%;

  width: @size;

  height: @size;

}

#small-circle{

  #circle

}

#big-circle{

  #circle(100px)

}

#small-circle {

  background-color: #4CAF50;

  border-radius: 100%;

  width: 25px;

  height: 25px;

}

#big-circle {

  background-color: #4CAF50;

  border-radius: 100%;

  width: 100px;

  height: 100px;

}

阅读官方文档(http://lesscss.org/features/#mixins-feature)了解Less mixins的更多信息


4. Nesting and Scope(嵌套和作用域)


嵌套可以帮助你将html的页面结构和样式表的结构相同,同时也可以减少冲突。下面是一个无序列表(ul)和其子元素的例子:


ul{

  background-color: #03A9F4;

  padding: 10px;

  list-style: none;

  li{

    background-color: #fff;

    border-radius: 3px;

    margin: 10px 0;

  }

}

ul {

  background-color: #03A9F4;

  padding: 10px;

  list-style: none;

}

ul li {

  background-color: #fff;

  border-radius: 3px;

  margin: 10px 0;

}

和在编程语言中一样,Less中变量的使用也是依赖于作用域。如果一个变量没有在当前的作用域被定义,那么LESS会一直向上找,并使用最靠近的声明的变量。


下面的代码在编译为css的过程中,

li

会有白色的文字,因为我们在ul中提前定义了text-color变量。


@text-color: #000000;

ul{

  @text-color: #fff;

  background-color: #03A9F4;

  padding: 10px;

  list-style: none;

  li{

    color: @text-color;

    border-radius: 3px;

    margin: 10px 0;

  }

}

ul {

  background-color: #03A9F4;

  padding: 10px;

  list-style: none;

}

ul li {

  color: #ffffff;

  border-radius: 3px;

  margin: 10px 0;

}

在这里 http://lesscss.org/features/#features-overview-feature-scope 可以了解到更多关于scope的信息。


5. Operations


你可以对数字和颜色使用一些简单的数学计算。如果我们有两个相邻的div,第二个的宽度是第一个的两倍,同时需要有不同的背景颜色。LESS内部会知道如何计算单位来保证不出现一团糟的情况。


@div-width: 100px;

@color: #03A9F4;

div{

  height: 50px;

  display: inline-block;

}

#left{

  width: @div-width;

  background-color: @color - 100;

}

#right{

  width: @div-width * 2;

  background-color: @color;

}

div {

  height: 50px;

  display: inline-block;

}

#left {

  width: 100px;

  background-color: #004590;

}

#right {

  width: 200px;

  background-color: #03a9f4;

}

6. Functions


LESS还有函数!这是不是越来越想一个编程语言了?


让我们来看一看

fadeout

这个函数,这个函数用来降低颜色的透明度。


@var: #004590;

div{

  height: 50px;

  width: 50px;

  background-color: @var;

  &:hover{

    background-color: fadeout(@var, 50%)

  }

}

div {

  height: 50px;

  width: 50px;

  background-color: #004590;

}

div:hover {

  background-color: rgba(0, 69, 144, 0.5);

}

上面这段代码表示,当鼠标移动到div上,div的背景色会变成加上一半的透明度,而且相当的简单。还有很多的其他的有用的函数可以用于操作颜色,检测图片的大小,甚至还可以将资源以data-uri形式嵌入到样式表中。这里可以查看到完整的函数列表 http://lesscss.org/functions/.


本站文章均为深正网站建设摘自权威资料,书籍,杂志或原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享到社交网站,引用和转载,我们谢绝直接复制和抄袭!感谢您...

学习课堂

【网站建设】applicationCache对象的事件

applicationCache对象处理具有update方法与swapCache方法之外,还具有一系列的事件。下面用过前面讲过的浏览器与服务器的交互过程来看一下在这个过程中的这些事件是如何被触发的...

2017-10-09
2016-07-18
2017-10-18
2017-04-14

动态更新

【签约】盟华资产深圳有限公司直播系统开发

盟华(深圳)资产管理有限公司总部位于广东省深圳市,地处深圳地王大厦46层。作为90年代深圳的地价之王和深圳速度的代表,以地王为首的蔡屋围金融中心,拥有深圳元老级的不凡身份象征,实力雄厚,历史辉煌。在这个定位高端、资源丰富的风水宝地上,曾经见证了无数企业的起步和发展历程...

2016-03-08
2016-09-07
2016-03-31
2016-04-05

资讯知识

W3C启动Web支付标准工作,推进在线结算流程

W3C 计划制定的标准将支持目前现存及即将问世的诸多支付方式,其中包括借记卡支付、信用卡支付、移动支付系统、代管账户支付、比特币支付以及其他分布式分账类 技术。相关支付API将支持浏览器辅助实现的支付工具注册及选择等功能,并为自动安全支付,特别是移动设备端的自动安全支付建立良好的基础,从而为广大商 家和用户带来更安全的交易平台以及更多的支付方式选择。

>2017-03-09
>2017-10-21
>2016-08-18
>2016-08-08
亲,请您联系我们吧

您的疑问,只要您主动联系,将为您得到最专业,最全面的解答,欢迎您询问...