10分钟学会CSS预处理语言Less

Less 做为 CSS 的一种形式的扩展，它并没有阉割 CSS 的功能，而是在现有的 CSS 语法上，添加了很多额外的功能，将 CSS 赋予了动态语言的特性，如变量、继承、运算、函数等。

Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js在服务端运行。

所以学习 Less 是一件轻而易举的事情，下面我们就来看看具体语法。

Less 语法

1、变量

很容易理解:

新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。

//设置变量
@niceBlue: #2182e8;
@lightBlue: @niceBlue + #333;
@fontSize: 14px;
//使用变量
.p1 { font-size: @fontSize; color: @niceBlue; }
.p2 { font-size: @fontSize + 4; color: @lightBlue; }

编译后输出:

.p1 {
font-size: 14px;
color: #2182e8;
}
.p2 {
font-size: 18px;
color: #54b5ff;
}

请注意 Less 中的变量为完全的 ‘常量’ ，所以只能定义一次。

2、混合使用

在 Less 中我们可以定义一些通用的属性集为一个class，然后在另一个class中去调用这些属性。下面有这样一个class:

//设置通用的属性集
.bordered {
margin-bottom: 15px; padding-bottom: 5px; border-bottom: solid 1px #ccc;
}

当我们需要在其他class中引入通用的属性集时，我们只需要在任何class中像下面这样调用就可以了：

//调用通用属性集
.title{
font-size: 18px; color: #333; font-weight: bold;
.bordered;
}
.desc{
color: #666;
.bordered;
}

编译后输出，.bordered class里面的属性样式都会在 .title 和 .desc 中体现出来，如下:

.title {
font-size: 18px;
color: #333;
font-weight: bold;
margin-bottom: 15px;
padding-bottom: 5px;
border-bottom: solid 1px #ccc;
}
.desc {
color: #666;
margin-bottom: 15px;
padding-bottom: 5px;
border-bottom: solid 1px #ccc;
}

任何 CSS class, id 或者元素属性集都可以以同样的方式引入。

3、带参数的混合

在 Less 中，还可以像函数一样定义一个带参数的属性集合:

.border-radius (@radius) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}

然后在其他class中像这样调用它:

.button {
.border-radius(6px);
}
.con {
.border-radius(10px);
}

4、嵌套规则

LESS 可以让我们以嵌套的方式编写CSS，我们先看下下面这段 CSS:

#header .logo {
width: 200px;
}
#header .nav {
background: #f8f8f8;
overflow: hidden;
}
#header .nav li {
float: left;
padding: 0 20px;
line-height: 30px;
transition: all 0.5s;
}
#header .nav li:hover {
background: #ccc;
}

在 LESS 中, 我们就可以这样写:

#header{
.logo{ width: 200px; }
.nav{
background: #f8f8f8; overflow: hidden;
li{
float: left; padding: 0 20px; line-height: 30px; transition: all .5s;
&:hover{
background: #ccc;
}
}
}
}

这样代码更简洁了，而且感觉跟DOM结构格式有点像。

注意 & 符号的使用—如果你想写串联选择器，而不是写后代选择器，就可以用到&了。这对伪类尤其有用，如 :hover 和 :before等。

5、运算

Less中任何数字、颜色或者变量都可以参与运算（加、减、乘、除），这样就可以实现属性值之间的复杂关系。下面我们来看一组例子:

@base: 5;
@filler: @base * 2;
.demo4{
padding: 5px * @base;
width: 100% / 2 + @filler;
color: #333 - #111;
background-color: #e6ebf9;
}

编译后输出:

.demo4 {
padding: 25px;
width: 60%;
font-size: 16px;
color: #222222;
background-color: #e6ebf9;
}

括号也同样允许使用：

.demo4{
border: (@base + 2px)/2 solid #333;
}

6、注释

CSS 形式的注释在 LESS 中是依然保留的:

/* Hello, I'm a CSS-style comment */
.class { color: black }

LESS 同样也支持双斜线的注释, 但是编译成 CSS 的时候自动过滤掉:

// Hi, I'm a silent comment, I won't show up in your CSS
.class { color: white }

7、Importing

我们可以在main文件中通过下面的形势引入 .less 文件, .less 后缀可带可不带:

@import "lib.less";
@import "lib";

如果想导入一个CSS文件，并且不想LESS对它进行处理，只需要使用.css后缀即可:

@import "lib.css";

这样LESS就会跳过它不去处理它.

Less编译工具

1、Koala

一款可视化的前端预处理器语言图形编译工具，优点是操作比较简便，多语言支持，监听文件实时编译，可以批量操作，Windows、Linux、Mac都能完美运行。

新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。

2、Node.js 环境中使用 Less

1、下载Windows 安装包(.msi)，选择安装位置：”D:\Program Files\nodejs”，然后一路”Next “即可。

2、检测PATH环境变量是否配置了Node.js，点击开始 => 运行 => 输入”cmd” => 输入命令”path“。

3、检查Node.js版本

node --version

4、安装Less

4.1、在【Node.js command prompt】里输入以下命令

d:
cd D:\Program Files\nodejs\node_modules\npm
//下面命令是安装less，注意一定要有-g，否则还得做些其他工作
npm install less -g
//下面命令用于安装css压缩插件
npm install less-plugin-clean-css

4.2、安装完成后就可以使用lessc的命令了

//下面命令编译less文件生成css
lessc d:\styles.less d:\styles.css
//下面命令启用css压缩插件，生成压缩后的css文件
lessc d:\styles.less d:\styles.min.css -clean-css

4.3、IDE工具集成——HBuilder预编译less配置

文件后缀 .less
处罚命令 C:\Users\James\AppData\Roaming\npm\lessc.cmd
命令参数 %FileName% %FileBaseName%.css

4.4、IDE工具集成——PhpStorm配置less自动编译css

windows打开设置 File -> setting（mac找到首选项Preferences）。

打开之后，在左上角搜索框输入：file Watchers（文件监听）–新建Less类型的文件监听。

前端基础开发

发布了23 篇原创文章 · 获赞 2 · 访问量 1万+

私信关注