css3和sass.md

sass

---

2016-3-21

1. @at-root用法

.box {
    @at-root #{&}-a {
        // 样式
    }
}

编译后

.box-a {
    // 样式
}

和&的不同之处是在，&编译后在嵌套在父级里面的

.box {
    $-a {
        // 样式
    }
}

.box .box-a {
    // 样式
}

css3

---

2016-3-21

1. []属性选择器

[attr ^= value]     // 匹配attr属性开头带value的元素
[attr $= value]     // 结尾
[attr *= value]     // 任意地方

<div class="box container btn-sm">1</div>
<div class="container btn-sm box">2</div>
<div class="box container btn-sm">3</div>

[class ^= 'box'] {
    color: red      // 1
}
[class $= 'box'] {
    color: blue     // 2
}
[class *= 'btn-sm'] {
    color: white    // 1 2 3
}