一些sass

标签：

# sass #
---
sass
---
定义变量：
--
    $变量名：  ；

    默认变量
    sass的默认变量仅需要在值后面加上!default即可。
list
--
list数据可通过空格，逗号或小括号分隔多个值，可用nth($var,$index)取值

map
--
map数据以key和value成对出现，其中value又可以是list。格式为：$map: (key1: value1, key2: value2, key3: value3);。可通过map-get($map,$key)取值

    $headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
    @each $header, $size in $headings {
          #{$header} {
                font-size: $size;
          }
    }

    //css style
    //-------------------------------
    h1 {
      font-size: 2em;
    }
    h2 {
      font-size: 1.5em;
    }
    h3 {
      font-size: 1.2em;
    }

选择器嵌套
----
所谓选择器嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而增强了sass文件的结构性和可读性。
在选择器嵌套中，可以使用&表示父元素选择器

    #top_nav{
      line-height: 40px;
      text-transform: capitalize;
      background-color:#333;
      li{
        float:left;
      }
      a{
        display: block;
        padding: 0 10px;
        color: #fff;
    
        &:hover{
          color:#ddd;
        }
      }
    }

属性嵌套
--
所谓属性嵌套指的是有些属性拥有同一个开始单词，如border-width，border-color都是以border开头。拿个实例看下：

    .fakeshadow {
      border: {
        style: solid;
        left: {
          width: 4px;
          color: #888;
        }
        right: {
          width: 2px;
          color: #ccc;
        }
      }
    }
    //-------------------------------
    .fakeshadow {
      border-style: solid;
      border-left-width: 4px;
      border-left-color: #888;
      border-right-width: 2px;
      border-right-color: #ccc;
    }

---
混合
---
 要定义在调用之前

    //无参数  继承
    @mixin center-block {
        margin-left:auto;
        margin-right:auto;
    }
    .demo{
        @include center-block;
    }

    //有参数
    @mixin opacity($opacity:50) {
      opacity: $opacity / 100;
      filter: alpha(opacity=$opacity);
    }
    
    //多个参数
    @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);
    }
    .imgtext-h--product li{
        @include horizontal-line($padding:15px);
    }

一些sass

标签：

原文地址：http://www.cnblogs.com/yyan/p/4842786.html