sass使用记录

sass使用记录

安装 npm/yarn install sass

1 嵌套
2 父选择器 &
3 属性嵌套 提取相同属性名，嵌套子项属性

font{
	size: 10px;
	family: fantasy;
	weight: bold;
}
等同于
font-size: 10px;
font-family: fantasy;
font-weight: bold;

4 注释
5 数据类型

• 数字，1, 2, 13, 10px
• 字符串，有引号字符串与无引号字符串，"foo", 'bar', baz
• 颜色，blue, #04a3f9, rgba(255,0,0,0.5)
• 布尔型，true, false
• 空值，null
• 数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
• maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)

6 运算 (+, -, *, /, %)
7 插值 #{}

1、变量 $
 $w: 10;
 
2、循环 @for
@for $iw from 1 through 10 {
    $w: 10 * $iw;
    .#{'iw'+$w} { width: 10px * $iw;}
    .#{'rate'+$w} { width: 10% * $iw; }
}

3、循环 @each 单值
@each $justifyContent in flex-start, center, flex-end, space-between {
    .box-#{$justifyContent} {
        display: flex;
        justify-content: #{$justifyContent};
        align-items: center;
    }
}

4、循环 @each 对象值
注释: 对象属性 $name, $picture, $suffix；对象值：(text, text, svg)
说明：一个（）代表一个对象，数组由多个对象组成
@each $name, $picture, $suffix 
in (text, text, svg),
(photo, photo, svg)
{
	.#{$name} {
		$url: #{$picture}.#{$suffix};
		background: url('../../static/images/'+$url) no-repeat;
	}
}

5、循环 @each map值
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
  #{$header} {
    font-size: $size;
  }
}

6、混入与调用 @mixin与@include 
参数：接收选择器名称
@mixin left-icon($selector) {
    .list #{$selector}{
        height: 48px;
        position: relative;
    }
}
@include left-icon(".icon-text");

7、混入与调用 @mixin与@include 
参数：无参
@mixin color-text {
  color: #ff0000;
}
@include color-text

8、继承 @extend
.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}