iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 21
1
自我挑戰組

蛻變事實-UI設計師勇闖前端城系列 第 21

[蛻變事實/D21] 設計師勇闖前端城-(懶得用腦:SASS 除法-寬度計算不用腦)

  • 分享至 

  • xImage
  •  

超級愛SASS的除法功能!
只要一個容器我想多切幾份,就可以切幾份給我~
對於一個數學不好又很懶得打開手機
拿起計算機、點開計算器換算的懶人者 ---> 我
來說簡直是至上光輝的好用功能啊!/images/emoticon/emoticon07.gif

最開始當然是使用基本款! (以下使用SCSS來說明)

直接使用式

.box{
  width: (100px / 2);  //直接在編程中自定義無先設定變數
}

注意:/符號在CSS中已經作為一種符號使用! 所以記得如果不是用變數寫法,一定要加"()"括號才會正常轉換為CSS!

在CSS就會自動編譯成

.box {
  width: 50px;
}



變數定義使用式

$width: 1000px;  //先定義容器寬度,再套用至下面的編程(要記得變數要有!才能算出東西啊)
.box{
 width: $width/2;  // 使用了變數,然後在下方編程中用除法來幫你算
}

在CSS就會自動編譯成

.box {
  width: 500px; 
}

慢慢的就再看看別人的寫法
最近看到一篇
用函数、用圓括號、用(+)號,來做除法運算!(如以下這段別人的CODE)

// scss
 {
  width: round(1.5px)/2;        // 使用函数
  height: (500px/2);          // 使用圆括号
  margin-left: 5px + 8px/2px; // 使用加(+)號
  padding-left: + 100px / 2;   // 使用加(+)號
}

這部份是我還沒嚐試過的,這幾天要來試完一下~
如果好奇者我附上相關連結,可以一起研究試看看喔!

相關參考資料:


上一篇
[蛻變事實/D20] 設計師勇闖前端城-(求解文:關於SASS存檔自動有空白行問題)
下一篇
[蛻變事實/D22] 設計師勇闖前端城-(無扣不成才,無錯不成鋼)
系列文
蛻變事實-UI設計師勇闖前端城35
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言