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更简洁的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。