[Nota: Sass Sass] mediante el desarrollo elemento de interfaz de usuario con la interfaz web

> Descripción <

En Sass de acuerdo a las necesidades del proyecto sólo para personalizar la alineación del texto, el color del texto, color de fondo, tamaño del texto, la disposición y los márgenes interiores y exteriores Flex similares, excepto que el Sass encargo sintaxis y cada bucle, por ejemplo, la siguiente alineación del texto, el color del texto , color de fondo, así como dentro y fuera de los márgenes. La escritura es relativamente simple, y luego elemento de interfaz de usuario de desarrollo de interfaces suficientemente básicas. recarga estilo original usando normalizar.

1, color

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

2, la alineación del texto

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

3, color del texto y el color de fondo

//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, los márgenes dentro y fuera

tipo de definición

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

Dirección se define

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

El tamaño se define

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

Ejemplos mt-0, por supuesto, puede escribir m-0, MX-0, Mi-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;
      }
    }
  }
}