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
   }
   

更多请前往官方文档查看

更多专业前端知识，请上 【猿2048】www.mk2048.com