CSS的扩展less和sass

less和sass的目的是为了更加简化css，但是还是需要css来为网页添加样式！

less

变量

    @color1: #5B83AD;

    @color2:  @color1-#333;

     div{

     color: @color2;
    }

带参数混合

    .border-radius (@radius) {

      border-radius: @radius;
     -moz-border-radius: @radius;
     -webkit-border-radius: @radius;

      }

    div{
     .border-radius(4px);
     }

这样的好处在于，之前要重复写很多代码的元素，现在只要进行调用
   .border-radius (@radius) 就可以了，避免了重复写兼容性的问题。

多参数混合

多个参数可以使用分号或者逗号分隔，推荐使用分号分隔，因为逗号有两重含义：它既可以表示混合的参数，也可以表示一个参数中一组值的分隔符。

       .wrap (@w;@h) {

        white:@w;
        hight:@h;

      }

       div{
          .wrap(100px;100px);
      }

sass有两种后缀名文件：

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

建议使用：scss.

$fontSize: 12px;

body{

font-size:$fontSize;

}

混合（mixin）

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

    @include opacity(80px,60px);

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

less里面:

.fontSize: 12px;

body{

fontSize: 14px;

font-size:.fontSize; }

会显示：

body{

fontSize: 14px;

}

fontSize: 12px;

}

sass里面：

$fontSize: 12px;

body{

$fontSize: 14px;

font-size:$fontSize; }

会显示：

body{

fontSize: 14px;

}

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,和它的宽度。

CSS的扩展less和sass

相关推荐