不知不覺來到第17篇
(其實超有感覺，每天打文章爆累呀
還要小心別把公司的東西送出去)

朋友抱怨說希望我也可以寫點後端實務的東西
但我回:麥修海呀~我還想要有工作，以後找工作也不想被黑

是的，工程師的涵養之一就是對於"自己的"飯碗不要讓人看到你的手太賤
甚麼意思呢?
公司有許多的utility包，也有很多包對於別的工程師是已經封起來了
尤其是後臺工程師，為了防止源代碼流出被找漏洞

所以這時候就"別正大光明"的手賤反編譯他還把他拿去問人
但優秀的工程師其實又需要點好奇心，耐心，與駭客精神

變強最快的方法就是去看大師寫的code或許你語法看不懂
但去揣摩他的邏輯，與設計思維，對自己的程式會很有幫助

最近在鐵人賽文章亂逛
居然有人寫js的設計模式，太屌了
JS 設計模式

一起來奇文共賞一下
哪天一定要把這系列文章全追了

工作一如既往的忙，前兩天太高能，今天來點基礎的吧，西甲~

不負責語文小常識:西甲是韓文開始的發音

簡單介紹幾個SCSS常用的東西與特性
先從最基礎的

1. SCSS的變數
   • 格式 : $value-name
   • 規範:一般來說SCSS會用"-"來做區隔(因為CSS中大部分也是這樣寫)，但很多寫SCSS的是前端工程師，所以也有$value_name與$valueName之類的寫法，SCSS都吃
   • 說明: 在大部分的情況下，我們會直接拿變數來做運算，如果要直接將變數的值放入CSS中請使用#{$value-name}可省去許多除錯，然而如果需要運算請將變數與運算元用空白隔開，並且用圓括號包起來
   • 範例:
     • $fonth1:14px; $color: #ffffff;
     1. font-size: ($fonth1 - 3);
     2. color: #{$color};
   • 編譯後:
     1. font-size:11px;
     2. color:#ffffff
2. SCSS的匯入
   • 格式: @import 'Scss File Url'
   • 規範: 如果看官們是使用Koala之類的編譯器的話會自動設置文件開頭為下劃線的檔案不編譯"_fileName"，如果是vscode的話則需要去設定區(setting.json) (註一)
   • 說明:SCSS的匯入有先後順序，比起匯入比較像去指定的位址取得文件後幫看官們{ctrl+A=>ctrl+C=>ctrl+V}是的，就是這麼敷衍，所以會有先後順序
     如果變數的宣告匯入在使用之後，那麼編譯時就會出問題，其他也包括函數、@mixin等宣告

//註一
`"easysass.excludeRegex": "^+"

3. SCSS的巢狀
   • 格式:(註二)
   • 規範:外層為父類，開始往內部擴增裡面需要的樣式表
   • 說明:這個之前有略提到，簡單來說就是繼承，外面的屬性會不斷的往內生效，除非子選擇器有相同的屬性才會被覆蓋掉

//註二
//編譯前
ul {
    list-style: none;
  li {
      padding: 15px;
    a {
       color: #444;
    }
  }
}

//編譯後
ul {
  list-style: none;
}

ul li {
  padding: 15px;
}

ul li a {
  color: #444;
}

4. SCSS的混和
   • 格式:
   1. 宣告:@mixin mixinName(parameter)
   2. 使用:@include mixinName(parameter)
   • 規範: 小駝峰式命名法因為它類似於其他程式語言的方法
   • 說明: 這是SCSS很強大的方法，類似是個函式或是一群值的組合，可以傳入參數，進行運算，相對於SCSS的extend來說bug比較少，而且也可以設定預設值，如果不傳東西進去變會使用預設值
   • 範例:

@mixin postion($top:'50%', $left:'50%') {
    position: absolute;
    top: $top;
    left: $left;
    transform: translate(-50%, -50%);
}
@include postion(40%, 50%);

5. scss的extend
   • 這東西很多功能跟mixin類似，而且還有許多BUG，所以這次系列不做介紹
6. SCSS的函數
   • 格式:(註一)
   • 說明:他與mixin最大的不同在於它比較常用於返回值，並且可以使用@if、@each等等的流程控制

@function functionName ($value) {
  @return 100% / $value;
}

7. SCSS的註解
   • type1://編譯後會消失
   • type2:/content/編譯後仍會出現於.css內

今天先到這拉~
工作超多的，年關將近，老闆要生年終

明天我們將介紹各種流程控制的注意與一些SCSS的BUG
然後我們將結束SCSS的文章
(寫超膩的呀，我們直接開始時作範例好了，
花好幾篇做一個應該是個不錯的選擇)