iT邦幫忙

鐵人檔案

2019 iT 邦幫忙鐵人賽
回列表
自我挑戰組

sass&css 30天學習日誌 系列

參加第二次鐵人賽,藉由網頁排版30天日誌,期望排版速度和效率能慢慢變快!!

鐵人鍊成 | 共 30 篇文章 | 61 人訂閱 訂閱系列文 RSS系列文
DAY 21

SASS : Function 與 數值設定

使用css一定會時常會依照各種需求調整寬度和高度,每次一個個去要找相關數值都很不方便,例如改產品欄位間距,旁邊的側邊欄位或是圖片欄位也要微調 在sass中可用...

2018-10-25 ‧ 由 yuski 分享
DAY 22

SASS : extend與mixin差異

extend經常與mixin比較,是因為他們共通點是蒐集常用語法並模組化mixin 介紹: https://ithelp.ithome.com.tw/arti...

2018-10-26 ‧ 由 yuski 分享
DAY 23

SASS : extend、mixin與function應用

網頁製作常看到不同字級,如h1、h2、h3…等等,這些是依照網頁種種情境下所產生的規範語法也因此網頁漸漸達到模組化,後來也衍生出UI Kit,這種針對各部分所...

2018-10-27 ‧ 由 yuski 分享
DAY 24

SASS : Function應用-單位轉換

網頁尺寸單位因為因應RWD裝置大小而新增rem,他和em常常被拿來比較簡單來說: 1rem= HTML,body根元素 (root element) 設置的f...

2018-10-28 ‧ 由 yuski 分享
DAY 25

SASS : for應用- Grid網格

sass for迴圈有兩種 : @for $var from <start> through <end> //從start開始到end...

2018-10-29 ‧ 由 yuski 分享
DAY 26

SASS : if else應用- border radius

sass 中的 if else是當條件為true時執行內容,當條件為false時執行其他內容 : @if 是用在判斷如果符合條件,就執行內容,之前在 「ext...

2018-10-30 ‧ 由 yuski 分享
DAY 27

SASS : each、while

@each 常用於網站要插入多個icon圖示,圖片網址都一樣,但是圖片名稱都不一樣,這種重複性的工作很適合使用@each,也就是把列表內的數值,一一導入並列出來...

2018-10-31 ‧ 由 yuski 分享
DAY 28

SASS : SASS Maps - get、merge、remove

sass一旦變數變多就很難管理,例如顏色、文字大小、icon等等,所以就需要一個整合變數的工具,也就是sass maps 使用前要注意Sass Maps 是...

2018-11-01 ‧ 由 yuski 分享
DAY 29

SASS : SASS Maps - keys、values、has-key

之前介紹SASS Maps 三個function項目,接著繼續用簡單範例解釋後面3個項目 map-keys($map) map-values($map) ma...

2018-11-02 ‧ 由 yuski 分享
DAY 30

SASS : Color Function

顏色通常可分為色相、飽和度、亮度,而運用在網頁上通常是使用RGB和16進位色彩(HEX) //黑色 RGB : RGB(0,0,0) HEX : #000000...

2018-11-03 ‧ 由 yuski 分享