css的扩展技术

CSS的扩展技术 （在原来的CSS语言的基础上扩展了js，可以在里面写js ）

一、less

定义： @color:red; //定义颜色 @body-color:blue; @div-color:yellow;

引用：

body{ height:500px; border:1px solid @body-color; //调用了上面的颜色 }

嵌套：

div{ height:500px; border:1px solid @div-color;//这里就直接调用了上面的颜色 p{ color:@p-color; //div里面的p元素的样式 } }

传参：

border(@c){ 1px solid @c }

对border的调用：.border(red);

二、sass

sass有两种后缀名文件：

一种后缀名为sass，不使用大括号和分号；
另一种就是我们这里使用的scss文件，这种和我们平时写的css文件格式差不多，使用大括号和分号。

建议使用：scss.

$fontSize: 12px;

body{

font-size:$fontSize;

}

混合（mixin）

@mixin ($w,$h) {
      width:$w;
       height:$h;
    }

@include opacity(80px,60px);

在sass里面，需要注意的是：

less里面:

.fontSize: 12px;

body{

fontSize: 14px;

font-size:.fontSize; }

p{

font-size:.fontSize; }

会显示：

body{

fontSize: 14px;

}

p{

fontSize: 12px;

}

sass里面：

$fontSize: 12px;

body{

$fontSize: 14px;

font-size:$fontSize; }

p{

font-size:$fontSize; }

会显示：

body{

fontSize: 14px;

}

p{

fontSize: 14px;

}

多参数：

@mixin horizontal-line($border:1px dashed #ccc, $padding:10px)

{

border-bottom:$border;

padding-top:$padding;

padding-bottom:$padding; }

.imgtext-h li{

@include horizontal-line(1px solid #ccc);

}

只传一个值，那么调用@include horizontal-line时，会设置 padding-top和 padding-bottom的默认值，

如果@include horizontal-line没有写默认值，那么sass会报错，需要修改@include horizontal-line需要传递的值，或者在.imgtext-h li里面，添加一个值。

所以说，在sass局部定义是变量会影响全局的变量，p元素会根据div内部的定义字体大小的，来设置p元素的字体大小。

在选择器中声明的变量会覆盖外面全局声明的变量。(这也就人们常说的sass没有局部变量)

不仅这样，还能做if判断、for循环和三目运算。

@for $i from 1 through 3

{

.item-#{$i}{ width: 2em * $i; }

}

会显示：

.item-1 { width: 2em; }

.item-2 { width: 4em; }

.item-3 { width: 6em; }

from 1 through 3是表示从1开始到3结束，只需要修改值，就能实现你需要的几个.item-x,和它的宽度。

三、less和sass的区别

1.实现方式：Less是基于JavaScript，是在客户端进行处理的；Sass是基于Ruby，是在服务器端进行处理的。

2.定义变量：Less定义变量时使用前缀：@；Sass定义变量时使用前缀：$。

3.混合（Mixins）：Less中使用混合时，只需在classB中根据classA的命名来使用；Sass中首先在定义混合时需要使用@mixin命令，其次在调用时需要使用@include命令来引入之前定义的混合。

4.解析方式：Less可以向上/向下解析；Sass只能向上解析。

5.变量的作用域：Less中的变量有全局和局部之分；Sass可以变量可以理解为都是全局的，但可以通过在变量后面跟！default，在引入Sass文件之前改变变量的属性值来解决这一问题。

6.比起Less，Sass中增加了条件语句（if、if...else）和循环语句（for循环、while循环和each循环）还有自定义函数：