Less
变量：
变量语法：
使用方法就是在“@”后添加变量名称然后与比那里值使用“:”链接，如下：
@width: 100px;
{
wdith: @width;
}
变量的作用域：
1、如果对同一个变量定义两次的话，在当前作用域中最后一次定义的将被使用。
2、若定义在嵌套之中，那么这个变量就只能服务于这个嵌套之内的属性了。
3、变量没有顺序可言，只要页面里有，都会按照顺序加载
如下：
@color: red;
div {
color: @color;
span {
@color: blue;
color: @color;
@color: yellow;
}
@color: green;
}
//最终span的颜色是黄色 - @color: yellow;
字符串插值：
变量可以用像@{value}这样的结构，如下：
@value: "baidu"; //引号加不加都行
div {
background-image: url("http://www.@{value}.png");
}
选择器插值：
如果需要在选择器中使用Less变量，只需要通过使用和字符串插件一样的@{selector}即可
如下：
@div: div;
body @{div}{
background: aqua;
}
media query 作为变量
如果希望在media query 中使用Less变量，可以直接使用普通的变量方式。因为“~”后面的值是不被编译的，所以可以用做media query 的参数。
如下：
@singleQuery: ~"(max-width: 768px)";
div {
background: red;
}
@media screen and @singleQuery {
div {
background: blue;
}
}
用一个变量的变量
在定义变量值时使用其他变量
如下：
@color-red: red;
@color: color-red;
div {
color: @@color;
}
混合：
继承类名：
在Less中，混合可以将一个定义好的classA轻松的引入到另一个classB中，从简单的实现classB继承classA中的所有属性
如下：
#color {
color: red;
}
div {
#color;
width: 100px;
}
或者
.color {
color: red;
}
div {
.color;
width: 100px;
}
带参数的混合：
在Less中，还可以像函数一样定义一个带参的属性集合，然后在其他选择器中调用它
如下：
#width(@width) {
width: @width;
}
div {
#width(200px);
background: aqua;
}
或者
.width(@width) {
width: @width;
}
div {
.width(200px);
background: aqua;
}
隐藏属性继承：
你可以定义不带参数属性集合，如果你想隐藏这个属性集合，不让它暴露到CSS中去，但是你还想在其他的属性集合中引用，可以这样如下：
#color() {
background: red;
}
.width() {
width: 100px;
}
div {
#color();
.width();
height: 100px;
}
默认值混合：
我们还可以像这样给参数设置默认值。有了默认值，我们可以不用设置属性也能被调用
#color(@color: red) {
background: @color;
}
.width(@width: 100px) {
width: @width;
}
div {
#color();
.width();
height: 100px;
}
多参数混合：
多个参数可以使用分好或者逗号分隔，这里推荐使用分号分隔，因为逗号有两重含义：它既可以表示混合的参数，也可以表示一个参数中一组值的分割符。
如下：
#style(@color: red; @width: 100px) {
background: @color;
}
div {
#style();
height: 100px;
}
!important 关键字
在CSS编写的时候经常会碰到在属性值后面添加!important的时候。而在Less中为了能方便，就设置了!important 关键字混合方法，调用时在混合后面加上!important关键字。
如下：
#color {
background: red;
color: yellow;
}
.width() {
width: 100px;
}
div {
#color() !important;
.width() !important;
height: 100px;
}
运算符判断：
运算符包括：> >= = =< = 100px) {
width: 100px;
}
.width(@width) when ((@width) < 100px) {
width: @width;
}
div {
background: blue;
height: 300px;
.width(50px);
}
多个条件：
多个条件直接可以用 and 逗号 not分割：
and表示并且
逗号表示或者
not表示取反
如下：
.width(@width) when ((@width) > 200px) {
width: 300px;
background: yellow;
}
.width(@width) when ((@width) >= 100px)and((@width) < 200px) {
width: 150px;
background: red;
}
.width(@width) when ((@width) < 100px) {
width: @width;
}
div {
background: blue;
height: 300px;
.width(400px);
}
嵌套语法：
Less是一种动态语言，属于CSS预处理语言的一种。Less与其他预处理语言一样也支持嵌套的写法。
如下：
body {
background: blue;
width: 100px;
height: 100px;
div {
background: red;
span {
background: yellow;
}
}
}
&的用法：
&符号的使用：如果你想写串联选择器，而不是后代选择器，就可以用到&。这点对伪类尤其是有用如：:hover 或者 :focus 等等。
如下：
div {
background: red;
width: 100px;
height: 100px;
&:hover {
background: blue;
}
& ~ & {
color: green;
}
}
Less的循环：
示例代码：
.loop(@count, @i: 1) when (@i < @count) {
&:nth-of-type(@{i}) {
@width: 100px * @i;
width: @width;
}
.loop(@count, @i + 1);
}
div {
background: aqua;
height: 50px;
.loop(6);
}
Sass
变量
变量语法：
Sass使用$符合来标识变量（老版本的Sass使用!来标识变量）
如下：
$width: 100px;
div {
height: 50px;
width: $width;
background: aqua;
}
嵌套语法：
CSS中重复写选择器是非常恼人的。如果要写一大串指向页面中同一块的样式时，往往需要一遍又一遍的写同一个ID。像这种情况，Sass可以让你只写一遍，且使样式可读性更高。
如下：
body {
background: aqua;
div {
background: red;
span {
background: yellow;
}
}
}
父选择器的标识符&：
最常见的一种情况是当你为链接之类的元素写:hover 这种伪类时，你并不希望以后带选择器的方式连接。
那么就可以这样：
div {
background: red;
width: 100px;
height: 100px;
&:hover {
background: yellow;
}
}
群组选择器的嵌套：
在CSS里面，假如需要选择多个标签，并设置样式比如：
div h1, div h2, div h3 {
color: red;
}
这个时候就会发现，会有重复性的工作，CSS的写法会让你在群组选择器中的每一个选择器前都要重复一遍容器的选择器。
非常幸运，Sass的嵌套特性在这种场景下也是非常有用的。
如下：
div {
h1, h2, h3 {
color: red;
}
}
导入Sass文件：
CSS有一个特别不常用的特性，即@import;规则，它允许在一个CSS文件中导入其他的CSS文件。然后，后果是只有执行到@import;时，浏览器才会去下载其他的CSS文件，这导致页面加载起来特别慢。
Sass也有@import;，但不同的是，Sass的@import;规则在生成CSS文件时就把相关文件导入进来，这意味着所有相关文件的样式被归纳到了同一个CSS文件中，而无需发起额外的下载请求。
如下：
/* 文件一 */
{
$width: 200px;
}
/* 文件二 */
@import "文件一.scss";
div {
width: $width;
height: 100px;
background: red;
}
变量的默认值：
使用Sass的!default标签可以实现这个目的。它很像CSS属性中的!important标签的对立面，不同的是!default用于变量，含义是：如果这个变量被声明赋值了，那就用它声明的值吗否则就用这个默认值。
如下：
$width: 100px !default;
div {
$width: 200px;
width: $width;
height: 200px;
background: aqua;
}
混合器
混合器的基础使用：
混合器使用@mixin;识标符定义。
使用方式如下：
@mixin style{
background: aqua;
width: 100px;
}
div {
@include style;
height: 100px;
}
给混合器传参：
混合器并不一定总得生成相同的样式。可以通过在@include;混合器时给混合器传参，来定制混合器生成的精确样式。
如下：
@mixin style($color, $width) {
background: $color;
width: $width;
}
div {
@include style(aqua, 100px);
height: 100px;
}
参数默认值：
为了在@include;混合器时不必传入所有的参数，我们可以给参数指定一个默认值。
如下：
@mixin style($color: aqua, $width: 200px) {
background: $color;
width: $width;
}
div {
@include style();
height: 100px;
}
继承
Sass继承语法：
使用Sass的时候，最后一个减少重复的主要特性就是选择器继承。
这个通过@extend;语法实现，如下代码：
.style {
background: red;
width: 300px;
}
div {
@extend .style;
height: 100px;
}
继承带%的东西
有时候你想继承一个类名，但是并不想再在HTML中使用，就单单想写一个能够继承的类名，这时我们可以用占位符来写一些继承的样式。
比如下面代码：
%style {
background: red;
width: 300px;
}
div {
@extend %style;
height: 100px;
}
Sass高级用法
条件语句：
@if;可以用来判断：
比如：
@mixin style($color) {
@if($color == red) {
background: red;
width: 100px;
}
@else if ($color == yellow) {
background: yellow;
width: 200px;
}
@else {
background: $color;
width: 300px;
}
}
div {
@include style(yellow);
height: 100px;
}
循环语句：
Sass支持for循环，代码如下：
div {
height: 50px;
background: aqua;
@for $i from 1 to 5 {
&:nth-of-type(#{$i}) {
width: $i * 100px;
}
}
}
也支持while循环：
div {
height: 50px;
background: aqua;
$i: 5;
@while $i > 0 {
&:nth-of-type(#{$i}) {
width: $i * 100px;
}
$i: $i - 1;
}
}
```