最近在做一個基于vue的項目，由于用到了sass，準備搭配著bourbon用。也是第一次用，邊學邊用邊記錄~~

介紹

類似于compass，bourbon是一個輕量級的SASS mixin庫。官方介紹說bourbon有以下三個優勢：

• 沒有第三方依賴，是純凈的sass
• 文檔簡潔明了，清晰易讀
• 輕量級

安裝

我是用npm安裝的，也可以使用gem進行安裝。github上有詳細的安裝介紹，可以點這里查看。使用npm的安裝方式如下。

1. npm install node-bourbon —save

2. 把bourbon添加到node-sass的includePaths選項中。下面以webpack的配置為例。

   // webpack.config.js
   var path = require('path');
   var webpack = require('webpack');
   
   var node_modules = path.resolve(__dirname, 'node_modules');
   var pathToBourbon = require('node-bourbon').includePaths;
   
   module.exports = {
       entry: {
           public: [path.resolve(__dirname, 'app/public/main.js')],
       },
       output: {
           path: path.resolve(__dirname, 'build/assets'),
           filename: '[name].bundle.js',
           publicPath: '/assets/'
       },
       module: {
           loaders: [
               {
                   // parse vue components
                   test: /\.vue$/,
                   loader: 'vue',
                   exclude: node_modules
               }, {
                   // edit this for additional asset file types
                   test: /\.(png|jpg|gif)$/,
                   loader: 'file?name=[name].[ext]?[hash]',
                   exclude: node_modules
               }, {
                   // parse css styles
                   test: /\.css$/,
                   loader: 'style!css',
                   exclude: node_modules
               }, {
                   // parse scss styles
                   test: /\.scss$/,
                   loader: 'style!css!sass',
                   exclude: node_modules
               }, {
                   // parse javascript styles
                   test: /\.js$/,
                   loader: 'babel',
                   exclude: node_modules
               }
           ],
       },
       vue: {
           loaders: {
               scss: 'style!css!sass',
               exclude: node_modules
           }
       },
       sassLoader: {
           includePaths: [pathToBourbon]
       },
       babel: {
           presets: ['es2015', 'stage-0'],
           plugins: ['transform-runtime']
       }
   };
   

3. 在項目中的scss文件里引入bourbon

   @import "bourbon";

Mixins

• Margin

  @include margin(null 10px 3em 20vh);
  

• Padding

  @include padding(20vh null 10px 3em);
  

• Position

  .element {
    @include position(relative, 0 null null 10em); // 上、右、下、左
  }
  

• Size 在一個語句中設置寬度和高度

  @include size(2em); // width: 2em; height: 2em;
  @include size(10em auto); // width: 10em; height: auto;
  @include size(min-content 9rem); // width: min-content; height: 9rem;
  @include size(20px calc(100% - 80px)); // width: 20px; height: calc(100% - 80px);
  

• Text-Inputs 為所有input設置樣式，必須使用$all-text-inputs變量

  #{$all-text-inputs} {
    border: 1px solid #f00;
  }
  
  #{$all-text-inputs-focus},
  #{$all-text-inputs-hover} {
    border: 1px solid #0f0;
  }
  
  #{$all-text-inputs-active} {
    border: 1px solid #00f;
  }
  

• Triangle 創建一個可視三角形。有三個參數，分別是size， color ，direction

  @include triangle(12px, gray, down);
  @include triangle(12px 6px, gray lavender, up-left);
  

• Word-wrap 默認值是break-word

  @include word-wrap;
  @include word-wrap(normal);
  

• Clearfix

  .wrapper {
    @include clearfix;
  }
  

• Ellipsis 截斷文本，添加省略號代表溢出。默認寬度是100%

  div {
    @include ellipsis(50%);
  }
  

• Calc

  @include calc(width, "100%-80px");
  

  也可以使用變量

  $width: 100%;
  @include calc(width,"#{$width}-80px");
  

• Flexbox

  .parent {
    @include display(flex);
    @include flex-direction(row);
    @include justify-content(flex-start);
    @include align-items(stretch);
      .child {
        @include flex(1);
      }
  }
  

• Font Face

  @include font-face("source-sans-pro", "/fonts/source-sans-pro/source-sans-pro-regular");
  

• PlaceHolder

  input {
    width: 300px;
    @include placeholder {
      color: red;
    }
  }
  

• User-Select

  @include user-select(none)
  

• Keyframes

  @include keyframes(fadeIn) {
    from {
      @include transform(scale(0));
    }
    to {
      @include transform(scale(1));
    }
  }
  

• Animation

  @include animation(fadeIn 1.0s ease-in, slide 2.0s ease);
  

Functions

• px to em 將像素轉換為em。

  font-size: em(12); // 根據父值計算，默認是16px
  font-size: em(12, 24);  // 也可以傳入第二個參數進行改變
  

• px to rem 將像素轉換為rem。

  font-size: rem(12); 
  

  默認1rem是16px。也可以重新定義$em-base的值進行更改。

  //Import Plugins
  @import "bourbon"
  @import "neat"
    
  $em-base: 14px !global;
  

• Tint & Shade

  Tint and Shade are different from lighten() and darken() functions that are built into Sass.

  Tint is a mix of color with white. Shade is a mix of color with black.

  tint和shade都有兩個參數，一個是顏色，一個百分比。個人理解上面這句話意思就是隨著百分比的增加tint使顏色越來淺，shade使顏色越來越深。

  background: tint(red, 40%);
  background: shade(blue, 60%);
  

結語

隨著sass的發展也越來越成熟，以及autoprefixer這樣的后處理的出現。好像也使得compass, bourbon這樣的庫地位越來越尷尬。而compass也早在2015年就停止了維護。需要不需要使用bourbon這樣的工具庫，每個人的需求也都不相同，大家可以自行選擇。