CSS的预处理---less

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：这里可以添加本文要记录的大概内容：
CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、为什么需要less？

CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。

• CSS 需要书写大量看似没有逻辑的代码，CSS 冗余度是比较高的。
• 不方便维护及扩展，不利于复用。
• CSS 没有很好的计算能力
• 非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码项目。
  Less（LeanerStyle Sheets 的缩写）是一门 CSS扩展语言，也成为CSS预处理器。
  做为 CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性。
  它在CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS的维护成本，就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事情。

二、less安装

①安装nodejs，可选择版本(8.0)，网址：http://nodejs.cn/download/
②检查是否安装成功，使用cmd命令（win10是window+r 打开运行输入cmd） —输入“node –v”查看版本即可
③基于nodejs在线安装Less，使用cmd命令“npm install -g less”即可
④检查是否安装成功，使用cmd命令“ lessc -v ”查看版本即可

三、less使用

1. 变量

变量是指没有固定的值，可以改变的。格式：@变量名：；

变量名要求：

• 必须有@为前缀
• 不能包含特殊字符
• 不能以数字开头
• 大小写敏感

@color:#fff;
@font14: 14px;
body {
	font-size:@font14;
}

less会编译出css文件。

2. 嵌套

嵌套是一个元素中含有子元素。

// 嵌套
// 在类名header 中有一个类名nav
.header {
    .nav {
        color: @color;
    }
}
// 等同于css中的
.header .nav {
  color: #fff;
}

我们之前还学习了选择器，其中结构选择器、伪类选择器等在less时需要注意要用&连接。

//例如
a {
    :hover {
        text-decoration: none;
    }
}
//编译成css就变成了
a :hover {
  text-decoration: none;
}
// 这样是错误的设置，不会产生效果，正确的写法是添加&连接
a {
    &:hover {
        text-decoration: none;
    }
}
a:hover {
  text-decoration: none;
}

3. 运算

我们需要使用less的理由中最重要的就是css中不能进行运算，给我们带来了许多不便，但在less中就可以进行相应的四则运算了。

任何数字、颜色或者变量都可以参与运算

@w: 30;
@w2: 20;
body {
// 乘号（*）和除号（/）的写法
// 运算符中间左右有个空格隔开
    width: @w * @w2;
    height: (@w2 / @w);//根据版本的不同决定括号的添加
}
body {
  width: 600;
  height: 0.66666667;
}
// 对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位 
body {
    width: 20px + 30rem;
}
body {
  width: 50px;
}
// 如果两个值之间只有一个值有单位，则运算结果就取该单位
body {
    height: 20 - 10rem ;
}
body {
  height: 10rem;
}

---

总结

提示：这里对文章进行总结：
less是对css的优化，让css更方便与移动端的布局联合使用。