最近上班又開始回去寫後端
框架是java古老的S2SH

設定之複雜
新手看起來頭痛
老手看起來眼酸

比起後來突然起來的python degengo與node.js
有種快長蜘蛛網的感覺

上次談到會說一點我自認為身為一位工程師的涵養
其實說簡單點就是

對身內之物感到不足，不斷提升自己

對身外之物感到知足，不去比較計較

也不是說這是甚麼大道理之類的
而是在這個技術真的用日新月異來比喻還有點慢的時代對自己的話

抱怨的話不多說
第一句
現在小學生就會寫程式
現在22歲入行到44歲憑什麼跟他們比?
他們跟你一樣寫code十幾年喔

第二句
隔壁同事好廢，但他跳槽過得比我好
我帶出來的菜鳥，薪水居然比我高
心裡幹歸幹，但為甚麼事情會變這樣?
是不是第一句沒做好，如果不是，是不是沒燒好香?
如果都不是，總不能每天7pupu的過日子吧?

好啦，處女座可能就是對自己有點變態
才會這樣想，但對自己多投資點總不是壞事
(不上進也別寫個爛code去害接你案子的人，小心現世報)

作者:IT狗 怕FB位址會變，所以載下來

恩，大概就上面這種感覺吧，小心噴嚏噴不完

好了今天聊到這，我們切回正題喔喔喔

前面我們說好用工程師的做法來寫CSS
每次都拿些小兒科的東西來敷衍看官們
相信看官們都想取消訂閱了

接下來介紹稍微深一點點的東西
大概像花蓮七星潭的沙灘吧

一一一\____

大概向上面那樣
小時候去玩水嚇死我了呢，一步滅頂

為了不要嚇到人先來點簡單的範例吧

既然我們的標題叫前端三本柱大混戰那這時候就讓一點JS的觀念進來吧

JS裡面有許多的物件概念(Object)以及key-value
SCSS也是相同的

以及其他從幼幼班就知道for迴圈，if判斷式，以及each遍立等等
前端工程師看官們看到這裡是否覺得莫名其妙
CSS夢靨也可以用程式自動跑出來?

是的，那我們開始吧

這篇接下來會有點18X

(不是腥羶色，我怕被停賽，而是開發時間小於18小時的工程師語錄人們可能會真的看不懂)

Q:至於為何是18小時?ANS: ....噱頭(而且要對標題有個交代，騙瀏覽數)

...嘛...不然每次都拿些小兒科的東西
怕會被說我都瞧不起看官們
或著自己根本也不會只是想參賽湊熱鬧
(這比賽以後我還想拿來當履歷用耶)

SCSS進階基礎篇開始囉!!

首先從最基本的物件宣告

$adlist: (
    cut:rgb(250, 218, 218),
    warn:rgb(248, 248, 147),
    info:#c7cce6,
    other:rgb(27, 109, 176)
);

• 如果不看等號與花括號，是否跟js的物件宣告一樣呢?
  • 用白話文也解釋這段的話就是一個$adlist的[物件陣列]裡面有四個記憶體位址，每個記憶體位址裡面都有一組key-value，
  • • 因為SCSS的技術文章相對JS較少，如果覺得太難請去搜尋js的物件陣列，可以得到相關解答。

既然說到了key-value與[物件陣列]那麼一定有相對應的其他遍歷方法與取直方法

今天先來簡單介紹遍歷(@for)方法
再SCSS中所有的程式關鍵字前面都要加@

舉凡:@if，@for，@each

那麼來看一下下面的綜合應用

 .rollad {
            border-radius: 50px;
            padding: 8px 15px;
            font-size: 0.8rem;
            line-height: 50%;

            @each $item,$color in $adlist {
                &.#{$item} {
                    color: #{$color};
                }
            }
        
        }

看起來很難很複雜?

沒關係我直接貼編譯後長怎樣我們一起對照著看

.rollad {
  border-radius: 50px;
  padding: 8px 15px;
  font-size: 0.8rem;
  line-height: 50%;
}

.rollad.cut {
  color: #fadada;
}

.rollad.warn {
  color: #f8f893;
}

.rollad.info {
  color: #c7cce6;
}

.rollad.other {
  color: #1b6db0;
}

沒錯，這樣看起來是否太神奇?
那我們來針對SCSS來說文解字

border-radius: 50px;
padding: 8px 15px;
font-size: 0.8rem;
line-height: 50%;

這些用來泛指.rollad
的基本屬性，所有前面冠有.rollad的CSS樣式表都會有這些屬性
(在子屬性沒有覆蓋的情況下)
這個並不需要特別說明
(看不懂的看官們往前看幾篇吧)

重點來了

$adlist: (
    cut:rgb(250, 218, 218),
    warn:rgb(248, 248, 147),
    info:#c7cce6,
    other:rgb(27, 109, 176)
);
-------------------------------
@each $item,$color in $adlist {
    &.#{$item} {
        color: #{$color};
    }
}

這裡可以把他解讀成看官們在寫JS時使用foreach
$adlist 是準備被遍歷的物件

$item 是指key，也就是cut、warn、info、other
$color 是指value，也就是後面那串顏色

&:代表會直接連著進行輸出，中間並不會有空白
而這樣的結果在CSS中表示，這個htmltag
必須同時有這兩種屬性，樣式才會被套用

在SCSS中"#{valueName}"這裡面的東西會被強制替換成對應變數的值

而這樣出來的結果就會有四種廣告背景色
可以用程式去接API判斷要用哪一種
未來要改顏色時，一般我們會把變數宣告在最上面，所以直接在最上面改就可以了，相當方便

好的，今天的文章對新手十分不友善
但應該也覺得有點點充實吧

從日本回來加上學新技術，海量的事情要做
根本沒時間去找趣圖呀

既然文章已經不好笑了，至少要有點用吧
(連顏文字都沒時間挑呀呀呀)