iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 14
1
自我挑戰組

蛻變事實-UI設計師勇闖前端城系列 第 14

[蛻變事實/D14] 設計師勇闖前端城-( SASS & SCSS 這怕怕的"程式鬼影"在哪兒!-P1)

只要看到相關於 JavaScript 或 jQuery,
讓我第一個想到的就是

$ 
var ...
function(){....} 

這些字符好可怕!!!!!

一朝怕蛇咬,十年怕草繩,這句話說的沒錯~
這些開場就會讓我腦門很空白 @@!/images/emoticon/emoticon04.gif

但自從逼自己先嚐嚐用SASS來寫網站的甜,就慢慢愛上 「$、%」
雖然活用SASS部份還是很菜菜啊~~~~
不過想一想如果在每一次練習就加入一點點,終就是熟能生巧的!(~~~遠目~~~)


開啟內心面對這一切,除了最開始要給自己壓力外~
另一個想的,其實從設計稿 > 轉成為真正的網頁
有幾個設定是每個人都會遇到的!如:
每個專案一定要遇到調性
全網色彩規定
全網各類字級

以上這些基本的設定,
用SASS 最~最~最~基本的設定就可以輕輕鬆的設定了!
除了方便外,你就默默的嚐到SASS甜頭囉!
如我這個範例,在開場先設定好需要的變數
後面在套用上就容易的多!
而且簡單的設定,還可以有簡單的換算
對於沒耐心又對一定設定常搞混的人,超適合用!

DEMO

這範例是最基本的,
雖然是基本但發現對於網站最視覺化的「定調」,也是最實際的設定了!
當一拿到視覺設計提供的guideline,
不管SASS會多深,就可以先將基本設定建置好並分類
如昨天的文章寫的,依個人或團隊的工作習慣,建好模組化
再依續分為: _base.scss 或 _module.scss 等等...各種分類的檔案

等到... 老闆或客戶說:「ㄟ~這改一下!」
這時候就要改的SCSS呼叫出來
一個動作就全改好啦~/images/emoticon/emoticon07.gif

當然,一樣要說是改了三天三夜,頭髮都花白了 XD
看能不能賺個雞排來補補氣 ......哈哈哈哈


上一篇
[蛻變事實/D13] 設計師勇闖前端城-( SASS & SCSS 的@import 是什麼?)
下一篇
[蛻變事實/D15] 設計師勇闖前端城-(HTML檔上那些head的小細節)
系列文
蛻變事實-UI設計師勇闖前端城35

尚未有邦友留言

立即登入留言