sass笔记

@import "test1.scss";
$bg:$test2;
$arr:black,
red,
green,
greenyellow,
blue;
$arr1:14,
16,
18,
20,
22;
/*
* 数字，字符串，颜色，布尔型，空值:null，数组，对象
* 输出格式 :nested 嵌套格式  :expanded css原生格式 :compact 各种类名一行格式 :compressed 压缩格式
* &: 继承外嵌套层级 
* ${}: 插值语句 把变量改为字符串
* @for 循环指定次数 @each 循环变量
* @for 只能循环整数到整数 不能循环变量数组  @for $var form 1 through 3 {循环体}
* @each:  循环和js for key in data 类似  其中key 代表数组中得某一项并不是索引  
* @each: 获取索引需要使用$index() 参数1:遍历对象 参数2:当前遍历项 反查索引
* @mixin: 复用代码片段  @minin中声明得代码 可以调用在任意 sass代码片段中 使用@include + @mixin名称 调用
* @function{@return }自定义函数
* @import
* @extend 继承 「当一个类名中继承了另一个代码块,其他地方改变继承属性时，会影响此类名」
* @extend 在@media 中使用@extend时不能继承 @media 意外得代码块
* @例子： 正确写法
    @media screen  text {
        .test {
            width:200px
        }
        .test1 {
            @extend .test
        }
    }
* @例子：错误写法 
        .test {
            width:200px
        }
     @media screen  text {
        .test1 {
            @extend .test
        }
    }
*/
@mixin text ($selector, $bool) {
    @if $bool {
        .box {
            #{$selector}:last-child {
                color: nth($arr, 5);
            }
        }
    }

    @else {
        .box {
            #{$selector}:last-child {
                color: nth($arr, 1);
            }
        }
    }
}

.box {
    width: 200px + 200px;

    @media screen and (orientation: landscape) {
        width: 200px;
    }

    height          : 200px;
    background-color: $bg;

    @each $key in $arr {
        $index: index($arr, $key);

        li:nth-child(#{$index}) {
            color: $key;

            &:hover {
                color: lightseagreen;
            }
        }
    }
}

@include text('li', false);

//@extend 测试
.hoverBoxBase {
    width      : 200px;
    height     : 200px;
    font-size  : 28px;
    font-weight: 300;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    text-align : center;
    line-height: 200px;
    margin     : 0 auto;
    color      : nth($arr, 1)
}

.hoverBox {
    @extend .hoverBoxBase;
    background-color: #ffcc11;

    &:hover {
        background-color: #11ccff;
        color           : nth($arr, 2)
    }

    .link {
        @extend .hoverBoxBase;

        .base {
            font-weight: 500;
        }
    }

}

.error {
    border          : 1px #f00;
    background-color: #fdd;

    .intrusion {
        background-image: url("/image/hacked.png");
    }
}



.seriousError {
    @extend .error;
    border-width: 3px;
}

.hoverlink {
    @extend a:hover;
}

a:hover {
    text-decoration: underline;
}

.comment a.user:hover {
    font-weight: bold;
}

.other a:hover {
    font-size: 100;
}

%a1 {
    font-size: 14px;
}

%a2 {
    font-size: 16px;
}

.ab {
    color: #ffcc11;
}

.cba {
    @extend .ab;
    @extend %a1
}

.cbb {
    @extend .ab;
    @extend %a2 !optional;
}

@function testfunction($var) {
    @return $var+1
}

@for $index from 1 through 4 {
    .cbc {
        font-size: #{$index + testfunction($index)}px;
    }
}