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{width: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{
width: @yhWidth;
height: @yhWidth;
//.yhRad;
.yhRad2(10px);
background: @yhColor;
}
//嵌套写法,嵌套规则与HTML相同
// &代表上一层选择器
a {
color: red;
text-decoration: none;
&:hover {
color: black;
text-decoration: underline;
}
}
.box2{
width: @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{
width: 200px;
height: 200px;
@include yhBr;
}
.box3{
width: 100px;
height: 100px;
@include yhBr2(50%);
}
.btn1{
@extend .moren;
background: #fff;
color: #000;
}
.btn2{
@extend .moren;
font-size: 30px;
@extend %beitai;
}