iT邦幫忙

2019 iT 邦幫忙鐵人賽
DAY 19
0
自我挑戰組

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

SASS : #{ } 插值

2019鐵人賽
3328 瀏覽

  • 分享至 

  • 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 篇
  1. 26
    SASS : if else應用- border radius
  2. 27
    SASS : each、while
  3. 28
    SASS : SASS Maps - get、merge、remove
  4. 29
    SASS : SASS Maps - keys、values、has-key
  5. 30
    SASS : Color Function
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22195 篇
完賽人數
600 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙