Operators

有時候畫面的比例，會影響 CSS 顯示的效果，而在 SASS 中，我們可以用數學的運算公式去調整 style 中的內容，讓設計樣式更加聰明的去適應畫面。基本可運用的運算子像是 +, -, *, /, % 都可以用作 SASS 的計算。

實作

// operator.sass
$deep-blue: #00beb5
$primary-button-color: #007ea5
$main-width: 960px

.container
    background-color: $deep-blue
    padding: 10px
    width: $main-width

    button
        color: $primary-button-color
        font-size: 24px
        padding: 16px
        width: $main-width*7/10
        height: 100%

    .button-small
        font-size: 12px
        padding: 8px
        width: $main-width*3/10

首先，訂定一個固定大小的 container，練習運用運算子，排版一組 button，讓他們能夠依照比例排列在同一行中。

container 的大小用參數訂為 960 px，如果之後有要統一更改大小，也可以從參數一次改，不用到下面其他 class 中去改 property。

在 container 下的 button 做一些基本的設置，並且於 width 運算，將 main-width 切分為十分之七。

另設一個小 button class 他會繼承原本的 button 樣式，並且有套用到這個 class 的 button 會再加上 small 的其他設定，width 的部分切分為十分之三。

// App.js
import "./App.css";
import "./assets/sass/operator.sass";
function App() {
  return (
    <div className="App">
      <div className="container">
        <button>click me !</button>
        <button className="button-small">click me !</button>
        <button className="button-small">click me !</button>
        <button>click me !</button>
      </div>
    </div>
  );
}

export default App;

之後在 App.js 中引入 sass，然後放幾顆 button 來試試看效果。

就會獲得完美分配好的 button ~

雖然要切分 column 的話，我會偏好使用 grid 系統去切，比較快，但是有時候遇到奇數或是要特別份數的 column 的時候，直接針對 css 去做計算其實是比較方便的，但兩種方法有利有弊，就看大家選擇怎麼使用囉！

除此之外，也歡迎大家走走逛逛關於我們團隊夥伴的文章

lu23770127 - SASS 基礎初學三十天

10u1 - 糟了！是世界奇觀！

juck30808 - Python - 數位行銷分析與 Youtube API 教學

HLD - 淺談物件導向與Design Pattern介紹

SiQing47 - 前端？後端？你早晚都要全端的，何不從現在開始？