十分钟学会less

2017-08-10 173 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/.


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

学习课堂

PHP生成唯一订单号的几种方法汇总

有电子商城项目,需要生成订单号。当时的考虑很简单,取系统时间加上随机数,或者使用 uniqid() 方法。仔细考虑下上述方法,在顾客购买量少的情况下,订单重复的可能性为零,但是在购买高蜂期生成的订单号重复是很有可能发生的...

2016-07-06
2017-06-26
2017-06-14
2017-03-01

动态更新

有关我司客户被匿名人士告知续费的正告

近期收到部分客户的反馈,反应说有收到匿名电话通知续费的事情,之前我司也一再表态和告知相关客户,市场上很多不法分子(其中不乏有很多竞争对手),通过恶意诋毁,恶意骚扰我司客户方式,告诉说深正互联公司不开了,已经倒闭之类的流言蜚语...

2015-10-12
2016-08-18
2017-04-21
2017-03-10

资讯知识

英特网的标准化工作诠释

英特网(因特网)的标准化工作对英特网的发展起到了非常重要的作用。我们知道,标准化工作的好坏对一种技术的发展有着很大的影响。缺乏国际标准将会使技术的发展处于比较混乱的状态,而盲目自由竞争的结果很可能形成多种技术体制并存且互不兼容的状态(如过去形成...

>2016-09-06
>2017-06-12
>2017-10-21
>2016-12-15
亲,请您联系我们吧

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