sass杂记

sass安装

win下安装sass
rubby下载WITHOUT DEVKIT的即可

sass数据类型

map

$map: (
  key1: value1,
  key2: value2,
  key3: value3
);

常用函数

颜色加深, 变浅，提取亮度

lighten($color, $percent) // 颜色变浅 percent: 百分比
darken($color, $percent) // 颜色加深
lightness($color)

lighten与darken只是单纯的对颜色亮度进行加减计算, 亮度的上下限为0-100%

lighten(#f36, 50%)

map相关操作

// map-merge 合并map
// map-merge(("foo": 1), ("bar": 2)) => ("foo": 1, "bar": 2)
$theme-colors: () !default;
$theme-colors: map-merge(
  (
    "primary":    $primary,
    "secondary":  $secondary,
    "success":    $success,
    "info":       $info,
    "warning":    $warning,
    "danger":     $danger,
    "light":      $light,
    "dark":       $dark
  ),
  $theme-colors
);

// 遍历map
@each $color, $value in $theme-colors {
  .alert-#{$color} {
    @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level));
  }
}

// map-get(map, key) 返回 Map 中 key 所对应的 value(值)。如没有对应的 key，则返回 null 值
map-get($theme-colors, 'primary')

mix函数

Mix 函数是将两种颜色根据一定的比例混合在一起，生成另一种颜色。其使用语法如下:

mix($color-1,$color-2,$weight);

$color-1 和 $color-2 指的是你需要合并的颜色，颜色可以是任何表达式，也可以是颜色变量。
$weight 为合并的比例（选择权重），默认值为 50%, 这意味着两个颜色各占一半，如果指定的比例是 25%，这意味着第一个颜色所占比例为 25%，第二个颜色所占比例为75%。

自定义函数

/* 自定义函数 */
@function column-width($col, $total) { 
  @return percentage($col/$total); 
}
/* 使用自定义函数 */
.col-3 { 
  width: column-width(3, 8); 
}

Mixins

//定义一个mixin
@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;}

//引用mixin
.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}
// 使用参数
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

// 使用参数默认值
@mixin border-radius($radius:10px) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}
.box1 { @include border-radius(); }
.box2 { @include border-radius(20px); }

@each

// sass代码
@each $color in red, green, yellow, blue {
  .p_#{$color} {
    background-color: #{$color};
  }
}

// 编译后的css代码
.p_red {
  background-color: red; }

.p_green {
  background-color: green; }

.p_yellow {
  background-color: yellow; }

.p_blue {
  background-color: blue; }

// sass代码
@each $color, $border in (aqua, dotted),
                        (red, solid),
                        (green, double){
  .#{$color} {
    background-color : $color;
    border: $border;
  }
}

// 编译后的css代码
.aqua {
  background-color: aqua;
  border: dotted; }

.red {
  background-color: red;
  border: solid; }

.green {
  background-color: green;
  border: double; }