Что такое бурбон

bourbon — это легкая библиотека миксинов и функций Sass, которая помогает нам быстро разрабатывать стили.

официальная документация

Ниже в качестве примера используется webpack@3.10.0(+vue) для краткого описания использования Bourbon.

Конфигурация установки

1. npm install bourbon -S
   

2. Добавьте бурбон в includePaths узла-sass

   // 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. префикс (без влияния инструментов автопрефикса, таких как postcss)

   .test {
       @include prefixer(appearance, none, ("webkit"));
   }
   

   сгенерированный стиль

   .test[data-v-a49090ce] {
       -webkit-appearance: none
   }
   

Чтобы узнать больше, перейдите наофициальная документацияПроверить