十分钟学会less

css3

浏览数:2,367

2017-12-12

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

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

  • 变量，我们可以定义变量来很方便的在你的css中改变值
  • 动态的变量计算。(在css中我们可以使用calc，但是这个只可以用于长度的单位计算)
  • Mixins, 可以帮助我们复用和组合css代码，甚至还支持传参。
  • Functions, 提供了一系列使用的工具，用于控制颜色，将图片转为data-uris等.

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

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上面。

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中变量的更多信息

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的更多信息

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的信息。

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;
}

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/.

扩展阅读

到这里你所了解的知识已经可以让你上手less了！所有的css文件都是有效的less样式表，你可以开始优化你的老的，不灵活的css代码了。除了上面的那个知识，如果你了解的更多，你会写出更好的代码。下面是我们推荐你们阅读的文章：

所有语言的特性 – http://lesscss.org/features/#features-overview-feature
LESS函数参考 – http://lesscss.org/functions/
在线编辑和编译 – http://less2css.org/

译者：wleonardo
译文：http://www.zcfy.cc/article/3464](http://www.zcfy.cc/article/3464
原文：https://tutorialzine.com/2015/07/learn-less-in-10-minutes-or-less](https://tutorialzine.com/2015/07/learn-less-in-10-minutes-or-less

喜欢 0

© 2012-2019 jqhtml.com · 湘ICP备16001111号-1