Bourbon是什么

bourbon是一个轻量级的Sass mixin和函数库，可以帮助我们快速开发样式.

官方文档

以下用webpack@3.10.0( vue)为示例简述Bourbon的使用

安装配置

```
npm install bourbon -S
```

把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]}}]}]}
}

在sass/scss文件中引用
```
@import "bourbon";
```

举例使用

position

.test {@include position(relative, 0 null null 30px);
}

生成的样式

.test[data-v-a49090ce] {position: relative;top: 0;left: 30px;
}

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;
}

px to rem

.test {font-size: rem(120);
}

生成的样式

.test[data-v-a49090ce] {font-size: 1.6rem;
}

shade

.test {background-color: shade(blue, 60%);
}

生成的样式

.test[data-v-a49090ce] {background-color: #000066;
}

prefixer(不受类似postcss的autoprefixer工具影响的情况下)

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

生成的样式

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

更多请前往官方文档查看

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

Bourbon: 让你的sass更简洁相关推荐

一名Android程序员如何减少代码中该死的-if-else-嵌套，怎么让代码更简洁？
减少代码中该死的-if-else-嵌套,让代码更简洁! 写在前面不知大家有没遇到过像"横放着的金字塔"一样的if else嵌套: if (true) {if (true) {if ...
9个JavaScript小技巧：写出更简洁，高效代码
JavaScript一直在变化进步着,这儿列举了一些小技巧帮你在2019年写出更简洁,高效的可拓展的代码.下面共列举了9个讲究使用的小技巧来帮助你成为更好的开发者. 1. async / await ...
wordpress去掉category怎么操作让url更简洁友好
用wordpress建站是比较流行的,全球将近25%的站点是用wordpress搭建的.有很多的模板.插件可以选择,当然最好还是能自己优化.URL固定链接就是之中一个基础的技巧.有网友问如何去掉url ...
c语言多种选,教你轻松学会C语言系列之——一种更简洁、更经典的选择结构
前文中,我们已经讲到了选择结构的使用语法.在多重条件选择应用场景中,有表示等值判断的,也有表示区间范围的应用.本文,就来分享另外一种简洁又经典的选择结构. 关键单词 switch([swit]转变,改 ...
使用自定义卫语句写出更简洁的代码
前言上次,我们介绍了Pitcher,可以帮我们简化卫语句: public User(string name, int age) {Throw.When(string.IsNullOrWhiteSpa ...
div css入门教程，更简洁CSS清理浮动方式：clearfix
- 清理浮动有很多种方式,像使用 br 标签自带的 clear 属,使用元素的 overflow,使用空标签来设置 clear:both 等等.但考虑到兼容问题和语义化的问题,一般我们都会使用如下代码 ...
还在手写 Getter/Setter 方法吗？Lombok 让你的代码更简洁！
以下是文章大纲: Lombok 是什么? 官网:https://projectlombok.org/ Lombok 是一个 Java 库,使用 Lombok 可以通过简单的注解帮助我们消除 Java ...
更简洁的方式修改Chrome的User Agent,轻松体验移动版网络
国庆节在家宅着,使用3g上网卡上网,和在公司上网不一样的是:使用上网卡时刻要注意流量问题,毕竟是限定流量的. 理论上访问手机版或者iPad等平板电脑版的网络,应该可以剩些流量的,毕竟移动网络是经过优化 ...
javascript编写_如何在JavaScript中使用解构来编写更简洁，功能更强大的代码
javascript编写 by Ashay Mandwarya ?️?? 由Ashay Mandwarya提供吗? 如何在JavaScript中使用解构来编写更简洁,功能更强大的代码 (How to ...

Bourbon: 让你的sass更简洁

Bourbon是什么

安装配置

举例使用

Bourbon: 让你的sass更简洁相关推荐

最新文章

热门文章