SS預(yù)處理技術(shù)現(xiàn)在已經(jīng)非常成熟，比較流行的有Less，Sass，Stylus，在開發(fā)過程中提升我們的工作效率，縮短開發(fā)時間，方便管理和維護(hù)代碼，可以根據(jù)自己的喜好選擇一款自己喜歡的工具開發(fā)，使用很接近，差別很小，語法類似。再選擇一款編譯工具koala， 國產(chǎn)工具，koala是一個前端預(yù)處理器語言圖形編譯工具，支持Less、Sass、Compass、CoffeeScript，幫助web開發(fā)者更高效 地使用它們進(jìn)行開發(fā)。跨平臺運行，完美兼容windows、linux、mac。還可以在node.js里編譯。我使用的是SASS，使用 SASS+Compass完勝LESS。

常用CSS預(yù)定義：

1：ellipsis，省略號，當(dāng)超過寬度時，顯示省略號：

@mixin ell() {overflow: hidden; -ms-text-overflow: ellipsis;text-overflow: ellipsis;white-space: nowrap; }

?2：display:inline-block;IE6,7塊級元素對inline-block支持不好，需要觸發(fā)Layout；內(nèi)聯(lián)元素就不需要了。

@mixin dib() {display: inline-block;*display: inline;*zoom: 1; }

?3：清除浮動，貌似最完美的解決方案

/* clearfix */ @mixin clearfix {&:after {clear: both;content: '\20';display: block;height: 0;line-height: 0;overflow: hidden;}*height: 1%; }

?4：最小高度，IE6不支持min-height，但是使用height能達(dá)到一樣的效果

/* minheight */ @mixin minHeight($min-height) {min-height: $min-height;height: auto !important;height: $min-height; }

?5：使用純CSS現(xiàn)實三角形，兼容所有瀏覽器；使用了三個參數(shù)，第一個是"方向"，第二個是"大小"，第三個是"顏色"，省得每次都寫一大堆代碼，非常方便啦；

/* 箭頭 arrow(direction, size, color); */ @mixin arrow($direction, $size, $color) {width: 0;height: 0;line-height: 0;font-size: 0;overflow: hidden;border-width: $size;cursor: pointer;@if $direction == top {border-style: dashed dashed solid dashed;border-color: transparent transparent $color transparent;border-top: none;}@else if $direction == bottom {border-style: solid dashed dashed dashed;border-color: $color transparent transparent transparent;border-bottom: none;}@else if $direction == right {border-style: dashed dashed dashed solid;border-color: transparent transparent transparent $color;border-right: none;}@else if $direction == left {border-style: dashed solid dashed dashed;border-color: transparent $color transparent transparent;border-left: none;} }

?

使用實例：

test.scss

.arrow{@include arrow(bottom,10px,#F00);//向下，10px大小，紅色箭頭，立馬出現(xiàn) 使用@include導(dǎo)入 }

?編譯結(jié)果：

.arrow {width: 0;height: 0;line-height: 0;font-size: 0;overflow: hidden;border-width: 10px;cursor: pointer;border-style: solid dashed dashed dashed;border-color: red transparent transparent transparent;border-bottom: none; }

?

轉(zhuǎn)載于:https://www.cnblogs.com/xupeiyu/p/3767530.html

總結(jié)

以上是生活随笔為你收集整理的使用Sass预定义一些常用的样式，非常方便（转）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。