Sass基礎學習No.6-結合@mixin及@if做更多變化

發表於 更新於 分類於 ，

怎麼運用CSS做出三角形請參考利用CSS border設計三角形。

怎麼寫@mixin請參考[Sass基礎學習No.4]Sass裡個性化的複製機@mixin

知道三角形怎麼創造出來的及怎麼寫@mixin後，再來學透過@if快速創造4個方向的三角形。

利用@mixin及@if快速做選擇

@if 條件及@else if 條件判斷哪個條件是true，就會直接執行屬於那個條件下的程式碼。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
@mixin triangle($direction , $height , $width , $color , $style)
    width: 0
    height: 0
    @if $direction == top
        border-bottom: $height $style $color
        border-right: ($width/2) $style transparent
        border-left: ($width/2) $style transparent
    @else if $direction == left 
        border-right: $height $style $color
        border-top: ($width/2) $style transparent
        border-bottom: ($width/2) $style transparent
    @else if $direction==bottom 
        border-top: $height $style $color
        border-right: ($width/2) $style transparent
        border-left: ($width/2) $style transparent
    @else if $direction==right 
        border-left: $height $style $color
        border-top: ($width/2) $style transparent
        border-bottom: ($width/2) $style transparent

.top
    +triangle(top,30px,50px,#000,solid)
  • $direction是指三角形的方向，@if $direction == top、@else if $direction == left、@else if $direction==bottom及@else if $direction==right，都是條件式，在調用+triangle()的時候，第一個變數就是要用來判斷的值，當判斷式為true時，就會引用下方的程式碼。
  • $height是指三角形的高。
  • $width是指三角形的底。
  • $color是指三角形的顏色。
  • $style是指三角形的樣式(一定得有)。