bourbon使用

最近在做一个基于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这样的工具库，每个人的需求也都不相同，大家可以自行选择。