今天要先來介紹 Sass @each 與 map Sass map-get 這裡要先宣告變數(有點類似js宣告物件) $themes:( //key...
這裡要先介紹為什麼要 模組化格線系統?? 因為若因 功能性命名區塊若命名為某個功能之後就不會運用在其他區塊 模組化格線 優點避免命名上的問題整體性高可用性高...
7+1 Sass 設計模式: https://gist.github.com/rveitch/84cea9650092119527bc 這裡可以看到它 創建了一...
BEMB: Block(區塊)E: Element(元素) __ 雙下底線M: Modifire(修飾符號) -- 雙中線 官網:http://getbem.c...
今天要來介紹 CSS 命名首先先來介紹駝峰式命名:https://zh.wikipedia.org/wiki/%E9%A7%9D%E5%B3%B0%E5%BC%...
OOCSS 也是一種設計模式它強調兩點 結構與樣式分離 容器與內容分離 在我們介紹 容器與內容分離 之前我們時常在寫css的時候會 .header...
這裡必須先介紹為什麼我們需要模組化呢?這裡舉一個例子我們尚未模組化的css //基本按鈕 .btn{ display: inline-block; wi...
今天要來介紹 Sass/Css 設計模式啦~~首先我們先認識 最好入門的 Smacss官網: http://smacss.com/ Smacss Base 首...
今天我們要來介紹Sass Mixin 與 content的搭配 來解決RWD Scss: @mixin pad{ @media(max-width: 7...
今天要來介紹 Sass Mixin那究竟什麼是 Mixin呢??簡單來說Mixin能幫你記住 css技巧讓你不用再因回想原理而去google(把它想像成一個包裝...
今天我們要來學習如何把Sass切分支許多檔案這樣會使我們比較容易管理 @import(匯入)可將 Scss檔案彙整成一支 css檔案簡單來說就是我們可以把 Sc...
今天我們要來介紹 Sass的變數啦~~介紹之前我們必須先了解為什麼我們需要它呢??當我們原先在撰寫 css的時候假設有100個地方的顏色皆為紅色但有一天我們需要...
在介紹今天的內容之前推薦一個不錯的東西那就是 CodePen啦https://codepen.io/your-work可以先上撰寫程式碼連 Sass也支援 非常...
第一次參加鐵人賽非常的開心又緊張啊(害怕自己寫錯哈哈)不過總覺得每日發文會上癮雖然可能沒人會看但重點在於 自己 是否有成長只要有 那就值得啦~~~ 雖然30天說...
好的~上一篇已經學會了 Sass 基本的語法應用,這篇來介紹 Sass 的進階語法,讓你會一度有 CSS 是程式語言的錯覺。 先記住這兩個語法 定義變數va...
我假設你已經會... 使用 CSS 定義樣式(選用適當的選擇器定義屬性與屬性值) 已配置 Sass 編譯 CSS 的開發環境(若還沒,使用線上編輯器 Cod...
本系列文以製作專案為主軸,紀錄小弟學習React以及GrahQL的過程。主要是記下重點步驟以及我覺得需要記憶的部分,有覺得不明確的地方還請留言多多指教。 雖...
Sass 我們應該大部分的人都有聽過那它到底是什麼東西呢??我們先來介紹它到底是啥 維基百科https://zh.wikipedia.org/wiki/Sass...
話不多說,先上成果! 思考迴路: 撰寫keyframes使每個點上下移動(transform),我們命名這個keyframe為waving 每個點都具備相同...
Sass/Scss是一個非常好用的預處理器,所謂預處理器,就是可以在我們轉變成CSS之前,更有結構性寫、簡潔、清晰且好維護的 CSS 程式碼,在大型專案中可說是...
**我們需要您具備以下能力: 1、從事前端開發2年及以上,熟悉各種前端技術,包括HTML/CSS/JavaScript/Node.JS等2、具備跨終端的前端開發...
之前介紹過 SCSS 的基礎功能了,沒看過可以看這裡唷,這次來介紹一些小知識與進階的功能吧! SCSS 小知識 註解 SCSS 的註解有分為兩種,一種會被輸出一...
接續上篇繼續介紹剩下的功能,這邊就比較偏程式面,設計函式會比較常使用到,GO!GO!GO! 迴圈部分 迴圈可使用 @each 與 @for 來產生重複的樣式,使...
Variable$variablename: valuedefine all global variables in "_globals.sass...
SASS / SCSS 簡介 SASS 是 CSS 的預處理器,它能編譯出原生 CSS,且提供了更多程式面的東西來撰寫 CSS,讓其更簡潔、更好維護,而 SAS...
分享與記錄個人使用 scss 時的那些 wow 點 在前端學習進度上,目前走到了 Javascipt,幾週前開啓 scss 時,感到有點陌生啊~~ 人的記憶不可...
良好程式碼的優點大同小異。不好的程式碼的糙點卻各有巧妙之處。 此篇的 coding 建議,不適用於 C 前置處理器 C 語言做到 template 或 g...
CSS 它有先後順序,後面會蓋掉前面! <link rel="stylesheet" href="style/style1....
先來看看這張圖 各位看出什麼了嗎? CSS 大部份人都不陌生,如果是有在摸索網頁或有在寫BLOG的朋友們,多多少少已經碰過啦 SASS & SCSS...
VSCode 吸引人的原因除了本身內建的功能相當多,VSCode 能夠安裝的插件也是又多又好用又方便呀~使用插件可以更有品質或是更快速的進行開發,前一篇為大家介...