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