CSS 扩展技术

　　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;

　　　　 }

　　 }