iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 26
0
自我挑戰組

sass&css 30天學習日誌系列 第 26

SASS : if else應用- border radius

sass 中的 if else是當條件為true時執行內容,當條件為false時執行其他內容 :

@if 是用在判斷如果符合條件,就執行內容,之前在 「extend、mixin與function應用」有運用到
https://ithelp.ithome.com.tw/articles/10205575

@else 則是如果在@if中不符合條件,就執行@else的內容

以下就用搜尋輸入框的border radius樣式範例來說明 :

流程如下:

1.建立有border radius的輸入框和按鈕

2.設定border radius的判斷true/false變數

3.使用mixin,裡面放if else判斷程式,並設定內容

4.css使用@include 載入 mixin

5.mixin中加入參數


1.建立有border radius的輸入框和按鈕

先建立已加上border radius效果的input,之後用判斷式決定是否要顯示border radius效果

HTML

https://ithelp.ithome.com.tw/upload/images/20200412/201073211GOCdpYXql.png

SCSS

https://ithelp.ithome.com.tw/upload/images/20200412/201073213YoYdGE8WW.png

網頁畫面

https://ithelp.ithome.com.tw/upload/images/20200412/20107321BU0nHhxGqf.png

2.設定border radius的判斷true/false變數

https://ithelp.ithome.com.tw/upload/images/20200412/20107321dVfxNhaROh.png

3.使用mixin,裡面放if else判斷程式,並設定內容

3a. 確認判斷boreder radius的變數,在此為$enable-rounded為false,也就是效果為關掉的狀態
3b. 把.input-border-r內的border-radius放在@if內,也就是效果開啟時候才有boreder radius效果

結果如下圖:

https://ithelp.ithome.com.tw/upload/images/20200412/20107321ChciA6tZPk.png

4.css使用@include 載入 mixin

4a.在.input-border-r中使用@inlude
4b.把$enable-rounded改為ture

結果如下圖

true →打開border radius

https://ithelp.ithome.com.tw/upload/images/20200412/201073213i2AiiUEdZ.png

https://ithelp.ithome.com.tw/upload/images/20200412/20107321FYyeYlwmNC.png

false →關閉border radius

https://ithelp.ithome.com.tw/upload/images/20200412/20107321JdEYYuxUmk.png

https://ithelp.ithome.com.tw/upload/images/20200412/20107321GEZDPBJk13.png

5. mixin中加入參數

嘗試把border-radius:5px 設為mixin的參數

5a. 設定border-radius的變數 $border-radius
5b. mixin加入參數$radius,預設值為$border-radius
5c. @if內容的border-radius數值 改為$radius

如下圖:

https://ithelp.ithome.com.tw/upload/images/20200412/20107321BIQEVI9zy3.png

false

https://ithelp.ithome.com.tw/upload/images/20200412/20107321ED2FJ43pMh.png

true

https://ithelp.ithome.com.tw/upload/images/20200412/20107321aVUzXN8Nlk.png

https://ithelp.ithome.com.tw/upload/images/20200412/20107321IWj9743Gc0.png

mixin 介紹: https://ithelp.ithome.com.tw/articles/10193702
extend與mixin差異: https://ithelp.ithome.com.tw/articles/10205291

參考文件:
https://www.w3cplus.com/preprocessor/Sass-control-directives-if-for-each-while.html
https://github.com/twbs/bootstrap/tree/v4-dev/scss


上一篇
SASS : for應用- Grid網格
下一篇
SASS : each、while
系列文
sass&css 30天學習日誌30

尚未有邦友留言

立即登入留言