sass常用说明

// create on 7.30.2018

/*
    SASS提供四个编译风格的选项：

　　* nested：     嵌套缩进的css代码，它是默认值。

　　* expanded：   没有缩进的、扩展的css代码。

　　* compact：    简洁格式的css代码。(一行)

　　* compressed： 压缩后的css代码。


    
    命令行：
    sass --style compressed sign.scss sign.css

*/


/* 三、基本用法 */
/* 3.1 变量 */

    /* sass允许使用变量，所有变量以$开头 */
    $color : red;
    $fontSize : 14px;

    body {
      font-size : $fontSize*2;
      color : $color;

      div {
        font-size : $color;
        background : $color;
        input {
          font-size : $fontSize;
          color : $color;
        }
      }
    }

    body, input, button {
      font-family : Arial, "Microsoft YaHei", sans-serif;
    }






    $axax : 16px;
    $side : left;
    $var : 100px;
    $main_color : #f60;

    /* 如果变量需要镶嵌在字符串之中，就必须需要写在 # {}之中 */

    body {
      font-size : $axax;

      color : blue;
      border : 1px solid currentColor;
      border-top : 1em;

      div {
        color : inherit;
        border-top : 1em;

        input {
          border-#{$side} : $axax;
        }

        .main {
          right : $var*0.1;     /* 3.2 计算功能 */

          width : (28px/2);
          height : 50px+30px;

          div {
            border : 1px solid $main_color;
            border : {
              color : red;      /* 3.3 嵌套： 1.选择器嵌套，2.属性嵌套  例：border-color */
            };

            a {
              &:hover {         /* 在嵌套的代码块内，可以使用&引用父元素。 如：a:hover伪类 */
                font-size : 14px;

                background : $main_color;
              }
            }
          }
        }
      }
    }


/* 3.4 注释 */

/* file creat by Threeki        这种注释 compressed(压缩)编译后 被移除，普通编译方式仍然保留 */
/*! in 7.28.2018                !重要注释  不管何种编译方式，都会被保留 */
// 这是注释测试                  这种注释方式  仅保留在sass文件中



/* 四、代码的重用 */
/* 4.1 继承 */
    /* sass允许一个选择器，继承另一个选择器 */
    .class1{
        border: 1px solid #ddd;
    }
    /* 现在class2要继承class1，就要使用 @extend命令 */
    .class2{
        @extend .class1;
        font-size: 120%;
    }



/* 4.2 自动添加前缀的 @mixin指令 */
@mixin prefixer( $property, $value, $prefixes : webkit moz o ms) {
  #{$property} : $value;
  @each $prefix in $prefixes {
    @if $prefix == webkit {
      -webkit-#{$property} : #{$value};
    }
    @else if $prefix == moz {
      -moz-#{$property} : #{$value};
    }
    @else if $prefix == o {
      -o-#{$property} : #{$value};
    }
    @else if $prefix == ms {
      -ms-#{$property} : #{$value};
    }
  }
}


//  首先遍历参数 $prefixes ，依次输出参数里面包含的前缀名，接着使用插值语句 # {}输出包含浏览器前缀的属性名加属性值，
//  这就输出了一个完整的包含浏览器前缀的样式了，最后输出不带前缀的标准写法。 
//  值得注意的是，在 @mixin 指令中给参数 $prefixes设置了默认值 “ webkit moz ”，这样，当我们没有输入第三个参数的时候，
//  就默认输出输出webkit前缀，moz前缀和不带前缀的标准的写法。

// 主要的需要添加浏览器引擎前缀的属性
// 过渡属性(transition-property, transition-duration, transition-timing-function, transition-delay)
// 动画属性 (animation-name, animation-duration, animation-timing-function, animation-delay)
// border-radius
// box-shadow
// backface-visibility
// column属性
// flex属性
// perspective属性
// 当然这只是部分而已，还有其他一些CSS3属性需要加浏览器前缀。


/* 使用 @include命令，调用这个mixin */
#main {
  @include prefixer(border-radius, 10px);
}


#idid {
  font-size : 23px;

  color : red;
  border : currentColor;
  background : red;

  @include prefixer( display, flex);
}

/*
      命令行:
      // watch a file

      sass --watch input.scss:output.css

      // watch a directory

      sass --watch input-dir:output-dir
*/



/* 4.3 颜色函数 */
/* sass提供了一些内置的颜色函数，以便生成系列颜色 */
p{
    color: lighten(#cc3, 10%); // #d6d65c
    color: darken(#cc3, 10%);  // #a3a329
    color: grayscale(#cc3);    // #808080
    color: complement(#cc3);   // #33c
}



/* 4.4 插入文件 */
/* @import命令，用来插入外部文件 */

// @import "path/filename.scss";
@import "foo.css";





/* 五、高级语法 */

/* 5.1 条件语句 */
    p{
        @if 1 + 1 == 2 { border: 1px solid;}
        @if 5 < 3 { border: 2px dotted;}
    }

    @if lightness($color) > 30% {
        .P{background-color: #000};
    } @else {
        .P{background-color: #fff};
    }




/* 5.2 循环语句 */

    /* for循环 */
    @for $i from 1 to 10 {
        .border-#{$i} {
            border: #{$i}px solid blue;
        }
    }

    /* while循环 */
    $i: 6;
    @while $i > 0{
        .item-#{$i} { width: 2rem * $i }
        $i: $i - 2;
    }

    /* each命令  作用与for类似 */
    @each $member in a,b,c,d {
        .#{$member} {
            background-image: url("/image/#{menber}.jpg");
        }
    }



/* 5.3 自定义函数 */
    
    @function double($n){
        @return $n * 2;
    }

    #sidebar {
        width: double(5px);
    }






// 教程来源：http://www.ruanyifeng.com/blog/2012/06/sass.html