影片教學請點選下圖連結↓ 以下文章同步於Github。 進入主題 目前已經有軟體可以編譯Sass與Susy2, 例如Fire.app、codekit等等,...
影片教學請點選下圖連結↓ 以下文章同步於Github。 範例程式碼 sassmeister-程式碼範例 A Sass Component in 10 Mi...
**我們需要您具備以下能力: 1、從事前端開發2年及以上,熟悉各種前端技術,包括HTML/CSS/JavaScript/Node.JS等2、具備跨終端的前端開發...
以下文章同步於Github。 相關連結 1.Sass官網 Styleguide 2.github Styleguide 3.CodePen's CSS 進入主題...
今天我們要來介紹 Sass的變數啦~~介紹之前我們必須先了解為什麼我們需要它呢??當我們原先在撰寫 css的時候假設有100個地方的顏色皆為紅色但有一天我們需要...
這一次我想聊的是關於susy所提供的grid種類, 因為他不單單只能設計RWD版型而已, 一些常見的網頁版型設定也都有支援提供, 後面如果有時間的話也會設計一個...
以下文章同步於Github。 Minimizing the Depth(最小化深度) 有的時候我們設計模組時常會因為需求變動而新增元素, 一個區塊內可能就會新增...
該如何讓兩位以上的隊友發揮1+1=3以上的更大價值, 一直以來都是公司團隊間時常需要討論的議題, 又會因為每個隊友的能力不同, 所以每間公司的團隊流程也會有所調...
影片教學請點選下圖連結↓ 以下文章同步於Github。 由於我們即將要來介紹如何透過susy2來設計responsive grid, 在那之前我想先花一章...
在開發數個網站後, 網頁設計師通常都會思考該如何化繁為簡地設計自己的開發流程, 今天則就提供一些心法讓剛碰觸Sass的朋友了解該如何整合自己的Sass資料, 範...
專案使用 SCSS 寫法,我們之前用 Gulp 來 Compile,也使用過 ASP.NET MVC Web Compiler 來處理,後者的缺點是必須使用 V...
影片教學請點選下圖連結↓ 以下文章同步於Github。 這個章節主要是要來講如何透過Susy2來設計Bootstrap的版型, 透過模仿別人設計好的RWD...
影片教學請點選下圖連結↓ 以下文章同步於Github。 這一個章節主要是要講susy2的Debug模式, 除了維持susy1就有的column顯示外, 還...
影片教學請點選下圖連結↓ 以下文章同步於Github。 先來介紹以前Sass3.2的語法, //scss .box{ color:black;...
除了閉門造車設計Sass網站設計流程外, 我自己也時常會去搜尋其他網頁設計師的Sass資源, 再去從對方的設計風格和理念找出優缺, 衡量是否該改善我自己撰寫Sa...
> 此篇會介紹三種免費的 sass 編譯方法 Live Sass Compiler 這是一款免費 VSCode 插件,會自動將所有 sass、scss...
延續昨天的版面, 已將所有的大框架建立好了, 這裡先來提自己的排版流程習慣: 1.我習慣先把大框架設定用好後,再來微調各元素間的距離。 2.在排網頁時,我會先將...
text-shadow算是CSS3中較早出現的語法,而且不需要打前輟詞就能夠執行,text-shadow是一個很簡單的效果,但是可以有非常多的變化。 本篇CSS...
在過去我們只要使用色碼來表示顏色,色碼是用三組十六進制數位表示,每位元組從00到FF,相當十進位數位從0到255...,而現在我們有了新的屬性alpha(透明度...
Outline 主要分成四個部份 安裝 Sass 預處理器,在 SFC 檔使用 SCSS 撰寫 style 區域引入 SCSS 樣式或變數 全域引入 SCSS...
以下文章同步於Github。 這篇分享會比較雜一些, 主要是分享這一兩年使用Sass時遇到的問題, 畢竟寫程式並不是自己一個人的事情, 有的時候會因為團隊組成、...
終於結束這45天的奇幻之旅, 真的寫得很盡興,很高興有這個活動讓我有機會整理我腦袋上的東西。 每天花上8~12小時不間斷地錄製教學影片和撰寫文章, 最初的目的是...
影片教學請點選下圖連結↓ 以下文章同步於Github。 我遇過許多朋友都提到, 他們很想要學好susy, 但是真的有案子要用的時候, 卻又不知道該如何下手...
影片教學請點選下圖連結↓ 以下文章同步於Github。 程式碼連結 SMACSS - Module 進入主題 Module意思是一個獨立的CSS組件或單一...
今天參加了MOPCON,所以來介紹簡單一點的。承前篇,Flex是為了改善過去的CSS2排版模式所衍生出的新語法,本章則要介紹他的對齊方式。 CSS範例:http...
本篇CSS效果發表於http://ashareaday.wcc.tw/#2013-10-06 (建議使用Chrome瀏覽器) 假日都來介紹些單篇的主題吧~,今天...
影片教學請點選下圖連結↓ 以下文章同步於Github。 上個章節講了susy2的簡易設定方式, 接著我們來看它預設的全域設定, susy2 global-...
分享與記錄個人使用 scss 時的那些 wow 點 在前端學習進度上,目前走到了 Javascipt,幾週前開啓 scss 時,感到有點陌生啊~~ 人的記憶不可...
本篇CSS效果發表於http://ashareaday.wcc.tw/#2013-10-13 (建議使用Chrome瀏覽器) 這篇要介紹的是noscript的C...
以下文章同步於Github。 以目前台灣比較熱門的CSS設計模式有: 1.SMACSS 2.OOCSS 3/BEM (較少人用,但觀念時常被提起) 4/MVCS...