2018年10月17日 星期三

【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};
}

}


閱讀更多 »
Posted by 於 沒有留言:
標籤：

2018年10月1日 星期一

【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這樣寫也能達到一樣的效果

閱讀更多 »
Posted by 於 沒有留言:
標籤：

2018年9月14日 星期五

【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(變數) = 定義一個變數名，並決定這個變數名的值（可以是數字、單位、顏色...）
取用的時候直接寫 $變數名 
例如：

閱讀更多 »
Posted by 於 沒有留言:
標籤：

2018年9月2日 星期日

【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個，整段看起來就會很恐怖。而且一直寫重複的名稱讓我覺得自己像個智障= =|||

閱讀更多 »
Posted by 於 沒有留言:
標籤：

2018年8月18日 星期六

【SCSS】2.5 Variables(變數)

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


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

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


閱讀更多 »
Posted by 於 沒有留言:
標籤：

2018年8月6日 星期一

【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 );
}

閱讀更多 »
Posted by 於 沒有留言:
標籤：

2018年7月23日 星期一

【SCSS】2.3 @import (引用)

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





閱讀更多 »
Posted by 於 沒有留言:
標籤：

2018年7月17日 星期二

【SCSS】2.2 註解種類


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

閱讀更多 »
Posted by 於 沒有留言:
標籤：

2018年7月1日 星期日

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

本來想依照BootStrap建立資料及與相關檔案，但是他的架構實在太龐大，不適合連注音都看不懂的幼幼班。媽媽說學習要按部就班，先學爬在學走！！所以先從小的架構開始寫起。
閱讀更多 »
Posted by 於 沒有留言:
標籤：

2018年6月20日 星期三

【SCSS】2.0 學習日誌


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


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


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



會的 不會的
  1. HTML熟
  2. CSS熟
  3. 具有RWD排版概念
 除了左邊的，其他程式全都不會
閱讀更多 »
Posted by 於 沒有留言:
標籤：

2018年6月5日 星期二

【筆記】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』

閱讀更多 »
Posted by 於 沒有留言:
標籤： ,

2018年6月2日 星期六

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

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



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



這時會進入這個畫面



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



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



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






Posted by 於 沒有留言:
標籤：

2018年5月25日 星期五

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


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



閱讀更多 »
Posted by 於 沒有留言:
標籤：

2018年5月1日 星期二

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

在sublime，我安裝的外掛有

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

Alignment
程式碼對齊

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

Emmet
程式速寫

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

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

閱讀更多 »
Posted by 於 沒有留言:
標籤：

2018年4月30日 星期一

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

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

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



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

閱讀更多 »
Posted by 於 沒有留言:
標籤：

2018年4月17日 星期二

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

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

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

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

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


閱讀更多 »
Posted by 於 沒有留言:
標籤：

2018年4月1日 星期日

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

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

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


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

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

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


閱讀更多 »
Posted by 於 沒有留言:
標籤：

2018年3月29日 星期四

【筆記】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

Posted by 於 沒有留言:
標籤：

2018年3月19日 星期一

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



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

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


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

TextColorDark
textColorDark


閱讀更多 »
Posted by 於 沒有留言:
標籤：

2018年2月10日 星期六

【筆記】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的默認插入行為。
Safari的默認插入行為



閱讀更多 »
Posted by 於 沒有留言:
訂閱： 文章 (Atom)