If you’re doing front-end development, you’ve probably used some CSS libraries, like Bootstrap, Tachyons, etc.

However, different libraries have different definitions of class names, which can be difficult to use.

This article will teach you how to build your own style library step by step using Sass.

It’s not hard. If you are not familiar with the use of sass, please check out this sass guide.

Environment configuration

The first step is to install Node-sass, which we will use to compile.scss files into.css files

npm install -g node-sass
Copy the code

Next we create a new file style.scss

Define the web page base style

Define some common base styles:

* {
  box-sizing: border-box;
  outline: none;
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0.0.0.0);
}

article.aside.figcaption.figure.footer.header.hgroup, main, nav.section {
  display: block;
}

body {
  margin: 0;
  font-family: "Apple Color Emoji"."Segoe UI Emoji", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: # 212529;
  text-align: left;
  background-color: #fff;
}

h1.h2.h3.h4.h5.h6 {
  margin-top: 0;
  margin-bottom: 0.5 rem; }...Copy the code

This part does not make detailed introduction, can according to their own needs at will.

Build font size styles

Using building font sizes as an example, here’s how you can build multiple font size classes at once with just a few lines of code.

Start by creating a new map-type data structure with font size.

$fontSizeMap: (
  0: 0.1: 0.5 rem.2: 1rem.3: 1.5 rem.4: 3rem,);Copy the code

$fontSizeMap is then traversed via @each:

@each $key.$val in $fontSizeMap {
  .ft-# {$key} {
    font-size: # {$val}; }}Copy the code

Compile style.scss at the terminal

  node-sass style.scss style.css
Copy the code

If the compilation succeeds, a style.css file is generated in the same directory.

By opening the style.css file, the font size classes we created with SCSS are automatically compiled.

.ft-0 {
  font-size: 0; }

.ft-1 {
  font-size: 0.5 rem; }

.ft-2 {
  font-size: 1rem; }

.ft-3 {
  font-size: 1.5 rem; }

.ft-4 {
  font-size: 3rem; }
Copy the code

In the future, if you need to add a new size font, just add a piece of data to $fontSizeMap and recompile it.

In the same way, we can easily construct a whole set of other styles, such as: word weight, text color, background color, border size, etc.

Build a Margin /padding style

Here’s a more complicated one, using margin/padding as an example.

The result is to generate the following three styles:

  1. Each edge: similar to MT0, MR0, MB0, ML0
  2. Diagonal edges: Mx0, my0
  3. All edges: ma0

Start by defining three map-type data structures

  1. Type:
  $spaceTypes: (
    m: margin,
    p: padding
  );
Copy the code
  1. Direction:
$spaceDirections: (
  t: top,
  r: right,
  b: bottom,
  l: left
);
Copy the code
  1. Margin size
$spaceSizes: (
  0: 0.1:.5rem.2: 1rem.3: 1.5 rem.4: 3rem,);Copy the code

The @each function is then used to iterate over the above three data structures, but with multiple layers of nesting:

@each $typeKey.$type in $spaceTypes{@each $sizeKey.$size in $spaceSizes {
    // mt0, mr0, mb0, ml0
    @each $directionKey.$direction in $spaceDirections# {{.$typeKey#} {$directionKey#} {$sizeKey#} {{$type# {} -$direction} :$size; }}// mx0, my0. # {$typeKey}x#{$sizeKey#} {{$type} -left: $size; # {$type} -right: $size; # {}.$typeKey}y#{$sizeKey#} {{$type} -top: $size; # {$type} -bottom: $size;
    }

    // ma0. # {$typeKey}a# {$sizeKey#} {{$type} :$size; }}}Copy the code

Compile style.scss again and you can see that we created 70 classes at once.

$spaceTypes.length * ($spaceDirections.length + 3) * $spaceSizes.length
=> 2 * (4 + 3) * 5 = 70
Copy the code

We have defined a number of map-type data structures above, but it is best to keep them in a separate file for future maintenance.

Create a new file _variable.scss. I’m going to put all the variables that I’ve defined here.

They are introduced via import in style.scss.

@import './variables';
Copy the code

The new file name above is preceded by an _, which indicates that the file will not be compiled as a CSS file and can be referenced with or without an _.

conclusion

From the introduction above, you can see that the core is the use of @each. If you combine it with @if@else conditions, you can easily build a very lightweight style library.

If you are compiling with a build tool (Gulp, Webpack, etc.), autopreFixer makes it easy to build a style library that is compatible with all browsers.

Here is a CSS style library that I created myself, which contains definitions of some of the styles commonly used in development.

You can use them directly if you feel the need, or add or subtract them yourself.

Finally, if you find this article enlightening at all, don’t forget to give astarOh. (^_^)