当前位置: 首页 > 工具软件 > Bourbon > 使用案例 >

Bourbon: 让你的sass更简洁

贲凌
2023-12-01

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
 类似资料: