1.
2.@if和@else if
该表达式通常返回任一true或false -if表达式返回true
一个@if规则可以选择跟随一个@else规则，写@else { ... }。如果@if表达式返回，则评估此规则的块false。
@else if语句用来与@if指令一起使用。当 @if 语句失败时，则 @else if 语句测试，如果它们也无法测试满足时再 @else 执行。
@mixin triangle(color, direction) { height: 0; width: 0; border-color: transparent; border-style: solid; border-width: size / 2; @if direction == up { border-bottom-color: color; } @else if direction == right { border-left-color: color; } @else if direction == down { border-top-color: color; } @else if direction == left { border-right-color: color; } @else { @error "Unknown direction #{$direction}."; } } .next { @include triangle(5px, black, right); }
3.scoped给一个组件中所有的 DOM 添加了一个独一无二的动态属性，然后给 CSS 选择器额外添加了一个对应的属性来选择该组件中的 DOM，这种做法使得样式只作用于含有该属性的 DOM ——组件内部 DOM 。 这样如果使用了 Ant Design for Vue 或者 Element UI 等第三方组件，就会出现 CSS 设置不起效的问题，无法通过 CSS 修改组件的样式 如果不是一开始就统一好全局样式，或者中途有人加入，引入scoped避免自己的样式，避免自己的样式影响到其他人的样式岂不很好。scoped还是有必要的，但是用完之后对后期维护修改比较麻烦，权重问题。
解决方案：
a.scoped穿透 ::v-deep 深度 >>>（vue-loader）
b.曲线救国：用两个 style 标签，一个带 scoped 属性，一个不带 scoped 属性，用来修改第三方组件的样式 把需要覆盖的css样式写在不加scoped属性的style标签里建立一个reset.css(基础全局样式)文件，里面写覆盖的css样式，在入口文件main.js 中引入
c. 使用sass或less的样式穿透/deep/ 外层 /deep/ 第三方组件
