Bourbon: 讓你的sass更簡潔

Bourbon是什麼

bourbon是一個輕量級的Sass mixin和函數庫，能夠幫助咱們快速開發樣式.

官方文檔

如下用webpack@3.10.0(+vue)爲示例簡述Bourbon的使用

安裝配置

1. npm install bourbon -S
   複製代碼

2. 把bourbon添加到node-sass的includePaths中

   // webpack.config.js
   module.exports = {
       entry: {},
       output: {},
       module: {
           "rules": [
               {
                   test: /\.scss$/,
                   use: [
                       "vue-style-loader",
                       {
                           loader: "css-loader",
                           options: {
                               ...
                           }
                       },
                       {
                           loader: "postcss-loader"
                       },
                       {
                           loader: "sass-loader",
                           options: {
                               ...
                               "includePaths": [require("bourbon").includePaths]
                           }
                       }
                   ]
               }
           ]
       }
   }
   複製代碼

3. 在sass/scss文件中引用

   @import "bourbon";
   複製代碼

舉例使用

1. position

   .test {
       @include position(relative, 0 null null 30px);
   }
   複製代碼

   生成的樣式

   .test[data-v-a49090ce] {
       position: relative;
       top: 0;
       left: 30px;
   }
   複製代碼

2. ellipsis

   .test {
       @include ellipsis;
   }
   複製代碼

   生成的樣式

   .test[data-v-a49090ce] {
       display: inline-block;
       max-width: 100%;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       word-wrap: normal;
   }
   複製代碼

3. px to rem

   .test {
       font-size: rem(120); 
   }
   複製代碼

   生成的樣式

   .test[data-v-a49090ce] {
       font-size: 1.6rem;
   }
   複製代碼

4. shade

   .test {
       background-color: shade(blue, 60%);
   }
   複製代碼

   生成的樣式

   .test[data-v-a49090ce] {
       background-color: #000066;
   }
   複製代碼

5. prefixer(不受相似postcss的autoprefixer工具影響的狀況下)

   .test {
       @include prefixer(appearance, none, ("webkit"));
   }
   複製代碼

   生成的樣式

   .test[data-v-a49090ce] {
       -webkit-appearance: none
   }
   複製代碼

更多請前往官方文檔查看