【笔记：sass】利用sass配合element-UI开发网站界面

>内容简介<

在sass中根据项目需要只是自定义了文本对齐、文本颜色、背景颜色、文字大小、flex布局以及内外边距等，只是用了sass语法中的自定义以及each循环，下面举例文本对齐、文字颜色、背景颜色、以及内外边距。写法比较简单，再element-ui开发界面基本足够。原本样式充值使用的是normalize。

1、颜色

//color
$colors: (
  "primary": #009a44,
  "white": #ffffff,
  "black": #000000,
  "gary-33": #333333,
  "gary-80": #808080,
  "gary-99": #999999,
  "gary-cd": #cdcdcd,
  "gary-e4": #e4e4e4
);

2、文本对齐

//text
@each $var in (left, center, right) {
  .text-#{$var} {
    text-align: $var;
  }
}

3、文字颜色及背景颜色

//text-color & bg-color
@each $colorkey, $color in $colors {
  .text-#{$colorkey} {
    color: $color !important;
  }
  .bg-#{$colorkey} {
    background-color: $color !important;
  }
  .bg-tsp {
    background-color: transparent !important;
  }
}

4、内外边距

类型定义

//type
$spacing-type: (
  m: margin,
  p: padding
);

方向定义

//directions
$spacing-directions: (
  "t": top,
  "r": right,
  "b": bottom,
  "l": left
);

大小定义

//0-5
$base-spacing-size: 1rem;
$spacing-sizes: (
  0: 0,
  1: 0.25,
  2: 0.5,
  3: 1,
  4: 1.5,
  5: 3
);

举例mt-0，当然也可以写出m-0，mx-0，my-0

//mt-0  =>  margin-top:0
@each $typekey, $type in $spacing-type {
  @each $directionkey, $direction in $spacing-directions {
    @each $sizekey, $size in $spacing-sizes {
      .#{$typekey}#{$directionkey}-#{$sizekey} {
        #{$type}-#{$direction}: $size * $base-spacing-size !important;
      }
    }
  }
}