Scss入门

颜色

hsla (hue值, 饱和度, 明度, 不透明度)

• hue值

  • adjust-hue

• 饱和度

  • saturate(color, perctange)
  • desaturate(color, perctange)

• 明度

  • darken(color, perctange)
  • lighten(color, perctange)

• 不透明度

  • opacify($color, num) num为要增加的不透明度
  • transparentize($color, num) num为要减少的不透明度

列表

• length(5px 10px)
  • 2
• nth(5px 10px, 1)
  • 5px
• index(1px solid red, solid)
  • 2
• append(5px 10px, 5px)
  • 5px 10px 5px
• join(5px 10px, 5px 10px)
  • 5px 10px 5px 10px
• join(5px 10px, 5px 10px, comma)
  • 5px,10px,5px,10px

Map

• map-get($map, key)
• map-keys
• map-values
• map-merge
• map-remove

interpolation: #{$variable}

@mixin @include

有点像js里的函数

@mixin 名字 (参数1, 参数2, ...) {
    ...
}

@mixin alert {
    color: #ffffff;
    background-color: #f8f8f8;
    a {
        color: blue;
    }
}
.alert-btn {
    @include alert;
}

@if

@for

$columns: 4;
@for $i from 1 through $columns {
    .col-#{$i}{
        width: 100% / $columns * $i
    }
}

.col-1 {
    width: 25%
}
.col-2 {
    width: 25%
}
.col-3 {
    width: 25%
}
.col-4 {
    width: 25%
}

@each

语法

@each $var in $list {
    ...
}

案例

$icons: success error warning
@each $icon in $icons {
    .icon-#{$icon} {
        background-image: url(../images/icons/#{$icon}.png);
    }
}

.icon-success {
    background-image: url(../images/icons/success.png);
}
.icon-error {
    background-image: url(../images/icons/error.png);
}
.icon-warning {
    background-image: url(../images/icons/warning.png);
}

@while

$i: 6;
@while $i>0 {
    .item-#{$i} {
        width: 5px * $i;
    }
    $i: $i - 2;
}

.item-6 {
    width: 30px;
}
.item-4 {
    width: 20px;
}
.item-2 {
    width: 10px;
}

@function

$colors: (light: #ffffff, dark: #000000);
@function color($key) {
	@return map-get($colors, $key)
}
body {
	background-color: color(light);
}

body {
	background-color: #ffffff;
}

@warn

$colors: (
  light: #ffffff,
  dark: #000000,
);
@function color($key) {
  @if not map-has-key($colors, $key) {
    @warn "在$colors里没找到#{$key}";
  }
  @return map-get($colors, $key);
}
body {
  background-color: color(gray);
}