超級愛SASS的除法功能!
只要一個容器我想多切幾份,就可以切幾份給我~
對於一個數學不好又很懶得打開手機
拿起計算機、點開計算器換算的懶人者 ---> 我
來說簡直是至上光輝的好用功能啊!
最開始當然是使用基本款! (以下使用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; // 使用加(+)號
}
這部份是我還沒嚐試過的,這幾天要來試完一下~
如果好奇者我附上相關連結,可以一起研究試看看喔!
相關參考資料: