SASS

标签：

SASS

sass有两种后缀名文件：


一种后缀名为sass，不使用大括号和分号；


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

建议使用：scss



sass的导入

  导入文件需要加后缀名。css
  如果不加后缀名，sass会默认为sass文件




选择器嵌套

    #top_nav{
       line-height: 40px;
         text-transform: capitalize;
         background-color:#333;
      li{
           float:left;
         }

       }


sass的变量必须是$开头，后面紧跟变量名，而变量值和变量名之间就需要使用冒号(:)分隔开.


在变量值后面加上!global即为全局变量。

全局变量
        
  文件的所有函数都可以用

局部变量

   只能在申明的函数里面可以用，外部不能使用




less是按需求加载（顺序没有关系）


scss是从上往下执行（必须定义在引用的上面）
  


less
  局部变量，只能在局部内能够使用，不影响全局变量。



scss
   局部变量，在全局也能使用。并影响定义全局的变量。


    $fontSize: 12px;

    body{
    $fontSize: 14px;        
    font-size:$fontSize;
     }

    p{
    font-size:$fontSize;
    }

在选择器中声明的变量会覆盖外面全局声明的变量。

     body{
    font-size:14px;
     }

    p{
    font-size:14px;
      }


会根据局部变量定义的大小，影响到全局的变量



混合（mixin）

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


    @include opacity(80px,60px); 
  

声明的@mixin通过@include来调用。


@if判断

    .ib{
      width:200px;
      
       }

    @if $id== 100px {
     color: blue;
     }  @else {
    color: black;
    }
    }

判断的结果：

     .ib{
        width:200px;
        color: black;
      
       }
  

三目判断

语法为：if($condition, $if_true, $if_false) 。

三个参数分别表示：条件，条件为真的值，条件为假的值。

    if(true, 1px, 2px) => 1px


循环

$i表示变量，
start表示起始值，
end表示结束值，
这两个的区别是关键字through表示包括end这个数，
而to则不包括end这个数。

    @for $i from 1 through 3 {
      .item-#{$i} { width: 2em * $i; }
     }

结果：
     .item-1 {
       width: 2em; 
    }
      .item-2 {
         width: 4em; 
     }
        .item-3 {
         width: 6em; 
    }

SASS

标签：

原文地址：http://www.cnblogs.com/bellow/p/4663117.html