灏天阁

Sass 高级

· Yin灏

导入多个scss文件

@import "./scss/lili", "./scss/haha"; //导入两个文件

extend 函数，不只继承类名选择器的样式，还继承与它相关的样式，包括继承它的父选择器

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

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

.test2 .test22 {
    background-image: url("/image/haha.png");
}

html .test2 {
    width: 100px;
}

.lili {
    @extend .test2;
    border-width: 3px;
}

/*
    .test2, .lili {
      border: 1px #f00;
      background-color: #fdd;
    }

    .test2.test21, .test21.lili {
      background-image: url("/image/hacked.png");
    }

    .test2 .test22, .lili .test22 {
      background-image: url("/image/haha.png");
    }

    html .test2, html .lili {
      width: 100px;
    }

    .lili {
      border-width: 3px;
    }
*/

a:hover {
    color: green;
}
a.class1:hover {
    height: 10px;
}
html a:hover {
    width: 10px;
}
.test3 {
    @extend a:hover;
    width: 20px;
}

/*
    a:hover, .test3 {
      color: green;
    }

    a.class1:hover, .class1.test3 {
      height: 10px;
    }

    html a:hover, html .test3 {
      width: 10px;
    }

    .test3 {
      width: 20px;
    }
*/

// @extend 中链式调用
.test4 {
    width: 20px;
}

.test41 {
    @extend .test4;
    height: 20px;
}

.test42 {
    @extend .test41;
    top: 20px;
}
/*
    .test4, .test41, .test42 {
      width: 20px;
    }

    .test41, .test42 {
      height: 20px;
    }

    .test42 {
      top: 20px;
    }
*/

占位符%，% 不会被编译到 css 里面

.test5 a%name {
    width: 100px;
}

.lili {
    height: 200%;
    @extend %name;
}
/*
   .test5 a.lili {
      width: 100px;
    }

    .lili {
      height: 200%;
    }
*/

extend 中防止继承不存在的样式出错，用 !optional 直接跳过空样式

.test6 {
    @extend noexist!optional;
    height: 100px;
}
/*
    .test6 {
      height: 100px;
    }
*/

@at-root 执行导致一个或多个规则被限定输出在文档的根层级上，而不是被嵌套在父选择器下

.test7 {
    height: 20px;
    @at-root {
        .children1 {
            color: red;
        }
        .children2 {
            color: black;
        }
    }
}
/*
    .test7 {
      height: 20px;
    }

    .children1 {
      color: red;
    }

    .children2 {
      color: black;
    }
*/

@at-root(without:类名)将选择器移动到嵌套指令之外

.gaga {
    @media name {
        .page {
            width: 8px;
            @at-root (without: media) { /* 此处目前不支持类名 */
                color: red;
            }
        }
    }
}
/*
    @media name {
      .gaga .page {
        width: 8px;
      }
    }

    .gaga .page {
      color: red;
    }
*/

if 条件判断，注意不支持 if…else…

.test8 {
    @if 1+1==2 {
        width: 20px;
    }
    @if 5 < 3 {
        width: 100px;
    }
}

.test81 {
    @if 1+1 !=2 {
        width: 20px;
    }
    @else if 5>3 {
        width: 100px;
    }
}

.test82 {
    @if 1+1 !=2 {
        width: 20px;
    }
    @else if 5 < 3 {
        width: 100px;
    }
    @else {
        width: 10px;
    }
}
/*
    .test8 {
      width: 20px;
    }

    .test81 {
      width: 100px;
    }

    .test82 {
      width: 10px;
    }
*/

for 循环语句

// 第一种格式 @for $var from <start> through <end> 注意范围包括 <start> 和 <end>
@for $i from 1 through 3 {
    .gray#{$i} {
        color: #333*$i
    }
}

// 第二种格式 @for $var from <start> to <end> 注意范围包括 <start> ，但不包括 <end>
@for $i from 1 to 4 {
    .gray2#{$i*3} {
        color: #333*$i
    }
}

/*
    .gray1 {
      color: #333333;
    }

    .gray2 {
      color: #666666;
    }

    .gray3 {
      color: #999999;
    }

    .gray23 {
      color: #333333;
    }

    .gray26 {
      color: #666666;
    }

    .gray29 {
      color: #999999;
    }
*/

each 循环语句，@each $var in <list or map>

$name: 'lili',
'yaya',
'sasa'; // 注意数组 list 的写法
@each $i in $name {
    test9.#{$i} {
        width: 10px;
    }
}

$name2:(name21: 'lili', name22: 'yaya', name23: 'sasa'); // 注意对象 map 的写法
@each $i in $name2 {
    test9.#{$i} {
        width: 10px;
    }
}

$name3:(name31:1, name32:2, name33: 3);  // 注意对象 map 的写法
@each $key,
$value in $name3 {
    test9.#{$key} {
        width: 10px * $value;
    }
}
/*
    test9.lili {
      width: 10px;
    }

    test9.yaya {
      width: 10px;
    }

    test9.sasa {
      width: 10px;
    }

    test9.name21 lili {
      width: 10px;
    }

    test9.name22 yaya {
      width: 10px;
    }

    test9.name23 sasa {
      width: 10px;
    }

    test9.name31 {
      width: 10px;
    }

    test9.name32 {
      width: 20px;
    }

    test9.name33 {
      width: 30px;
    }
*/

while 循环语句

$i: 3;
@while $i>0 {
    .gray#{$i} {
        color: #333*$i;
    }
    $i: $i - 1;
}
/*
    .gray3 {
      color: #999999;
    }

    .gray2 {
      color: #666666;
    }

    .gray1 {
      color: #333333;
    }
*/

混入指令，实现代码的复用

@mixin left01 {
    float: left;
}

.test10 {
    @include left01;
}

@mixin left02($left) {
    float: $left;
}

.test101 {
    @include left02(right);
}

@mixin left03($left, $width) {
    float: $left;
    .lili {
        width: $width;
    }
}

.test102 {
    @include left03(left, 100px);
}

// 参数为对象
@mixin left04($name31, $name32, $name33) {
    .lili {
        width: $name31;
        height: $name32;
        top: $name33;
    }
}

$map:(name31: '1px', name32: '2px', name33: '3px');
.test103 {
    @include left04($map...)
}

@mixin left05($left: right) {
    float: $left;
}

.test104 {
    @include left05;
}

// 不定参数，用 ...
@mixin box-shadow($shadows...) {
    -moz-box-shadow: $shadows;
    -webkit-box-shadow: $shadows;
    box-shadow: $shadows;
}

.shadow {
    @include box-shadow(0px 4px 5px #666, 2px 6px 10pxx #999);
}
/*
    .test10 {
      float: left;
    }

    .test101 {
      float: right;
    }

    .test102 {
      float: left;
    }

    .test102 .lili {
      width: 100px;
    }

    .test103 .lili {
      width: "1px";
      height: "2px";
      top: "3px";
    }

    .test104 {
      float: right;
    }

    .shadow {
      -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10pxx #999;
      box-shadow: 0px 4px 5px #666, 2px 6px 10pxx #999;
    }
*/

传递内容块 @content 到混入，传递到 @content 位置

@mixin lala {
    html {
        color: #888;
        @content;
    }
}

@include lala {
    /* 此处名字必须和上面保持一致 */
    .logo {
        font-size: 15px;
    }
}
/*
    html {
      color: #888;
    }

    html .logo {
      font-size: 15px;
    }
*/

变量在混入 @mixin 的作用域,即传递给混入（mixin）的内容块在其被定义的作用域中进行运算，而不是混入（mixin）的作用域。这意味着混入（mixin）的局部变量不能传递给样式块使用

$color: white;
@mixin haha($color: black) {
    background-color: $color;
    @content;
}

.test12 {
    @include haha {
        color: $color;
    }
}
/*
    .test12 {
      background-color: black;
      color: white;
    }
*/

函数,用法类似 @mixin

@function sasa($name) {
    @return $name;
}

.test13 {
    font-size: sasa(15px);
}
/*
    .test13 {
      font-size: 15px;
    }
*/

- Book Lists -