【CSS】 粘性定位 position: sticky;

CSS 的定位屬性有下列幾種

• position: static;
• position: relative;
• position: fixed;
• position: absolute;
• position: sticky;

fixed 很常被使用在 header、footer、右側滑動廣告
fixed 作為 header使用時，內容區塊往往要搭配 padding-top、 margin-top、 top，避面內容被刊頭遮擋住，用在 footer 時也會產生相同的問題。

【CSS】特殊符號：& 、+ ~ > ^

在CSS裡有一種用法叫做『選擇器』，選擇器的種類繁多

最古老又常用的連接設定

1. :link
2. :visited
3. :active
4. :hover

方便的計數設定

1. :first-of-type
2. :last-of-type
3. :nth-child(n)

還有先前介紹的:not(selector)

Wacom 數位筆無法按壓選取

今天更新驅動程式後，發現Wacom 數位筆無法按壓選取，這簡直是不斷逆毛摸，超令人爆青筋。查了許久發現要改設定

打開數位板程式設定：

1. 選擇其他所有程式
2. 選擇鏡射
3. 下方使用Windows Ink ，取消勾選

【CSS】偽元素:not，使用過後保證愛上

在CSS中，:not(   )的意思就是，(  )內的東西不要套用到設定的屬性。
(  )內放置的範圍非常廣，以下介紹幾種使用方式：

1. className
2. 偽類  :hover
3. 偽類  :last-child 
4. 多個not合併使用

1. className
設定button的背景色，但是在  button class=“disabled” 的時候不要套用。

button:not(.disabled){ background: #333 }

【SCSS】2.9用SCSS寫root（第一次就失敗）

Bootstrap的SCSS資料夾內，有一枚 _root.scss，這個檔案轉譯之後就像是CSS註解，可以把一些設定的基本規則寫在上面。

Bootstrap的 _root.scss 的寫的很簡單，只有顏色定義、跟斷點。
顏色的寫法很簡單，只用到 Variables(變數) + @each 迴圈
然後我就滿心歡喜寫下了這個

SCSS

:root {

// Custom variable values only support SassScript inside `#{}`.

@each $color, $value in $colors {

  --#{$color}: #{$value};

}

@each $color, $value in $theme-colors {

  --#{$color}: #{$value};

}

}

【SCSS】2.8 @extend (共用)

@extend翻譯成共用或是繼承，在瀏覽一些別人的學習心得時發現，有人認為 @extand 會讓CSS品質變差，所以不建議使用。


真正在執行專案的時候，我是不太使用@extend，雖然在SCSS 裡寫@extend會讓程式碼變短，看似很是方便，但解譯後的CSS不易閱讀，整體的CSS體積也會變大。如果小專案也許CSS微胖並沒有什麼影響，但是大專案對CSS的K數是很斤斤計較的（就像女人對自己的體重一樣，能少0.1Kg也是好的！！！）。


我們用實際的語法來說明

語法範例SCSS

//設定小圖示

.miao-icon{ display: inline-block; width: 24px; height: 24px; vertical-align: middle; background: url(../Images/icon.png) no-repeat 80px 80px; background-size: 48px;}

.miao-icon_prev {

@extend .miao-icon;

 background-position: 0px 0px;

}

.miao-icon_next     { @extend .miao-icon; background-position: 0px -24px;}

.miao-icon_up       { @extend .miao-icon; background-position: 0px -48px;}

.miao-icon_down     { @extend .miao-icon; background-position: 0px -72px;}

編譯後CSS

.miao-icon, .miao-icon_prev, .miao-icon_next, .miao-icon_up, .miao-icon_down {

display: inline-block;

width: 24px;

height: 24px;

vertical-align: middle;

background: url(../Images/icon.png) no-repeat 80px 80px;

background-size: 48px;

}

.miao-icon_prev { background-position: 0px 0px;}

.miao-icon_next { background-position: 0px -24px;}

.miao-icon_up { background-position: 0px -48px;}

.miao-icon_down { background-position: 0px -72px;}

若是真的要使用的話，要有所限制，建議：

1. 層次越扁平越好，最好是一層
2. 單元性使用，不要跨單元

在原始CSS裡有個語法類似@extend，叫做[class*='miao-icon']用上述的例子，純CSS這樣寫也能達到一樣的效果

【SCSS】2.7 @Mixins(混合) + @include(擴充 / 繼承)

本來只想寫試寫Mixins，不過偷剪BootStrap的範例時，發現他是連同include寫在一起，我不會拆開，索性一起貼上試跑看看，誒...然後...他就轉譯成功了......


官方說法（然後我看完並不懂他再說什麼）：
http://sass.bootcss.com/docs/sass-reference/#control_directives
Mixins允許您定義可以在整個樣式表中重複使用的樣式，而無需使用非語義類.float-left。Mixins還可以包含完整的CSS規則，以及Sass文檔中其他地方允許的任何其他規則。他們甚至可以採取一些參數 ，這些參數可以讓你用很少的mixin來製作各種各樣的風格。


看完程式碼後的理解：
Variables(變數) = 定義一個變數名，並決定這個變數名的值（可以是數字、單位、顏色...）
取用的時候直接寫 $變數名 
例如：

【SCSS】2.6 map 與 @each 迴圈

延續上述的例子，當你以為寫到這樣就很迷人，那就錯了。

.color-primary {color: $primary;}

.color-warning {color: $warning;}

.color-xxxxx01 {color:...

.color-xxxxx02 {color:...

.color-xxxxx03 {color:...

.color-xxxxx04 {color:...

.color-xxxxx05 {color:...

程式碼就跟迷你裙一樣越短越好，當色碼超過10個，整段看起來就會很恐怖。而且一直寫重複的名稱讓我覺得自己像個智障= =|||

【SCSS】2.5 Variables(變數)

用設計師的角度來看，變數的概念，類似PS裡的智慧型物件，可重複使用。

功能	用來儲存值，方便重複利用
表示方式	$自己取的變數名
資料型態	Numbers、Strings、Booleans、null 值（視為空值），甚至可以使用 Lists、Maps。 數字，含小數（有單位或無單位皆可） 字串，如 "String" , 'String' , String 3 種皆可 顏色，如 blue , #0a43f9 , rgba(255, 0, 0, 0.5) 等 布林值（Booleans）： true , false 空值 null 串列，例如 $font-list: Helvetica, Arial, sans-serif; ，以空格或逗號分隔的一連串的值 鍵值映對(maps) ，例如： $map: (key1: value1, key2: value2, key3: value3); 函數參照(function references)

BootStrap將SCSS-Variables(變數)，獨立出來成立一支_Variables.scss，這的確是非常聰明的做法，當任何一隻SCSS要取用Variables(變數)的時候，都只要填入變數名稱，即可帶入進行運算。

【SCSS】2.4 @for(迴圈)

迴圈就是重複的執行的意思。迴圈包迴圈是可以的，無線迴圈是不道德的。
在此懇求說話無線迴圈的人（例如我媽)，求你行行好...改成有限迴圈，而且i < 3，口 以嗎？

這單純是為了寫範例而做的，真正在BootStrap裡的灰階，並不是這樣做的。下方範例是字體顏色+背景為rgba，  ($i)   也可以直接寫成  $i  ， 不過工程師說，用()包起來是好習慣，那就醬

語法範例SCSS

//gray字體顏色+背景 @for   $i from 1 through 9 { //從 1 到 9 共執行 9 次。   .color-gray#{$i}00 {     color: rgba( 0,0,0,($i) /10 ); } .bg-gray#{$i}00 {   background-color: rgba( 0,0,0,($i) /10 ); }

【SCSS】2.3 @import (引用)

這和css的 import 概念是一樣的，用法也類似。這裡用bootStrap當範例：

【SCSS】2.2 註解種類

1. //編譯後會消失
2. /content/編譯後會出現在.css內
3. /**/編譯後為.css的註解

【SCSS】2.1 資料夾與檔案命名

本來想依照BootStrap建立資料及與相關檔案，但是他的架構實在太龐大，不適合連注音都看不懂的幼幼班。媽媽說學習要按部就班，先學爬在學走！！所以先從小的架構開始寫起。

【SCSS】2.0 學習日誌

以下是一邊看著BootStrap（天書呀QAQ），一邊查看各種資源(包含活生生的工程師們)，試圖轉碼出來的心路歷程。


寫學習日誌是因為深知自己是金魚腦，就算現在試成功了以後也還是會忘。


為了方便找資源的夥伴們快速左轉（掩面），說明一下目前自身能力

會的	不會的
HTML熟 CSS熟 具有RWD排版概念	除了左邊的，其他程式全都不會

【筆記】1.7 VS Code 外掛 Live Sass Compile Config

撰寫SCSS， Live Sass Compile Config 外掛是絕對必要的存在，
這也是我當初從眾多軟體中決定使用 VS Code 的主因，
在此簡述一下 Live Sass Compile Config 的優點以及設定

1. 自動偵錯
安裝之後，編寫SCSS Code的過程中，
 Live Sass Compile Config 會自動檢查程式碼是否正確，
如果編譯正確，在畫面下方出現綠色的『success』
如果編譯錯誤，則出現紅色的『error』

【筆記】1.6 VS code使用習慣設定-清除句尾空白

在coding的時候，寫著寫著就會變這樣



對於頁尾空白總覺得有點逆毛
這時候只要到VS code修改設定，操作方式如下
進入：檔案 > 喜好設定 > 設定



這時會進入這個畫面



在搜尋框打上 files.trimTrailingWhitespace，然後把選項打勾



從此以後存檔時就會自動清除句尾空白（舒心～～



PS：如果無法立即使用，試試關掉VS code後再重開。

【筆記】1.5 SCSS 和 Sass 的差異比較

	SCSS	SASS
共同優點	具有變數，簡單邏輯程式、函式...等等 語法比css簡潔（很多東西不用重複寫 具有擴充性與更多彈性 適合大型專案 兼容CSS
共同缺點	進入門檻高 維護門檻高 初學者成本高 團隊協作成本提升 學之前還是要先懂css
適合對象	設計師	工程師
優點	和css相似，使用{ } 與；對於設計師來說容易上手 Bootstrap使用scss，是個很好的學習範本	程式碼縮短非常多，層次直觀 來自Python, Ruby的工程師，甚至可以用類似符號的語法編寫道具 對使用CoffeeScript的人來說，能自然的編寫mixins，函數，以及重複使用的東西 兼容SCSS
缺點		學習門檻高 安裝環境複雜 巢狀多層的時候，CSS會變得很難維護，不好讀
支援	變數、@mixin、@extend	變數、@mixin、@extend
引入@minxin	前面寫@include	前面加「+」就可以載入mixin
寫Mixin	須用｛｝將內容包住	無
寫巢狀繼承	須在繼承的父元素裡面撰寫class與class的css

【筆記】Sublime + VS code， UI 會裝的外掛

在sublime，我安裝的外掛有

package control
優先安裝，才能裝其他外掛

Alignment
程式碼對齊

AutoFileName
自動帶入，例如css要選圖片時，會自動帶出路徑>檔名

Emmet
程式速寫

Trailing Spaces
存檔時，自動去除頁尾多餘空白（完全救了我的強迫症

LiveReload
chrome也要裝擴充，存檔時自動F5

【筆記】1.4 VSCode 安裝延伸模組

安裝這些延伸模組，可以加速你的工作效率，每個人都會有自己最順手的套件組，你的不需要和我的一樣。

VSCode的外掛安裝方式，比sublime方便許多。有容易了解的介面，每一個延伸模組前都有自己的LOGO方便辨識。



以下是我安裝的套件。套件數量過多，也許會降低效能

【筆記】1.3 和 sublime 初相識的因緣和為何現在要移情別戀 VS code。

一開始在使用編輯器這點我承認自己並沒有忠誠度可言，不然其他設計師你們搜尋UltraEdit 、editPlus、Notepade++，你真的覺得有差嗎？？

一直到被推坑sublime，真是讓我驚呆了，編輯器居然可以安裝外掛，而且有非常多佛心外掛，在使用後會讓對版面龜毛毛的設計師感到舒心～～（花花開），像是自動排整齊啦、儲存的時候自動清除多餘空白、Emmet （打縮寫指令按下Tab自動完成）....

有了這些強大外掛的幫忙，不但寫程式的速度變快了，出錯的機率也變少了呢～～

sublime 的好處族繁不及備載，用google大神搜一下，讀10頁也看不完，就是因為輕量又如此好用，所以我才會拜倒石榴裙下，一拜就是5-6年，但最近我卡關了...因應工作需求，我需要學習一個新玩意兒叫做SCSS，之後再說為何選SCSS而不是SASS 或是 LESS。