Less语法学习笔记

自用学习笔记

作者 _Nomo 日期 2016-04-07
前端技术 CSS Less
Less语法学习笔记

Less 将 CSS 赋予了动态语言的特性，如 变量，继承，运算，函数等等。 Less 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行。

Less的使用方法

客户端使用Less文件

在客户端使用Less文件——效率较低 (不推荐使用)
1、编写 .less 源文件；
2、编写 .html 文件，引入 .less ，同时再引入less.js文件；
3、客户端下载 .html 文件，再下载less.js，再下载 .less 文件，使用less.js把 .less 文件在浏览器的内存中执行编译操作，转换为css样式。
点击下载 Less.js

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <!--在客户端应用less，必须先导入.less文件，再调用less.js-->
  <link rel="stylesheet/less" href="css/my.less"> <!--注意此处的rel值-->
  <script src="js/less.min.js"></script>
</head>
<body>
   <h1>LESS样式语言</h1>
</body>
</html>

服务器端使用Less文件

服务器端使用Less文件方法：
1、程序员编写 .less 源文件；
2、程序员在自己的电脑中安装Less编译器，运行它，把 .less 编译为 .css 文件；
3、程序员编写 .html 文件，引入编译得到的 .css 文件；
4、客户端浏览器下载 .html 及其引入的 .css 文件即可。

安装Less编译器

1、下载并安装一款服务器端JS解释程序 —— NodeJS等；
2、下载Less编译器程序 lessc ，一个JS文件；
3、运行JS解释程序，执行lessc文件，把.less文件编译为.css文件。
点击下载编译器程序 lessc 。

具体又有两种使用方法：
1)使用Node.js直接在命令行调用命令:

1
node E:\npm\node_modules\less\bin\lessc       /* d:/1.less 会解析生成一个 d:/1.css */

2)直接把Less编译器配置为 WebStorm 中的FileWatcher，用户只要一创建或修改.less文件，立即自动编译出.css文件。

Less语法

less的基本语法

Less支持CSS所有的语法和多行注释(会被编译到.css中)和单行注释(不会被编译到.css中)。

1
2
3
4
5
body {
  margin: 0;
}
/*多行注释*/
//单行注释

变量的概念

语法： @变量名: 变量值;

1
2
3
4
5
6
7
8
9
10
11
12
13
//Less支持变量的概念
@jd-red: #ff0000;  //颜色
@half-opac: 0.5;   //数值
@md-border: 4px;   //数值+单位
@std-font: "SimHei";  //字符串
@default-border: solid; //样式值
@global-link:  underline;  //样式值
.alert {
  border: @md-border @default-border @jd-red;
  color: @jd-red;
  background: @jd-red;
}
  • 得到的CSS样式：
1
2
3
4
5
.alert {
  border: 4px solid #ff0000;
  color: #ff0000;
  background: #ff0000;
}

样式的混入/混合

语法：
.选择器1 { 样式; }

.选择器2 {
css样式；
.选择器1;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
//超级变量——样式混入
.border-box {
  border: 1px solid #aaa;
  background: #eee;
}
.well {
  .border-box;
  padding: 20px;
}
.panel {
  .border-box;
  margin: 10px;
}
  • 得到的CSS样式：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.border-box {
  border: 1px solid #aaa;
  background: #eee;
}
.well {
  border: 1px solid #aaa;
  background: #eee;
  padding: 20px;
}
.panel {
  border: 1px solid #aaa;
  background: #eee;
  margin: 10px;
}

混合时带参数

语法：
.选择器1(形参列表) { css样式; }
.选择器2 {
css样式；
.选择器1(实参列表);
}

1
2
3
4
5
6
7
8
9
10
11
12
.border-box(@bw, @bc:#eee) {
  border: @bw solid @bc;
  background: #eee;
}
.well {
  .border-box(10px);
  padding: 20px;
}
.panel {
  .border-box(20px, #ccc);
  margin: 10px;
}
  • 得到的CSS样式(.border-box不会再出现在css中)：
1
2
3
4
5
6
7
8
9
10
.well {
  border: 10px solid #eeeeee;
  background: #eee;
  padding: 20px;
}
.panel {
  border: 20px solid #cccccc;
  background: #eee;
  margin: 10px;
}

样式选择器嵌套

语法：
.选择器1 {
css样式;
.选择器2 { css样式； }
}
极大的方便了以后的修改与维护

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/*样式选择器嵌套*/
.main {
  width: 1211px;
  .left {
    float: left;
    width: 20%;
    ul {
      list-style:none;
      li {
        padding: 0;
        > a {
          text-decoration: none;
          &:hover {
            text-decoration: underline;
          }
        }
      }
    }
  }
}
  • 得到的CSS样式：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/*样式选择器嵌套*/
.main {
  width: 1211px;
}
.main .left {
  float: left;
  width: 20%;
}
.main .left ul {
  list-style: none;
}
.main .left ul li {
  padding: 0;
}
.main .left ul li > a {
  text-decoration: none;
}
.main .left ul li > a:hover {
  text-decoration: underline;
}

算术运算功能

可以执行对数值（可以带单位）、颜色、大小进行运算。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*Less算术运算*/
@cutter-width: 30px; 
@half-opacity: 0.5;
@navbar-height: 60px;
@logo-height: 24px;
.col-md-1 {
  padding-left: @cutter-width/2;
  padding-right: @cutter-width/2;
}
.modal {
  background: rgba(0,0,0, @half-opacity*1.5);
}
.logo {
  margin-top: (@navbar-height - @logo-height)/2;
}
  • 得到的CSS样式：
1
2
3
4
5
6
7
8
9
10
11
/*Less算术运算*/
.col-md-1 {
  padding-left: 15px;
  padding-right: 15px;
}
.modal {
  background: rgba(0, 0, 0, 0.75);
}
.logo {
  margin-top: 18px;
}

预定义功能函数

image-width() , image-height() , ceil() , floor() , round()
lighten(color, 百分比) , darken(color, 百分比)

1
2
3
4
5
6
7
8
9
/*Less预定义的函数*/
.xiao2 {
  height: image-height('../img/2.jpg');
  width: image-width('../img/2.jpg');
}
@md-container-width: 970px;
.col-md-1 {
  width: floor(@md-container-width/12);
}
  • 得到的CSS样式：
1
2
3
4
5
6
7
8
/*Less预定义的函数*/
.xiao2 {
  height: 150px;
  width: 200px;
}
.col-md-1 {
  width: 80px;
}

文件导入功能

实现根据逻辑功能，把样式文件分解，便于分工协作。
CSS中也有文件导入，但会增加HTTP请求次数；—— 不推荐使用
但Less中的文件导入，在服务器端把要引入的文件包含进入当前生成的.css，从而组成一个大的完整的.css文件。—— 推荐使用

1
2
3
4
5
6
7
8
/*Less引入CSS文件没有任何好处*/
/*@import "panel.css";*/
/*@import "carousel.css";*/
/*@import "modal.css";*/
@import "carousel.less";
@import "modal.less";
@import "panel";  //可以省略.less后缀
  • 得到的CSS样式是把这个几个less分别解析并融合：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.carousel {
  border: 1px solid #aaa;
  padding: 10px;
  border-radius: 4px;
}
.modal {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}
.modal-dialog {
  margin: 30px auto 0 auto;
  width: 400px;
}
.modal-content {
  background: #fff;
}
.panel {
  border: 1px solid #aaa;
  padding: 10px;
  border-radius: 4px;
}

Bootstrap定制

Bootstrap的CSS样式本身就是使用Less写的，里面大量运用了Less的导入和变量功能。
值得注意的是，Bootstrap 使用很多的lees文件，但是因为运用大量导入所以只会生成一个有效CSS文件。
点击下载 Bootstrap 的 Less文件。

分享到：
标签
前端技术 CSS Less
友情链接