【sass】sass基础

            【ruby环境：安装/更新/卸载】

安装ruby：http://rubyinstaller.org/downloads
安装sass：gem install sass

取版本：sass -v
更新：gem update sass

卸载：gem uninstall sass



            【命令】

文件夹：sass style/scss/:style/build/ --style compressed ---wath

支持中文注释：C:\Ruby\lib\ruby\gems\1.9.1\gems\sass-3.3.14\lib\sass\engine.rb
    在末尾加: Encoding.default_external = Encoding.find('utf-8')

输出风格命令
    紧凑输出：--style compact, 单行
    压缩输出：--style compressed，最大压缩


            【关于变量与函数】

函数执行时，所有变量均以副本方式来操作并返回值，并非实例共享


            【sass基础】

变量声明与调用：
    $color: #333;
    $btn-bg: #ccc;
    $btn-bg: #e5e5e5 !default; //体现于组件化开发

    .btn { border: 1px solid $color; background: $btn-bg; }

    变量作用域类似js


选择器的嵌套/'&'的用法：
    nav {
        ul {}
        li {
            &:hover {}
            &::before,
            &::after {}
            a{}
            &.open a{}
        }
    }


复合属性的嵌套：
    border: {
        top: {
            color: #ccc;
            width: 1px;
        }
    }


混合宏
    @mixin border-radius { }
        @include border-radius;

    @mixin border-radius ($radius) { }
        @include border-radius(50%);

    @mixin border-radius ($radius:3px, $height:20px, $shadows...) { }
        @include border-radius;
        @include border-radius();
        @include border-radius(50%);
        @include border-radius(50%, 25px);
        @include border-radius(50%, 25px, 0 0 5px #ccc, 0 0 5px #fff inset);


扩展/继承（占位符%）
    a.btn { height: 30px; }
    .btn-big { @extend .btn; color: #ccc; }
        a.btn, a.btn-big { height: 30px; }
        .btn-big { color: #ccc; }

    %btn { height: 30px; }
    .btn-big { @extend %btn; color: #ccc; }
        .btn-big { height: 30px; }
        .btn-big { color: #ccc; }

    div%h { height: 30px; }
    .btn { @extend %h; }
    .btn-big { @extend %h; color: #ccc; }
        div.btn, div.btn-big { height: 30px; }
        .btn-big { color: #ccc; }


插值#{}  注释  数据类型
    选择器、属性名、属性值、@extend
        不可用于变量及混合宏

    /**/ 、 //

    数字(number)：10、10px、10em ...
    字符串(string)："http://xxx.com/xxx.jpg" 、 ".header" 、 无引号字符串
    颜色(color)：#ccc、red、rgba(0,0,0,.8) ...
    布尔值(bool)：true、false
    空值：null ...
    列表：0 0 5px #ccc | a, b, c, ...

sass运算
    + -：相同单位才能运算
    *：100px * 2
    /：(100px / 2) 、 50px + 100px/2  、 $height / 2 、 round(1.5)/2



            【控制命令】
if else：
    @if 条件 {} @else if 条件 {} @else {}
    判断符：!=  ==  >  <  >=  <=
    逻辑：or  and
for/while：
    @for $i from 1 through 3 {} //1~3
    @for $i from 1 to 3 {} //1~2

    $i: 4;
    @while $i > 0 { $i: $i - 1; }
each：
    $list: a b c;
    @each $item in $list {}



            【字符串与数字函数】
unquote("去除首尾引号")
quote(添加引号)
to-upper-case(aaa)   //AAA --- 转大写
to-lower-case(AAA)   //aaa --- 转小写

percentage(.2)   //20% --- 百分化，不可携带单位
round(12.3px)    //12px --- 四舍五入
ceil(12.1px)    //13px --- 向上取整
floor(12.9px)    //12px --- 向下取整
abs(-12.9px)    //12.9px --- 取绝对值
min(1, 2, 3)    //1 --- 找到最小值
max(1em, 2em)    //2em --- 找到最大值
random()    //取随机数



            【列表函数】
length($list)    //num --- 取列表长度
index($list, $item)    //num|false --- 取元素索引
nth($list, n)    //el --- 按索引取元素，n大于length时报错

join($list1, $list2, auto|space|comma)    //$newList --- 将两个列表合成一个列表
    join( (1 2), (3,4) )    //1 2 3 4
    join( (1,2), (3 4) )    //1,2,3,4
    join(1, (2 3) )    //1 2 3
    join(1, (2,3) )    //1,2,3
    join(1,2)    //1 2
append($list, $add, auto|space|comma) //$newList--- 将一个元素添加到列表
zip(1px 2px 3px, solid dashed dotted, #333 #666 #999) //--- 转成多维列表

type-of(el)    //number|string|bool|color --- 返回数据类型
unit(number)    //--- 取数值的单位
unitless(number)    //true|false--- 是否不带单位
comparable(number1, number2)    //true|false --- 是否可运算
if($condition, $if-true, $if-false)    //三元运算

//类似于JSON的map
$theme-color: (
    default: (
        bgcolor: #fff,
        text-color: #444,
        link-color: #39f
    ),
    style-1: (
        bgcolor: #f36,
        text-color: #fefefe,
        link-color: #d4e
    )
);
map-get($map, key)    //--- 取出，没有则返回null
map-has-key($map, key)    //true|false --- 判断$map中是否有指定key值
map-keys($map)    //--- 返回keys列表（逗号分隔）
map-values($map)    //--- 返回values列表（逗号分隔）
map-merge($map1, $map2)    //$newMap ---将$map1合并到$map2，与$.extend顺序相反
map-remove($map, key)    //删除指定key返回新map（不能删除map中的map）
keywords($args)    //--- 根据宏的参数动态创建map（自动去除参数中的$符号）
    @mixin map($args...){
        $map: keywords($args);
        //......
    }
    @include map(
      $color-1: #ccc,
      $color-2: #999
    );



            【颜色函数】
RGB
    rgba(#f00, 0.6)    //--- 将颜色转成rgba
    red(#f00)    //255 --- 取出R
    green(#f00)    //0 --- 取出G
    blue(#f00)    //0 --- 取出B
    mix($color-1, $color-2, 50%)    //颜色混合
HSL
    adjust-hue(-deg|-%)    //调整色相
    saturate(#ccc, 30%)    //增加饱和度
        desaturate(#f00, 80%)    //降低饱和度
    lighten(#000, 30%)    //提高明度
        darken(#fff, 30%)    //降低明度
    grayscale(#f00)    //转成无彩系，等同于desaturate(#f00, 100%)
opacity
    alpha($color) | opacity($color)    //--- 取出A
    fade-in($color, .2) | opacify($color, .2)    //--- 与原值进行加法运算
    fade-out($color, .2) | transparentize($color, .2)    //--- 与原值进行减法运算



            【@规则】
引入scss或sass
    @import "include/foo.scss|include/foo", "...", "...";
    @import "include/";
        不想被编译只想被导入，此时的命名方式：_foo.scss

@media
    冒泡：
        .sidebar {
            @media screen {
                width: 300px;
            }
            @media screen and (orientation: landscape) {
                width: 500px;
            }
        }
    嵌套
        @media screen {
            .sidebar {
                width: 300px;
                @media (orientation: landscape) {
                    width: 500px;
                }
            }
        }
    使用插值
        @media #{$media} and ($feature: $value) { }

@extend
    继承的位置点
        .header a.btn:hover i.red { }
        span { @extend i.red; }    //.header a.btn:hover span

        .header a.btn:hover %child { }
        span { @extend %child; }    //.header a.btn:hover span

@at-root    //--- 跳出所有嵌套
    .a {
        height: 20px;
        @at-root .d {
            height: 30px;
        }
    }

@debug 、 @warn 、 @error


            【总结】

1、变量、插值
2、选择器嵌套
3、混合宏、扩展/继承
5、条件判断、函数
6、透明色管理 --- rgba(#000, .2)
6、debug、warn、error