如何利用sass快速構建本身的css通用樣式

作前端開發，你必定或多或少的用過一些CSS工具庫，好比Bootstrap, Tachyons等。

可是不一樣的庫對於類名的定義不盡相同，使用起來不免有些不太駕輕就熟。

本文將教你怎麼用sass一步一步構建本身的樣式庫。

其實不難。若是對sass用法還不太熟悉，能夠先看下這篇文章SASS用法指南。

環境配置

首先須要安裝node-sass，後續咱們會用它將.scss文件編譯成.css文件

npm install -g node-sass
複製代碼

接下來咱們新建一個文件style.scss

定義網頁基礎樣式

定義一些共通的基礎樣式：

* {
  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.5rem;
}

......
複製代碼

這部分不作詳細的介紹，能夠根據本身的須要隨意的增減。

構建字體尺寸樣式

下面以構建字體尺寸爲例，介紹如何只用幾行代碼就能夠一次構建多個字體尺寸類。

首先新建一個字體尺寸的Map類型數據結構。

$fontSizeMap: (
  0: 0,
  1: 0.5rem,
  2: 1rem,
  3: 1.5rem,
  4: 3rem,
);
複製代碼

而後經過@each對$fontSizeMap進行遍歷：

@each $key, $val in $fontSizeMap {
  .ft-#{$key} {
    font-size: #{$val};
  }
}
複製代碼

在終端編譯一下style.scss

node-sass style.scss style.css
複製代碼

若是編譯成功，會在同級目錄下生成一個style.css文件。

打開style.css文件，咱們經過scss建立的字體尺寸的類就已經自動編譯好了。

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

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

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

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

.ft-4 {
  font-size: 3rem; }
複製代碼

之後若是須要增長新的尺寸的字體，直接在$fontSizeMap中添加一條數據，而後從新編譯一下就行了。

使用一樣的方式，咱們能夠很方便的構建一整套其餘樣式，好比：字重，文字顏色，背景顏色，邊框大小等等。

構建margin/padding樣式

接下來介紹一個複雜一點的，以margin/padding爲例。

最終要生成下面這三類樣式：

1. 每條邊：相似mt0, mr0, mb0, ml0
2. 對角邊: mx0, my0
3. 全部邊: ma0

首先要定義三個Map類型數據結構

1. 類型:

$spaceTypes: (
    m: margin,
    p: padding
  );
複製代碼

2. 方向:

$spaceDirections: (
  t: top,
  r: right,
  b: bottom,
  l: left
);
複製代碼

3. 邊距大小

$spaceSizes: (
  0: 0,
  1: .5rem,
  2: 1rem,
  3: 1.5rem,
  4: 3rem,
);
複製代碼

而後一樣利用@each函數遍歷以上三個數據結構，可是須要多層嵌套:

@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;
    }
  }
}
複製代碼

再次編譯style.scss，就能看到咱們一次建立了70個類。

$spaceTypes.length * ($spaceDirections.length + 3) * $spaceSizes.length
=> 2 * (4 + 3) * 5 = 70
複製代碼

在上文中咱們定義了不少的Map類型數據結構，爲了之後維護方便，最好把他們放到一個單獨的文件中。

新建一個文件_variables.scss。把以前定義的全部變量都放到這裏維護。

在style.scss中經過import把它們引入進來。

@import './variables';
複製代碼

上面新建的文件名前面有個_， _表示此文件將不會被編譯爲css文件，而且引用該文件的時候帶不帶_均可以。

總結

經過上面的介紹，你會發現，其實核心就是@each的用法，若是在配合一些@if @else條件語句，就能夠很方便的構建一個很是輕量級的樣式庫。

若是你是利用構建工具(Gulp, Webpack等)編譯，配合autoprefixer能夠很方便的構建一個兼容各個瀏覽器的樣式庫。

下面是筆者本身建立的一個css樣式庫，裏面包含了開發中經常使用的一些樣式的定義。

若是你覺着有須要能夠直接拿去用，或者自行進行增減。

最後，若是覺着本文對你有一點點啓發，別忘了給個star哦。（^_^）