scss實用高階 樣式復用

此前我使用scss，僅僅是為了用而用，只知道它的巢狀寫法給我們帶來了很多方便，即美觀也不用手動巢狀。

但其實scss有很多其他的優點才是精髓，這裡詳細說一下自己使用scss時，用到的樣式復用方法。歡迎補充。

三、常用@mixin樣式模版舉例

四、總結

最主要的好處是可以像函式一樣傳參，自定義樣式模組

flex的左右以及上下居中的復用

文字/樣式的復用，變數使用$定義

@mixin定義變數的同時，設定預設值（與函式相同）

方便維護，和不用在乎數量（變數多的時候使用）

/*文字格式化，超出範圍，顯示省略號*/

@mixin
text-overflow
($width
:100%,$line
:1) 

scss使用邏輯運算，加上@if即可，其他同理

/**

*預設flex樣式水平，垂直居中
* 1、$flex-wrap: null -- 清空所有對齊樣式
* 2、$direction:... -- 水平排/垂直排
* 3、...
*/@mixin
flex-center
($direction
:row,$justify
:center,$align
:center,$flex-wrap
: null)
@if($direction!=null)
@if($justify!=null)
@if($align!=null)

直接寫4個數字,簡化**

/*絕對定位  引數順序：上右下左*/

@mixin
positionabsolute
($top
:null,$right
:null,$bottom
:null,$left
:null)
@if($right!="" & & $right!=null)
@if($top!="" & & $top!=null)
@if($bottom!="" & & $bottom!=null)

簡化2次尺寸和圓角，內容水平垂直居中

/* 圓形盒子 */

@mixin
circle
($size
: 11px,$bg
: #fff)

/**

*定義滾動條樣式 圓角和陰影不需要則傳入null
* 1、$outcolor -- 滾動條顏色
* 2、$innercolor -- 滑塊顏色
* 3、$height -- 滾動條寬高、圓角
* 4、$width
* 5、$radius
* 6、$shadow -- 陰影
*/@mixin
scrollbar
($width
:10px,$height
:10px,$outcolor
:$bgcolor,$innercolor
:$bggrey,$radius
:5px,$shadow
:null)
/*定義滾動條軌道 內陰影+圓角*/
&::-webkit-scrollbar-track
@if($radius!=null)
background-color
: $outcolor;
}/*定義滑塊 內陰影+圓角*/
&::-webkit-scrollbar-thumb
@if($radius!=null)
background-color
: $innercolor;
border
: 1px solid $innercolor;
}}

mixin裡可以巢狀mixin

重點是靈活利用變數

萬事不順，查文件：sass官方文件

降低scss樣式的權重

scss的巢狀寫法是方便了許多，但是帶來的問題是權重的增加，如果你想通過dom修改某個樣式將會發現，要修改的樣式總是被原有的覆蓋，不用想，肯定是權重值不夠，但是又不想用 important，那麼解決的方式就是使用scss的 at root指令，這個指令可以然你的樣式在文件的根層級上輸出而不是巢狀在符...

專案中scss提取可復用mixin函式

定義minxi.scss檔案 flex布局復用 mixin flex hov space between,col center mixin bgimg w 0,h 0,img size contain 使用方式 import assets mixin.scss include flex includ...

實用CSS樣式定義集錦

將超出寬度的溢位文字顯示省略號效果 t text overflow ellipsis white space nowrap overflow hidden 用css實現table單元格資料自動換行或不換行的實現方法 word break break all 強制換行 word break keep ...