十分钟学会less

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


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

学习课堂

RSS有什么帮助或者起到什么作用?

RSS主要用于博客、新闻站点、论坛等更新内容频繁的网站,随着RSS的普及,越来越多的网站都提供RSS源(RSS Feed),即发布一个RSS文件,RSS的用途主要体现在一下两方面...

2016-10-12
2017-06-19
2017-03-03
2017-03-31

动态更新

【签约】深圳市云阳食品有限公司网站建设

深圳市云阳食品有限公司是一家专业的面制品的生产企业,公司位于深圳市南山区,目前已经获得了国家食品以及相关检验部门颁发的生产许可证。公司下属深圳市南山区西丽云阳食品面制品厂,专注于各种高品质新鲜面条、饺子皮、云吞皮,湿干面等,日产量达到15万斤...

2015-02-05
2017-02-28
2016-07-26
2016-05-11

资讯知识

女人的“三寸金莲”起源于哪个朝代?

在我国古代,女子被迫用一条长长的布条紧紧地讲双足裹住,借以改变脚的形状,使之以畸形的方式长成不过三寸的模样,这就是所谓的“三寸金莲”。时至近代直至民国,这种对女性身心摧残的陋习才被彻底废止...

>2017-06-28
>2016-07-11
>2016-10-28
>2016-07-12
亲,请您联系我们吧

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