Bourbon 讓你的sass更簡潔

2021-09-27 12:09:54 字數 1082 閱讀 7148

bourbon是乙個輕量級的sass mixin和函式庫,可以幫助我們快速開發樣式.

官方文件

以下用[email protected]( vue)為示例簡述bourbon的使用

npm install bourbon -s

把bourbon新增到node-sass的includepaths中

// webpack.config.js

module.exports = ,

output: {},

module: },,

}]}]

}}

在sass/scss檔案中引用

@import "bourbon";

position

.test
生成的樣式

.test[data-v-a49090ce]

ellipsis

.test
生成的樣式

.test[data-v-a49090ce]

px to rem

.test
生成的樣式

.test[data-v-a49090ce]

shade

.test
生成的樣式

.test[data-v-a49090ce]

prefixer(不受類似postcss的autoprefixer工具影響的情況下)

.test
生成的樣式

.test[data-v-a49090ce]

更多請前往官方文件檢視

更多專業前端知識,請上

【猿2048】www.mk2048.com

讓你的iTerm更Geek

iterm2 作為乙個免費 開源的應用,mac程式設計師應用必備的軟體!作為乙個專業的終端,功能真的很強大,iterm oh my zsh應作為最佳配置使用!我們有時會遇上這樣一種情況,就是我們只想用命令列執行某乙個特定的操作,然後就不需要它了。其實在這種情況下我們沒有必要開啟命令列應用的。比如我們...

讓你的軟體介面更漂亮 三

讓你的軟體介面更漂亮 三 朱一松 實現令人滿意的風格統一的軟體介面確實很難,象提到的messagebox filedialog fontdialog 目錄選擇對話方塊等mfc內部甚至系統dll內的對話方塊,要想讓它變臉可不容易。有人說hook技術可以,hook技術確實可以,hook可以說是無孔不入,...

讓你的軟體介面更漂亮 二

一 統一風格漂亮介面設計的理論與實現 a.視窗和對話方塊 windows操作系中視窗和對話方塊在我們看來是一樣的,就是乙個四邊形,有標題欄 系統按鈕,邊框等,可移動和可變大小。實際上視窗和對話方塊是有的區別的。在建立對話方塊視窗時的工作中要發生兩個主要過程 對話方塊的過程和其視窗過程。win32 s...