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
   }
   

更多请前往官方文档查看

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