iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 19
0
自我挑戰組

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

SASS : #{ } 插值

  • 分享至 

  • xImage
  •  

css使用calc可提升計算的效率
https://ithelp.ithome.com.tw/articles/10202197
但如果在使用Sass時候,把calc套用在變數上面,則編譯為css時候,會原封不動把變數也放進去
如下圖

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

網頁畫面為崩壞狀態

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

解決方式:

把calc括弧裡面的變數放在下面語法中,就可順利編譯

#{ }

如果sass遇到有無法編譯為css的狀況時,會去使用#{ }

在sass文件中也有說明:
http://sass-lang.com/documentation/file.SASS_REFERENCE.html#interpolation_

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

其他說明:
Sass Variable in CSS calc() function
https://stackoverflow.com/questions/17982111/sass-variable-in-css-calc-function

結果如下圖:

https://ithelp.ithome.com.tw/upload/images/20200412/201073218xcnIPpNkJ.png

網頁畫面:

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


上一篇
SASS : 變數-運算單位
下一篇
SASS : extend繼承
系列文
sass&css 30天學習日誌30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言