CSS扩展技术有两种：
1：LESS
2：SCSS/SASS
less作为CSS的一种扩展，LESSCSS不仅向下兼容CSS的语法，而且连新增的特性也是使用CSS的语法。这样的设计使得学习LESS很轻松，而且你可以在任何时候回退到CSS。
申明变量的方法：
@width：100px;
@backgroundColor:blue;
其变量是“按需加载”（lazy loaded）的，因此不必强制在使用之前声明。
在 LESS 中可以定义一些通用的属性集为一个 class，然后在另一个 class 中去调用这些属性:
.div{
width:100px;
height:100px;
border:1px solid red;
}
还可以像函数一样定义一个带参数的属性集合:
.div(@w,@h){
width:@w;
height:@h;
}
sass有两种后缀名文件：一种后缀名为sass，不使用大括号和分号；另一种就是和我们平时写的css文件格式差不多，使用大括号和分号。建议使用后缀名为scss的文件，以避免sass后缀名的严格格式要求报错。
//文件后缀名为sass的语法
body
background: #eee
font-size:12px
p
background: #0982c1
//文件后缀名为scss的语法
body {
background: #eee;
font-size:12px;
}
p{
background: #0982c1;
}
sass的变量必须是$开头，后面紧跟变量名，而变量值和变量名之间就需要使用冒号(:)分隔开（就像CSS属性设置一样），如果值后面加上!default则表示默认值。
一般定义的变量都为属性值，可直接使用，但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用。
$borderDirection: top !default;
$baseFontSize: 12px !default;
$baseLineHeight: 1.5 !default;
.border-#{$borderDirection}
{
border-#{$borderDirection}:1px solid #ccc;
}
body{
font:#{$baseFontSize}/#{$baseLineHeight};
}
多值变量分为list类型和map类型，简单来说list类型有点像js中的数组，而map类型有点像js中的对象。
ist数据可通过空格，逗号或小括号分隔多个值，可用nth($var,$index)取值。
$linkColor: #08c #333 !default;
a{
color:nth($linkColor,1);
&:hover{
color:nth($linkColor,2);
}
}
map数据以key和value成对出现，其中value又可以是list。
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
#{$header} {
font-size: $size;
}
}