浅谈css预处理语言less

作者:十五来源:lanyunwork时间:2018.03.17

CSS(层叠样式表)是一门历史悠久的标记性语言,同 HTML 一道,被广泛应用于万维网(World Wide Web)中。HTML 主要负责文档结构的定义,CSS 负责文档表现形式或样式的定义。作为一门标记性语言,CSS 的语法相对简单,对使用者的要求较低,但同时也带来一些问题:CSS 需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用,尤其对于非前端开发工程师来讲,往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码,造成这些困难的很大原因源于 CSS 是一门非程序式语言,没有变量、函数、SCOPE(作用域)等概念。

所以,LESS这类css预处理语言出现了。我们的LESS 为 Web 开发者带来了福音,它在 CSS 的语法基础之上,引入了变量,Mixin(混入),运算以及函数等功能,大大简化了 CSS 的编写,并且降低了 CSS 的维护成本,就像它的名称所说的那样,LESS 可以让我们用更少的代码做更多的事情。
LESS的原理,即它包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性,更不是用来取代 CSS 的,而是在现有 CSS 语法的基础上,为 CSS 加入程序式语言的特性。

1、LESS的使用方式

客户端:可以直接使用less文件,引入时记得把rel属性设置成"stylesheet/less",并且在引入less文件之后需要引入less.js文件,使得咱们的less源文件可以被正确的编译解析
<link rel="stylesheet/less" type="text/css" href="style.less">
服务器端:LESS 在服务器端的使用主要是借助于 LESS 的编译器,将 LESS 源文件编译生成最终的 CSS 文件,目前常用的方式是利用 node 的包管理器 (npm) 安装 LESS,安装成功后就可以在 node 环境中对 LESS 源文件进行编译。

2、Less中的变量

Less的一个主要功能就是可以让你像在其它高级语言中一样声明变量,这样你就可以存储你经常使用的任何类型的值 : 颜色,尺寸,选择器,字体名称和 URL 等。less 的哲学是在可能的情况下重用CSS语法。

这里,我们声明了两个变量,一个是背景颜色,一个是文本颜色,它们都是十六进制的值。

Less 代码如下:

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

将其编译成 CSS 代码如下:

p{ background-color: #ffffff; color: #1A237E; padding: 15px; }
 ul{ background-color: #ffffff; }
 li{ color: #1A237E; }

在上面的例子当中,背景颜色是白色,文本颜色是黑色。比方说,现在我们要切换二者的值,也就是黑色的背景和白色的文本,我们只需要修改两个变量的值就可以了,而不是手动的去修改每个值。

 

3、Less中的Mixins

Less 允许我们将已有的 classid 的样式应用到另一个不同的选择器上。 下面这个例子可以清楚地说明这一点。

#circle{ background-color: #4CAF50; border-radius: 100%; } 
#small-circle{ width: 50px; height: 50px; #circle } 
#big-circle{ width: 100px; height: 100px; #circle }

将其转换成 CSS 代码如下

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

此时编译成 CSS :

#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 另一个比较酷的功能就是它支持传入参数,下面这个例子就为 circle 传入一个指定宽高的参数,默认是 25px。 这将创建一个 25×25的小圆和一个 100×100 的大圆。

#circle(@size: 25px){
    background-color: #4CAF50;
    border-radius: 100%;

    width: @size;
    height: @size;
}

#small-circle{
    #circle
}

#big-circle{
    #circle(100px)
}

转换成 CSS :

#small-circle {
    background-color: #4CAF50;
    border-radius: 100%;
    width: 25px;
    height: 25px;
}
#big-circle {
    background-color: #4CAF50;
    border-radius: 100%;
    width: 100px;
    height: 100px;
}

官方文档 了解更多关于 mixin 的知识。

 

4、Less中的嵌套

嵌套可用于以与页面的HTML结构相匹配的方式构造样式表,同时减少了冲突的机会。下面是一个无序列表的例子。

ul{
    background-color: #03A9F4;
    padding: 10px;
    list-style: none;

    li{
        background-color: #fff;
        border-radius: 3px;
        margin: 10px 0;
    }
}

编译成 CSS 代码:

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

编译生成的 CSS 代码如下:

ul {
    background-color: #03A9F4;
    padding: 10px;
    list-style: none;
}
ul li {
    color: #ffffff;
    border-radius: 3px;
    margin: 10px 0;
}

这里 了解更多关于作用域的知识。

 

5、Less中的运算

你可以对数值和颜色进行基本的数学运算。比如说我们想要两个紧邻的 div 标签,第二个标签是第一个标签的两倍宽并且拥有不同的背景色。

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

编译成 CSS 如下:

div {
    height: 50px;
    display: inline-block;
}
#left {
    width: 100px;
    background-color: #004590;
}
#right {
    width: 200px;
    background-color: #03a9f4;
}

 

6、Less中的函数

Less 中也有函数,这让它看起来像一门编程语言了,不是吗?

让我们来看一下 fadeout, 一个降低颜色透明度的函数。

@var: #004590;

div{
  height: 50px;
  width: 50px;
  background-color: @var;

  &:hover{
    background-color: fadeout(@var, 50%)
  }
}

编译成 CSS 如下所示:

div {
    height: 50px;
    width: 50px;
    background-color: #004590;
}
div:hover {
    background-color: rgba(0, 69, 144, 0.5);
}

通过上述代码,当我们将鼠标悬浮在 div 上时,就可以获取半透明度的动画效果,这比之前自己手动设置要简单的多了。还有很多有用的函数去操纵颜色,检测图像的大小,甚至将资源作为data-uri嵌入样式表,在 这里 查看这些函数的列表。