关于SASS

Sass是CSS预处理器定义了一种新的语言

sass的扩展名为 .sass 老版本 控制缩进不需要使用 {} 或 ;     // 类似jade

sass的扩展名为 .scss 新版本 与正常css写法相同

其它预处理:

    Sass（SCSS）
    LESS
    Stylus
    Turbine
    Swithch CSS
    CSS Cacheer
    DT CSS

变量声明

一、$ 声明变量

    1、作为值使用
        $color: '#ccc';
        .test{
            background-color: $color;        // 调用
        }

    2、作为属性名使用
        $side : left;
        .rounded {
            border-#{$side}-radius: 5px;    // 输出 border-left-radius: 5px
        }

二、!default 默认变量使用

    默认值在组件中很有作用

    $baseLineHeight: 2;
    $baseLineHeight: 1.5 !default;            // 在没有定义baseLineHeight值时，执行1.5的默认值
    body{
        line-height: $baseLineHeight;    // line-hgiht: 2;
    }

三、全局变量和局布变量

    // 全局变量定义
    $color: orange !default;        
    .block {
        color: $color;
    }

    // 局部变量定义
    em {
        $color: red;
        a {
            color: $color;
        }
    }

嵌套

一、选择器嵌套

    nav {
        a {
            color: red;

            header & {
                color:green;
            }
        }  
    }
    输出:
        nav a { color: red; }
        header nav a { color: green; }

    nav {
        a {
            color: red;

            header & {
                color:green;
            }
        }  
    }
    输出:
        .nav a { color: red }
        .header .nav a { color:green }


二、属性嵌套

    .box {
        border: {
            top: 1px solid red;
            bottom: 1px solid green;
        }
    }
    输出: .box {  border-top: 1px solid red; border-bottom: 1px solid green; }


三、伪类嵌套

    .clearfix{
        &:before,
        &:after {
            content:"";
            display: table;
        }
        &:after {
            clear:both;
            overflow: hidden;
        }
    }

    输出
    clearfix:before, .clearfix:after {
        content: "";
        display: table;
    }
    .clearfix:after {
        clear: both;
        overflow: hidden;
    }

混合宏和声明混合宏

宏相当将一些属性封装到一个宏中，类似函数可重复利用

一、使用“@mixin”声明一个混合宏

    @mixin border-radius {
        -webkit-border-radius: 5px;
        border-radius: 5px;
    }

    .text { 
        @include border-radius            /* 调用宏 */
    }


二、定义带参数的宏

    @mixin border-radius($radius:5px){        // 定义一个默认值为5px
        -webkit-border-radius: $radius;
        border-radius: $radius;
    }

    .text { 
        @include border-radius(10px)         // 调用
    }


带逻辑运算符

    @mixin box-shadow($shadow...) {
        @if length($shadow) >= 1 {
            @include prefixer(box-shadow, $shadow);
        } 
        @else{
            $shadow:0 0 4px rgba(0,0,0,.3);
            @include prefixer(box-shadow, $shadow);
        }
    }

扩展和继承

继承是可以直接继承一个class类下所有的属性,

@extend .className;

.btn {
    border: 1px solid #ccc;
    padding: 6px 10px;
    font-size: 14px;
}

.btn-primary {
    background-color: #f36;
    color: #fff;
    @extend .btn;
}

.btn-primary-2 {
    background-color: #f36;
    color: #fff;
    font-size: 16px;
    @extend .btn;
}


结果:
.btn, .btn-primary, .btn-primary-2 {
    border: 1px solid #ccc;
    padding: 6px 10px;
    font-size: 14px; 
}

.btn-primary {
    background-color: #f36;
    color: #fff; 
}

.btn-primary-2 {
    background-color: #f36;
    color: #fff;
    font-size: 16px; 
}

占位符

定义占位符 %名称 , 调用使用@extend

%mt5 {
    margin-top: 5px;
}
%pt5{
    padding-top: 5px;
}

.btn {
    @extend %mt5;
    @extend %pt5;
}
.block {
    @extend %mt5;

    span {
        @extend %pt5;
    }
}

结果
.btn, .block {
    margin-top: 5px; 
}
.btn, .block span {
    padding-top: 5px; 
}

插值#{}

可以将变量与属性结合

$properties: (margin, padding);
@mixin set-value($side, $value) {
    @each $prop in $properties {
        #{$prop}-#{$side}: $value;
    }
}
.login-box {
    @include set-value(top, 14px);
}

结果：
.login-box {
    margin-top: 14px;
    padding-top: 14px;
}

注释

// 不会被显示到代码中

/* */  显示到代码中

数据类型

1、数字: 如，1、 2、 13、 10px

2、字符串：有引号字符串或无引号字符串，如，"foo"、 'bar'、 baz

3、颜色：如，blue、 #04a3f9、 rgba(255,0,0,0.5)

4、布尔型：如，true、 false

5、空值：如，null

6、值列表：用空格或者逗号分开，如，1.5em 1em 0 2em 、 Helvetica, Arial, sans-serif

函数

一、字符串函数

    1、unquote(str): 删除字符串中的引号

    2、quote(str): 给字符添加引号

        .test1 {
            content:  unquote('Hello Sass!') ;        // 输出 content: Hello Sass
        }

        .test3 {
            content: quote(ImWebDesigner);        // 输出 content: 'ImWebDesigner';
        }

    3、to-upper-case(): 转大写

    4、to-lower-case(): 转小写


二、数字函数

    1、percentage($value)：将一个不带单位的数转换成百分比值；

        .footer{  width : percentage(5px / 10px)  }      // width: 50%

    2、round($value)：将数值四舍五入，转换成一个最接近的整数；

    3、ceil($value)：将大于自己的小数转换成下一位整数；

    4、floor($value)：将一个数去除他的小数部分；

    5、abs($value)：返回一个数的绝对值；

    6、min($numbers…)：找出几个数值之间的最小值；

    7、max($numbers…)：找出几个数值之间的最大值；

    8、random(): 获取随机数

三、列表函数

    1、nth函数（nth function） 可以直接访问值列表中的某一项；

    2、join函数（join function） 可以将多个值列表连结在一起；

    3、append函数（append function） 可以在值列表中添加值； 

    4、@each规则（@each rule） 则能够给值列表中的每个项目添加样式。

四、判断函数类型

    1、type-of($value)：返回一个值的类型

    2、unit($number)：返回一个值的单位

    3、unitless($number)：判断一个值是否带有单位

    4、comparable($number-1, $number-2)：判断两个值是否可以做加、减和合并

五、unitless(): 用来判断一个值是否带有单位，如果不带单位返回的值为 true，带单位返回的值为 false

    @mixin adjust-location($x, $y) {
        @if unitless($x) {    
            $x: 1px * $x;
        }
        @if unitless($y) {    
            $y: 1px * $y;
        }
        position: relative; 
        left: $x; 
        top: $y;
    }

    .botton{
        @include adjust-location(20px, 30);
    }

六、comparable(): 用来判断两个数是否可以进行“加，减”以及“合并”, 返回true/false

     comparable(2px,1rem)


七、三元函数: if(true,8em,20em);        // 第一个参数为


八、map 在Sass中，maps代表一种数据类型，可以包含若干键值对的对象类型

    创建一个map数据:

        $color: (
            default: #fff,
            primary: #222,
            negative: #333
        );        // 注意必须加 “;” 号 

        .box {
            color: map-get($color, default);
        }


    获取map数据的函数:

    1、map-get($map,$key)：根据给定的 key 值，返回 map 中相关的值。

    2、map-merge($map1,$map2)：将两个 map 合并成一个新的 map。

    3、map-remove($map,$key)：从 map 中删除一个 key，返回一个新 map。

    4、map-keys($map)：返回 map 中所有的 key。

    5、map-values($map)：返回 map 中所有的 value。

    6、map-has-key($map,$key)：根据给定的 key 值判断 map 是否有对应的 value 值，如果有返回 true，否则返回 false。

        @function colors($color){
            @if not map-has-key($social-colors,$color){
                @warn "No color found for `#{$color}` in $social-colors map. Property omitted.";
            }
            @return map-get($social-colors,$color);
        }

    7、keywords($args)：返回一个函数的参数，这个参数可以动态的设置 key 和 value。


九、REG

    rgb($red,$green,$blue)：根据红、绿、蓝三个值创建一个颜色；

    rgba($red,$green,$blue,$alpha)：根据红、绿、蓝和透明度值创建一个颜色；

    red($color)：从一个颜色中获取其中红色值；

    green($color)：从一个颜色中获取其中绿色值；

    blue($color)：从一个颜色中获取其中蓝色值；

    mix($color-1,$color-2,[$weight])：把两种颜色混合在一起。

Sass规则

一、@import: 用于引用scss或sass文件

二、@media: 媒体查询功能

    .sidebar {
        width: 300px;
        @media screen and (orientation: landscape) {
            width: 500px;
        }
    }

    输出:
    .sidebar {
        width: 300px; 
    }
    @media screen and (orientation: landscape) {
        .sidebar {
            width: 500px; 
        }
    }

自定义函数

SASS允许用户编写自己的函数。

// 定义函数

　　@function double($n) {
　　　　@return $n * 2;
　　}

// 调用函数

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

高级语句

一、条件语句

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


二、循环语句

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


　　$i: 6;
　　@while $i > 0 {
　　　　.item-#{$i} { width: 2em * $i; }
　　　　$i: $i - 2;
　　}


    $list: adam john wynn mason kuroir;        //$list 就是一个列表
    @mixin author-images {
        @each $author in $list {
            .photo-#{$author} {
                background: url("/images/avatars/#{$author}.png") no-repeat;
            }
        }
    }

运算

+、-、*、/

$container: 960px;
$sidebar-width: 220px;
$gap-width: 20px;
.content{
    width: $container - $sidebar-width;
    float: left;
}

结果:
.content {
    width: 740px;
    float: left; 
}

颜色计算
p {
    color: #010203 + #040506;
}

Sass的目录结构

| http://www.w3cplus.com/preprocessor/organize-that-sass.html # 组织Sass文件
| http://www.w3cplus.com/preprocessor/architecture-sass-project.html # SASS的目录结构
| http://www.w3cplus.com/blog/tags/302.html