为什么要有css预处理器
CSS基本上是设计师的工具，不是程序员的工具。在程序员的眼里，CSS是很头痛的事情，它并不像其它程序语言，比如说PHP、Javascript等等，有自己的变量、常量、条件语句以及一些编程语法，只是一行行单纯的属性描述，写起来相当的费事，而且代码难以组织和维护。
很自然的，有人就开始在想，能不能给CSS像其他程序语言一样，加入一些编程元素，让CSS能像其他程序语言一样可以做一些预定的处理。这样一来，就有了“CSS预处器（CSS Preprocessor）”。
什么是css预处理器
- 是 CSS 语言的超集，比CSS更丰满。
CSS 预处理器定义了一种新的语言，其基本思想是：用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。
通俗的说，CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。
CSS预处理器技术已经非常成熟，而且也涌现出了很多种不同的CSS预处理器语言，比如说：Sass（SCSS）、LESS、Stylus、Turbine、Swithch CSS、CSS Cacheer、DT CSS等。如此之多的CSS预处理器，那么“我应该选择哪种CSS预处理器？”也相应成了最近网上的一大热门话题，在Linkedin、Twitter、CSS-Trick、知呼以及各大技术论坛上，很多人为此争论不休。相比过计我们对是否应该使用CSS预处理器的话题而言，这已经是很大的进步了。
到目前为止，在众多优秀的CSS预处理器语言中就属Sass、LESS和Stylus最优秀，
less的介绍
less 是一款比较流行的预处理 CSS，支持变量、混合、函数、嵌套、循环等特点。
less的使用
- 做法一:先编译成css,在HTML中引入css,产品上线推荐使用
- 做法二:在html中直接引用less文件
首先下载less.js放在lib文件中
<!-- 1. 创建和引入less文件 页面中可以直接引入 但是不会像CSS一样执行 强调rel="stylesheet/less" -->
<link rel="stylesheet/less" href="demo.less">
<!-- 2. 引入一个less.js文件 编译器文件 用来编译less -->
<!-- 因为less虽然引入了但是代码不能被浏览器解析成样式 通过less.js 吧less代码 编译(在js代码里面临时去编译)成css代码浏览器才可以执行 -->
<script src="jd/lib/less/less.js"></script>
<!-- 3. 使用服务器打开页面 less.js里面会发送ajax 请求demo.less 吧代码编译成css代码 通过style标签嵌入到页面中 完成了less的编译 所以要注意引入顺序 因为less.js是用来编译demo.less的 所以先引入demo.less 再引入less.js -->
less的基本语法
1.注释(两种)
1 // 模板注释 这里的注释转换成CSS后将会删除
2 /* */ CSS 注释语法 转换为CSS后会保留
总结：如果在less中写注释，我们推荐写第一种注释。除非是类似于版权等内容，就采用第二种注释。
2.定义变量
我们可以把重复使用或经常修改的值定义为变量，在需要使用的地方引用这个变量即可。这样可以避免很多重复的工作量
2.1定义变量
在less里面可以写高级代码
语法使用@符号开头
变量名的命名规范和JS一样 中间可以有-
值可以是任意CSS里面能够写的值 px 颜色 单词等等 但是写值的时候和CSS一样带单位
@变量名:值; */
/* 变量都是全局变量 变量名不能冲突 */
/* 把全局变量单独提取到一个文件里面 */
@bgc: #ccc;
@w-100:200px;
@h-100:200px;
@border-color:hotpink;
2.2 使用变量
.box1 {
background-color: @bgc;
width: @w-100;
height: @h-100;
margin-top: 10px;
float: left;
}
2.3 使用嵌套
在 css 中经常会用到子代,后代选择器,经常嵌套了很多层，写起来很繁琐
用less写就比较简洁,而且易于维护,结构与HTML结构相同
.container{
width: 1170px;
margin: 0px auto;
padding: 0 15px;
height: 100px;
>.row{
margin: 0px -15px;
height: 100px;
>.col{
width: 33.33%;
float: left;
>a{
color:red;
text-decoration: none;
/* &在哪里面就表示谁 和JS this */
/* 表示当前的a的hover */
&:hover{
color:green;
}
&::before{
content:'伪元素';
}
&::after{
content:'伪元素';
}
/* 交集选择器 */
&.active{
color:yellow;
}
}
}
}
}
编译成css后的代码
/* less嵌套 可以像标签一样写嵌套 */
.container {
width: 1170px;
margin: 0px auto;
padding: 0 15px;
height: 100px;
}
.container > .row {
margin: 0px -15px;
height: 100px;
}
.container > .row > .col {
width: 33.33%;
float: left;
}
.container > .row > .col > a {
color: red;
text-decoration: none;
/* &在哪里面就表示谁 和JS this */
/* 表示当前的a的hover */
/* 交集选择器 */
}
.container > .row > .col > a:hover {
color: green;
}
.container > .row > .col > a:before {
content: '伪元素';
}
.container > .row > .col > a:after {
content: '伪元素';
}
.container > .row > .col > a.active {
color: yellow;
}
2.4Mixin(自定义函数)
Mixin 的作用是把重复的代码放到一个类当中，每次只要引用类名，就可以引用到里面的代码了，非常方便。
（1）在 less 文件中定义一个类：（将重复的代码放到自定义的类中）
/* 给自定义函数添加参数
变量在函数里面 表示一个形参 参数名称也是@符号
可以把一些重复使用样式封装成一个函数 还可以带参数 参数还可以设置默认值
参数可以有多个 多个使用特殊符号隔开 一般是逗号
*/
/* 把所有全局的函数 单独提取到了一个公共的文件 */
.bordertb(@size,@style){
border-top: @size @style @border-color;
border-bottom: @size @style @border-color;
}
.bordertb(@size:5px,@style:solid){
border-top: @size @style @border-color;
border-bottom: @size @style @border-color;
}
上方代码中，括号里的内容@size是参数：这个5px参数的默认值。
（2）在 less 文件中引用上面这个类：
.box1 {
background-color: @bgc;
width: @w-100;
height: @h-100;
margin-top: 10px;
.bordertb();
float: left;
}
.box2 {
background-color: @bgc;
width: @w-100;
height: @h-100+100;
margin-top: 10px;
.bordertb(20px,dashed);
float: left;
}
2.5 导包@import
（1）定义一个被引用的less文件，名为variables.less：
/* 1. 定义变量
在less里面可以写高级代码
语法使用@符号开头
变量名的命名规范和JS一样 中间可以有-
值可以是任意CSS里面能够写的值 px 颜色 单词等等 但是写值的时候和CSS一样带单位
@变量名:值; */
/* 变量都是全局变量 变量名不能冲突 */
/* 把全局变量单独提取到一个文件里面 */
@bgc: #ccc;
@w-100:200px;
@h-100:200px;
@border-color:hotpink;
（2）在 demo.less 中引用上面的 variables.less
/* 4. 引包 一般在最前面 把别的less文件的代码引入到当前less文件里面执行
把一些公共的样式 变量放到公共的文件里面 */
/* 引入定义变量的less文件 */
@import 'variables.less';
/* 引入定义函数的less文件 */
@import 'mixins.less';
.box1 {
background-color: @bgc;
width: @w-100;
height: @h-100;
margin-top: 10px;
.bordertb();
float: left;
}
将 上面的demo.less编译为 demo.css之后，自动生成的代码如下：
.box1 {
background-color: #ccc;
width: 200px;
height: 200px;
margin-top: 10px;
border-top: 5px solid hotpink;
border-bottom: 5px solid hotpink;
border-top: 10px solid hotpink;
border-bottom: 10px solid hotpink;
float: left;
}
demo.less会自动使用 variables.less里面定义好的变量
2.6 内置函数
less有一些内置函数
body {
background-color: lighten(#000, 90%); // 让黑色变亮 10%
color: darken(#fff, 10%); // 让白色变暗 10%
}
less的编译
两种方式
第一种
1 less 的编译，依赖于 NodeJS 环境。因此，我们需要先安装 NodeJS。去Node.js官网下载安装即可
2 安装less的编译环境
npm默认为国外的话不翻墙可能安装包很慢甚至安装不了推荐使用国内的 执行分别下面2段命令
//切换淘宝镜像
npm config set registry http://registry.npm.taobao.org/
//全局安装下载less
npm install -g less
- 将 less 文件编译为 css 文件
在 less 所在的路径下，输入 lessc xxx.less，即可编译成功。或者，如果输入lessc xxx.less > ..\xx.css，表示输出到指定路径。
第二种
使用vscode的Easy less插件,安装插件,less文件保存后会自动编译成css
