Keep on coding

HTML5 - LESS预处理语言

发表于 | 分类于 | | 阅读次数

开篇废话是一种情怀

  • Less是Css的一中高级形态,大家熟知的Bootstrap框架的底层就是用Less编译的,用Less编译的代码很简洁,阅读性比较强.
  • 个人比较喜欢使用Less编译,因为在编译的过程中不用担心权重够不够的问题,结构比较分明.

LESS — – is MORE , Than CSS

介绍

Less 是一门 CSS 预处理语言，使用了类似CSS的语法，为CSS赋予了动态语言的特征。它扩展了 CSS 语言，增加了变量、Mixin(混合)、嵌套、函数和运算等特性，使 CSS 更易维护和扩展。此外，Less 可以运行在 Node 或浏览器端。

特点

作为CSS的一种扩展，LESS CSS不仅向下兼容CSS的语法，而且连新增的特性也是使用CSS语法。这样的设置使得学习LESS非常轻松，而且你可以在任何时候回退到CSS。

  • 用类似js的写法去写LESS,可以设置变量,可以用函数!

变量

单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了

  • 示例代码 : 
1
2
3
4
5
6
7
8
// JS中定义变量
  var name = '张三';
  // LESS中定义变量
  @color:red;
  h1 {
     color: @color;
  }

嵌套 — 值得注意的是:嵌套层级一般不要超过三层

在一个选择器中嵌套另一个选择器来实现继承，这样很大程度上减少了代码量，并且代码看起来更加清晰。

  • 示例代码 : 
1
2
3
4
5
div {
     h1 {
        color:red;
     }
}

运算

  • 运算提供了加、减、乘、除操作，其他复杂的运算交给函数；通常我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。 > 注意：运算符与值之间必须以空格分开。
  • 示例代码 : 
1
2
3
4
5
6
7
8
9
10
@w:500px;
div {
     h1{
       width: @w - 100;
    } 
}
h1 {
  width: @w;
  border: 1px solid #000;
}

混合(Mixins)

  • 混合可以将一个定义好的class A轻松的引入到class B中，从而简单的实现class B 继承class A的所有属性。我们还可以带参数的调用，就像使用函数一样。
  • 示例代码 : 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.yuanjiao(@raius:5px){
    border-radius: @raius;
}
h1{
    width: 300px;
    height: 100px;
    border: 1px solid #000;
    background-color: #fff;
    .yuanjiao();
}
h2{
    width: 200px;
    height: 100px;
    border: 1px solid #000;
    .yuanjiao();
}
  • 注意：混合的使用就和js的自定义函数类似，首先 混合 必须前面是以 . +混合名称开始

    1.结构：.名称(变量){}
    2.可以有默认值，也可以没有默认值，没有的话，在调用的时候必须传参，有默认值的时候就可以不用传递参数；
    3.多个参数之间和js一样，用逗号（,） 隔开

函数

  • LESS中的函数 - 映射了JavaScript函数代码，如果你愿意的话，可以操纵属性值。
  • 示例代码 : 
1
2
3
4
5
6
7
8
9
10
11
12
@color:#f60;
div{
    a{
        font-size: 30px;
        text-decoration: none;
        color: @color;
        &:hover{
            color: lighten(@color,20%);
        }
    }
}
  • 比如：鼠标移上亮度增加20%。
  • 需要查找的时候，直接查文档就可以了
  • 比如:
1
2
3
4
5
6
7
8
saturate(@color, 10%); // 饱和度增加 10%
desaturate(@color, 10%); // 饱和度降低 10%
lighten(@color, 10%); // 亮度增加 10%
darken(@color, 10%); // 亮度降低 10%
fadein(@color, 10%); // 透明度增加 10%
fadeout(@color, 10%); // 透明度降低 10%
fade(@color, 50%); // 设定透明度为 50%
spin(@color, 10); // 色相值增加 10

匹配模式

  • 类似js中的if else判断，只有匹配成功才能起作用
  • 示例代码 : 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.radius(t_l,@w:5px){
    border-top-left-radius: @w;
}
.radius(t_r,@w:5px){
    border-top-right-radius: @w;
}
.radius(b_l,@w:5px){
    border-bottom-left-radius: @w;
}
.radius(b_r,@w:5px){
    border-bottom-right-radius: @w;
}
div{
    width: 300px;
    height: 200px;
    background-color: #fff;
    border-right: 1px solid #000;
    .radius(t_r,10px);
}
  • 注意：匹配模式中,定义的模式名称都是一样的，只是参数不一样，调用的时候只需选择对应的参数就可以了。

使用方法

  • 方式一：客户端直接调用
1
2
3
<link rel="stylesheet/less" href="less/less.less">
<!--用于编译LESS的-->
<script type="text/javascript" src="js/less.min.js"></script>
  • 注意：必须在服务器环境中才能生效，动态编译注入虚拟DOM或者内存中，类似ajax。 开发中常用的服务器组合：WAPM**
  • 方式二：预编译（提前编译）

    1.在代码编辑器中，按照LESS的语法规则写好LESS文件；
    2.使用编译工具把.less文件编译成.css文件；
    3.把编译后的css文件引入到页面即可。

  • 编译工具 — Koala
    点击添加文件,然后直接转换就可以使用
    **Koala**
  • 如何在一个LESS文件中导入另一个LESS文件
    @import "less.less"; // 注意：less文件扩展名可选

    补充

敬请期待 …

  • 接下来会更新Bootstrap框架,因为Bootstrap框架的底层就是用LESS编译的,而且内容也比较多.
  • 考虑到Bootstrap在前端比较火爆和热门,所以单独抽出来整理