業餘IT人的部落格

在上一篇介紹到 @mixin 大致上的用法，而 @mixin 也很方便可以帶入參數加速開發流程,加入變數的寫法如下：

@mixin 名稱(變數1,變數2,....){
  CSS語法
}
@mixin color($color,$size){
  color: $color;
  border: $color solid 2px;
  text-decoration: $color;
  font-size: $size * 1.5;
}

 

範例程式碼如下：

demo/
├── css/
│   ├── all.css
└── sass/
    ├── _mixin.scss
    ├── _main.scss
    └── all.scss

 

SASS下的_mixin.scss

@mixin color($color,$size) {
  color: $color;
  border: $color solid 2px;
  text-decoration: $color;
  font-size: $size * 1.5;
}

 

這段@include color(red,20px);是把color下面的$color變數所有顏色都變成red以及$size變數乘以1.5倍的文字大小,程式碼如下：
SASS下的_main.scss

.box1{
    @include color(red,20px);//文字顏色 紅色 ,文字大小 20px*1.5=30px
}
.box2{
    @include color(pink,40px);//文字顏色 粉色 ,文字大小 40px*1.5=60px
}

 

SASS下的all.scss

//主要樣式
@import "mixin";
@import "main";

 

SASS經過編譯後,CSS會會顯示顏色及文字大小,程式碼如下：
all.css

.box1 {
  color: red;
  border: red solid 2px;
  -webkit-text-decoration: red;
  text-decoration: red;
  font-size: 30px; 
}

.box2 {
  color: pink;
  border: pink solid 2px;
  -webkit-text-decoration: pink;
  text-decoration: pink;
  font-size: 60px; 
}