【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。

【筆記】1.2 程式編輯器從 sublime 跳槽到 VS code

自寫網頁以來，換過非常多種編輯器（版本就不寫了...數字太敏感），年代順序如下

• DreamWeaver
• UltraEdit 
• editPlus
• Notepade++
• sublime
• VS code

每一次的更換都是因為工程師強力推坑

PG：這個超好用的呀，換吧換吧！！
我：是嗎？沒試過不知道誒...
PG：我來幫你灌，滑鼠給我(開始下載安裝
我：呃...這麼積極，你是有抽成嗎？

設計師用 DreamWeaer寫網頁是多麼自然，但我多年工作經驗與 DreamWeaer 的相處其實只有短短2個月...不到。不是我愛叛逆不合群，或自以為比別人厲害....硬要使用專業軟體來展現自己的不專業XDDDD，只因當時配合的工程師說

【筆記】UI + UX + 程式，概念性文章與書籍

在此備註一些概念性文章，有些文章、書籍或許很老，但正確有效的做事方式，應該是萬變不離其宗的。就像是2005年出版的 Don’t Make Me Think , 很多書中的觀念，我認為到現在依然適用。

1. 如何聰明的提問
   中文版：https://ryanhanwu.gitbooks.io/how-to-ask-questions-the-smart-way/
   英文版：http://www.catb.org/~esr/faqs/smart-questions.html
2. 
   

【筆記】1.1 檔案與參數命名的規則

檔案、參數命名有很多方式，其中區隔單字的方式像是

• 駝峰命名法
• 小駝峰式命名法：textColorDark
• 大駝峰式命名法：TextColorDark
• 連字號 - ：text-color-dark
• 下底線 _ ：text_color_dark

多年以來自己一直採用全小寫 + 下底線命名：text_color_dark，無論是資料夾、檔名、或是參數名。看似偏好一套規則適用所有類型，其實是金魚腦，記得不多又容易忘...QAQ
不過也因此一直沒發現一件事，在CSS的語法裡，屬性命名大小寫視為相異，例如：

TextColorDark
textColorDark

【筆記】iPhone X 網站設計說明

文章來源：https://webkit.org/blog/7929/designing-websites-for-iphone-x/
Sep 22, 2017 by Timothy Horton


以下關於安全區域內嵌的部分已於2017年10月31日更新，以反映iOS 11.2測試版的變化。


Safari在新iPhone X的邊緣到邊緣顯示屏上精美地顯示網站。內容會自動嵌入顯示器的安全區域內，因此不會被圓角或設備的傳感器外殼遮擋。


在<body>或<html>元素上指定頁面background-color，讓頁面的其餘部分融入，對大多數網站而言這已經十分夠用了。


下圖為Safari的默認插入行為。

2018年的19個網頁設計趨勢

原文出處：19 web design trends for 2018
https://webflow.com/blog/19-web-design-trends-for-2018
年底了，照例觀察一下明年的設計趨勢發展，並且記錄心得。

1. 更普遍的互動和動畫
   頁面中加入更多微互動的動畫，但這些動畫並不會分散使用者的注意力。
   在網頁一開始出現的時候，區塊顯示、點選導覽以後跳到頁面下方，這些呈現方式是直接，甚至可說是粗魯的。區塊直接啪一下的出現在面前，完全的功能導向但也完全的沒有美感。
   
   現在使用者習慣看到，本來隱藏的區塊在點選了某個功能之後，緩緩的漸亮然後浮現，或是以滑動的方式呈現， 這造就了一種優雅的節奏，也提升了使用上的舒適感。

2018設計趨勢心得

1. 僅僅完成配色，不代表完成易用性設計
2. 界面漂亮，能增加使用者的耐心，但解決不了基本架構不良的問題
3. PC 與 手機是截然兩種不同的設計模式
   
   以www.agoda.com的表單來說

pc	行動裝置
單元區隔會使用框線 input 會保留框線 不介意左右兩欄	背景有底色，單元區隔用白色塊 input 只剩下底線 一列一欄訊息 input、按鈕有一定高度 input 的輸入，更在意操作時的動態提醒效果（title字體變小，變色，上移）

2017設計時常出現的錯誤

可視化層次結構可能無法幫助用戶理解其內容

1. 有色區塊太多，分散視覺重點
2. 物件太多，分散視覺重點
3. 文字顏色太淺難以閱讀
4. 區塊太緊密，無法閱讀 / 區塊太鬆散，沒有段落性
5. 標題與內容區隔太遠
6. 太多線條，造成畫面混亂
7. 單元區隔不夠
8. 畫面左右不平衡
9. 字體、配圖、間距...太大，造成不精緻，甚至畫面鬆散

缺少能指（解釋1）可能會降低交互性。


來源：維基百科符號學
（解釋1）符號學中，將指示符（sign），即是單一符號或符號系統根據其傳播模式而分類。所傳播之意味以使用的編碼而確定，並且將符號分成能指（Signifier）和所指（Signified）兩部分。廣義上，這種能指可以是一個字符、一個手勢、一段聲音或者是一切所見之物。但是一個能指和所指的對應關係，只有在一個集體共同認可才可以形成，而通常來說，這不僅與語言中的詞彙相關，且聯繫到語法。符號所代表的物事，也可能會因為社會和文化關係而帶有隱意。