我们使用扩展技术编写代码时，需要先用编译器将我们的文件进行编译，编译后的文件才能够使用。
less技术相关语法
less相对来说比较简单，语法也较少：
变量的定义：
@w:20px;
变量的使用：
.p2{
width:@w
}
编译后的结果为：
.p2{
width:20px;
}
混合使用：
先定义：
.radius{
border-radius:10px;
}
引用：
.p1{
.radius
}
传参数：
.radius(@a){
border-radius:@a;
}
引用：
.p1{
.radius(10px);
}
伪类的定义：
.p1{
&:hovor
}
以上的&表示当前元素的父元素，上面的代码转译之后为：
.p1:hovor{ };
sass技术
sass的功能比less强大许多，语法也有些不同，sass的文件后缀名有.sass，也有.scss,现在多用.scss。
下面来看语法：
导入css文件：
@import "a.css"
导入scss文件：
@import "b"//不用写后缀名
变量的定义：
$color:blue !default;//default为设置的默认值，可允许修改
在元素中嵌入一个变量，需要用#{}将变量括起来
$direct:top;
.border-#{$direct}{ };
多值变量：
$num:1px 2px 3px 4px;
.p1{
padding:$num
}
margin:nth($num,1)//nth:根据下标序号获取数组中的值（1px）
$num1:1px 2px,3px 4px;
margin:nth($num1,2)//3px,4px
键值对：
$map:(a1:10px,a2:5px,a3:3px,a4:1px);
取值：
.p{
width：map-get($map,a1)
height:map-get($map,a2)
}
伪元素的定义：
.p2{
&:hovor{
}
}//&为此元素的父元素
div{
@at-root p{
color:red
}
}
p的执行结果：
div{};
p{
color:red
}
@at-root是表示跳出父元素
属性的嵌套：
.d2{
border:{
top:20px;
left:25px;
}
}
编译为：
.d2{
border-top:20px;
border-left:25px;
}
scss中，加了：会编译成（-）属性，不加：为选择器的嵌套
反选：
.child{
@at-root .p1 &{
}
}
译成：
.p1 .child{}
混合：
先定义：
@mixin whb{
width:200px;
height:100px;
}
引用：
div{
@include whb
}
混合，传参的定义：
@mixin whb($w,$h){
width:$w;
height:$h
}
调用：
div{
@include whb(20px,10px);
}
继承：
%h1{
font-size:12px;
}//%会将h1隐藏，不会显示在CSS代码中
应用：
p2{
@extend %h1
}
scss混合和继承
如果重用的代码里面没有参数，就用继承，有参数，用混合。