Less语法学习笔记

自用学习笔记

作者 _Nomo 日期 2016-04-07
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文件


分享到: