Less后续

二、Less后续

安装

Node.js 环境中使用 Less ：
npm install -g less

lessc styles.less styles.css
1.在命令行 使用npm安装
npm install -g less

具体使用命令
$ lessc styles.less > styles.css
这将输出编译之后的 CSS 代码，你可以将输出重定向到一个文件：
$ lessc styles.less > styles.css

这种方式很麻烦，每改变一次就要执行一下命令。
编译软件

使用方法网址：https://www.cnblogs.com/mrhgw/p/4535429.html
在线编译工具

变量

我们常常在 CSS 中 看到同一个值重复多次，这样难易于代码维护。
理想状态，应是下面这样：

const bgColor="skyblue";
$(".post-content").css("background-color",bgColor);
$("#wrap").css("background-color",bgColor);
$(".arctive").css("background-color",bgColor);

只要我们修改 bgColor这一个变量， 整个页面的背景颜色都会随之改变。
而 Less 中的变量十分强大，可化万物，需要注意的是，其变量是常量 ，所以只能定义一次，不能重复使用。
值变量

/* Less */
@color: #999;
@bgColor: skyblue;//不要添加引号
@width: 50%;
#wrap {
color: @color;
width: @width;
}
/* 生成后的 CSS */
#wrap {
color: #999;
width: 50%;
}

以 @ 开头 定义变量，并且使用时 直接 键入 @名称。
在平时工作中，我们就可以把 常用的变量 封装到一个文件中，这样利于代码组织维护。

@lightPrimaryColor: #c5cae9;
@textPrimaryColor: #fff;
@accentColor: rgb(99, 137, 185);
@primaryTextColor: #646464;
@secondaryTextColor: #000;
@dividerColor: #b6b6b6;
@borderColor: #dadada;

选择器变量
让 选择器 变成 动态

     /* Less */
@mySelector: #wrap;
@Wrap: wrap;
@{mySelector}{ //变量名 必须使用大括号包裹
color: #999;
width: 50%;
}
.@{Wrap}{
color:#ccc;
}
#@{Wrap}{
color:#666;
}
/* 生成的 CSS */
#wrap{
color: #999;
width: 50%;
}
.wrap{
color:#ccc;
}
#wrap{
color:#666;
}

属性变量
可减少代码书写量

     /* Less */
@borderStyle: border-style;
@Soild:solid;
#wrap{
@{borderStyle}: @Soild;//变量名 必须使用大括号包裹
}
/* 生成的 CSS */
#wrap{
border-style:solid;
}  

url 变量
项目结构改变时，修改其变量即可。

     /* Less */
@images: "../img";//需要加引号
body {
background: url("@{images}/dog.png");//变量名 必须使用大括号包裹
}
/* 生成的 CSS */
body {
background: url("../img/dog.png");
}

声明变量
有点类似于 下面的 混合方法
- 结构: @name: { 属性: 值 ;};
- 使用：@name();

     /* Less */
@background: {background:red;}; 
#main{
@background();
}
@Rules:{
width: 200px;
height: 200px;
border: solid 1px red;
}; 
#con{
@Rules();
}
/* 生成的 CSS */ 
#main{
background:red;
} 
#con{
width: 200px;
height: 200px;
border: solid 1px red;
}

变量运算
不得不提的是，Less 的变量运算完全超出我们的期望，十分强大。

• 加减法时 以第一个数据的单位为基准
• 乘除法时 注意单位一定要统一

     /* Less */
@width:300px;
@color:#222; 
#wrap{
width:@width-20;
height:@width-20*5;
margin:(@width-20)*5;
color:@color*2;
background-color:@color + #111;
}
/* 生成的 CSS */
#wrap{
width:280px;
height:200px;
margin:1400px;
color:#444;
background-color:#333;
}

**变量作用域**

一句话理解就是：就近原则。

 /* Less */
@var: @a;
@a: 100%;
#wrap {
width: @var;
@a: 9%;
}
/* 生成的 CSS */
#wrap {
width: 9%;
}

嵌套

& 的妙用

& ：代表的上一层选择器的名字，此例便是header。

     /* Less */
#header{
&:after{
content:"Less is more!";
}
.title{
font-weight:bold;
}
&_content{//理解方式：直接把 & 替换成 #header
margin:20px;
}
}

/* 生成的 CSS */
#header::after{
content:"Less is more!";
}
#header .title{ //嵌套了
font-weight:bold;
}
#header_content{//没有嵌套！
margin:20px;
}

important指令
less里面使用import将外部的less引入到本地less文件里面来。比如A.less里面定义了一个变量@aaa:red，而B.less文件里面也需要使用@aaa这个变量，这个时候怎么办呢？import派上用场了。

A.less内容如下：
@aaa:red;
B.less内容如下：
@import 'A.less';

div{
    color:@aaa;
}

然后再html页面引入B.less文件，编译最终可以得到如下结果

div{
    color:@aaa;
}