CSS预处理框架：less，scss

CSS预处理器：less和sass：CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性，无需考虑浏览器的兼容性问题，例如你可以在 CSS 中使用 变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让你的 CSS 更 见简洁，适应性更强，代码更直观等诸多好处。

less框架的应用：
less一门标记性语言，HTML文件还是链接生成的css文件
注释：
单行注释：//编译后不会出现在同名的css文件中
多行注释：/* */编译后会出现在同名的css文件中

1.新建less文件
2.在编辑器中编译，会看见自动生成一个同名的css文件

变量：
less文件中
@border—color（@变量名）:white（变量值）
table（选择器）{
border（属性）:1px solid @border-color
}

less中的变量和其他编程语言一样，可以实现值的复用，而且也有生命周期，也就是变量范围，简单讲就是局部变量还是 全局变量的概念，查找变量的顺序是先在局部定义中找，如果找不到，则查找上级定义，直至全局。

Mixins(混入)
它是多重继承的一种实现，在less中，混入是指在一个class中引入另外一个已经定义的class，就像在当前class中增加 一个属性一样。文本样式会被继承

.border{border:solid 5px black} //声明一个样式
.box{100px;height:100px;.border}

 Sass框架的应用：

Sass,是以.sass为扩展名，语法是缩进式，没有分号，大括号，不方便使用，之后改良为Scss
Scss是Sass以.scss为扩展名，是Sass的改进：
Scss语法：
变量：
用$+变量名
编译后会出现一个map结尾的文件，没用，同时生成一个同名的css文件，HTML中同样链接css文件默认变量和普通变量：默认后在值的后面有！default

混合宏：当单独的属性需要统一处理，
@mixin是用来声明混合宏的关键字，@include调用混合宏@mixin 变量名{}

@include 变量名
带参就在变量名后面加（）
@extend 关键词用来继承已存在的类样式快
%placeholder占位符，当调用的时候才在css文件中出现，不调用时在css中不会出现 声明：%变量名{。。。}，而基类 .
变量名{}一旦编译，一直都存在css文件中

 

总结：

什么时候该用混合宏@mixin、什么时候该用继承@extend、什么时候该用占位符%呢？

混合宏的使用：它不会自动合并相同的样式代码，如果在样式文件中调用同一个混合宏，会产生多个对应的样式代码，造成代码的冗余。不过他并不是一无事处，他可以传参数。如果你的代码块中涉及到变量，建议使用混合宏来创建相同的代码块。
继承：使用继承后，编译出来的 CSS 会将使用继承的代码块合并到一起，通过组合选择器的方式展现，这样编译出来的代码相对于混合宏来说要干净易读。但是它不能传变量参数。如果你的代码块不需要传任何变量参数，而且有一个基类已在文件中存在，那么建议使用继承。

 

less:
//单行注释，你猜我会不会被编译
/*多行注释，你猜我会不会被编译*/
@yhColor:green;
@yhWidth:100px;
@yhHeight:200px;
.yhRad{
border-radius: 10px;
}
//括号里叫做参数
.yhRad2(@canshu){
border-radius: @canshu;
}

 

.p1,.p2,.p3,.p4{
color: @yhColor;
}
.box1{
@yhWidth;
height: @yhWidth;
//.yhRad;
.yhRad2(10px);
background: @yhColor;
}

//嵌套写法，嵌套规则与HTML相同

// &代表上一层选择器
a {
color: red;
text-decoration: none;
&:hover {
color: black;
text-decoration: underline;
}
}

.box2{
@yhHeight + 50;
height: @yhHeight;
background: red;
}

 

 

-------------------------------------------------------

 

 

scss:
$yhColor:red;
@mixin yhBr{
border-radius: 10px;
}
@mixin yhBr2($wanwan){
border-radius: $wanwan;
}
.moren{
outline: none;
padding: 5px 10px;
}
%beitai{
font-family: "Microsoft Yahei";
}

 

.p1{
color: $yhColor;
}
.box1{
border:{
top:2px solid #ccc;
right: 2px dashed #58a;
bottom: 6px double #faa;
left: 2px dotted pink;
}
}
.box2{
200px;
height: 200px;
@include yhBr;
}
.box3{
100px;
height: 100px;
@include yhBr2(50%);
}
.btn1{
@extend .moren;
background: #fff;
color: #000;
}
.btn2{
@extend .moren;
font-size: 30px;
@extend %beitai;
}