iT邦幫忙

sass相關文章
共有 122 則文章

技術 SCSS - 小知識與進階功能 ( 下 )

接續上篇繼續介紹剩下的功能,這邊就比較偏程式面,設計函式會比較常使用到,GO!GO!GO! 迴圈部分 迴圈可使用 @each 與 @for 來產生重複的樣式,使...

技術 SCSS - 小知識與進階功能 ( 上 )

之前介紹過 SCSS 的基礎功能了,沒看過可以看這裡唷,這次來介紹一些小知識與進階的功能吧! SCSS 小知識 註解 SCSS 的註解有分為兩種,一種會被輸出一...

技術 SCSS - 基礎功能介紹

SASS / SCSS 簡介 SASS 是 CSS 的預處理器,它能編譯出原生 CSS,且提供了更多程式面的東西來撰寫 CSS,讓其更簡潔、更好維護,而 SAS...

技術 Sass 學習筆記

Variable $variablename: value define all global variables in "_globals.sa...

鐵人賽 自我挑戰組 DAY 23

技術 Day23 學習 scss 時的那些大小事

分享與記錄個人使用 scss 時的那些 wow 點 在前端學習進度上,目前走到了 Javascipt,幾週前開啓 scss 時,感到有點陌生啊~~ 人的記憶不可...

鐵人賽 Software Development DAY 17
可不可以不要寫糙 code 系列 第 17

技術 過度依賴前置處理器

良好程式碼的優點大同小異。 不好的程式碼的糙點卻各有巧妙之處。 此篇的 coding 建議,不適用於 C 前置處理器 C 語言做到 template 或...

鐵人賽 自我挑戰組 DAY 13

技術 [蛻變事實/D13] 設計師勇闖前端城-( SASS & SCSS 的@import 是什麼?)

CSS 它有先後順序,後面會蓋掉前面! <link rel="stylesheet" href="style/style1....

鐵人賽 自我挑戰組 DAY 12

技術 [蛻變事實/D12] 設計師勇闖前端城-( SASS & SCSS & CSS 三角關係)

先來看看這張圖 各位看出什麼了嗎? CSS 大部份人都不陌生,如果是有在摸索網頁或有在寫BLOG的朋友們,多多少少已經碰過啦 SASS & SCSS...

鐵人賽 Modern Web DAY 4

技術 VSCode - 好用插件 feat. 開發小技巧

VSCode 吸引人的原因除了本身內建的功能相當多,VSCode 能夠安裝的插件也是又多又好用又方便呀~ 使用插件可以更有品質或是更快速的進行開發,前一篇為大家...

鐵人賽 Modern Web DAY 9
Webpack with ASP.NET MVC 系列 第 9

技術 ASP.NET MVC 導入 SASS

專案使用 SCSS 寫法,我們之前用 Gulp 來 Compile,也使用過 ASP.NET MVC Web Compiler 來處理,後者的缺點是必須使用 V...

鐵人賽 Modern Web DAY 26

技術 vue & vuex 26 - 使用 SASS 管理 CSS - webpack sass-loader

今天我們將改變 CSS 引用方式,改為使用 SASS 開發,管理我們的 CSS,因此 style tag 也可以寫 SCSS 囉! 今天目標: 移除從 st...

鐵人賽 Modern Web DAY 26
CSS 實戰心法 系列 第 26

技術 實戰心法 - 應避免的 Sass @extend

Sass 的 @extend 可以將相同的樣式整理再一起,在其他語言來說是非常帥氣的技法,但在 CSS 中請警慎使用。 就如同本篇鐵人賽一開始所介紹到的 OOC...

鐵人賽 Modern Web DAY 25
CSS 實戰心法 系列 第 25

技術 實戰心法 - Sass Map 快出產出大量樣式

上一篇介紹了很短的程式碼產生一整組 Grid System,然後還提供變數讓 Grid 還有額外的參數可以設定,手寫的 CSS 如果要重新計算 12 組以上的計...

鐵人賽 Modern Web DAY 24
CSS 實戰心法 系列 第 24

技術 實戰心法 - 自幹 Grid System

自己本身是不常自幹 Grid,但透過自幹會了解更細的運作原理,grid system 和其他元件不太一樣,他是屬於外容器型的元件,一層包覆著一層變化性相當高,如...

鐵人賽 Modern Web DAY 21
CSS 實戰心法 系列 第 21

技術 Bootstrap 透過 Sass 新增自定義元件

許多人在使用 Bootstrap 時,如果有需要新增、調整,都是寫在 CSS 的後方或是另開一個新檔透過 "覆蓋" 的特性來新增、調整。先前...

技術 【課程推薦】Sass開發實戰 - 前端版型管理

各位朋友們好: 我是去年有參與第七屆it鐵人邦,分享的內容是SASS教學, 近年因應開發技術的更新,網頁/前端設計師在寫CSS時也會開始導入Sass、Less...

鐵人賽 開發技術 DAY 45
Sass3.3 & CSS設計模式 系列 第 46

技術 90天掌握Sass語法完賽心得 & 章節目錄

【課程宣傳】 今年2015年在北中南皆有開設課程, 有興趣的朋友歡迎前往了解, 如果周遭的朋友有意深入這塊, 也歡迎代為轉貼與宣傳^_^ 今年與去年變動差異較...

鐵人賽 開發技術 DAY 44
Sass3.3 & CSS設計模式 系列 第 45

技術 Sass教學(44) - Sass教學手冊導讀

Sass教學手冊目錄連結 **目前的你是否適合使用Sass** 如果你來到這裡,代表著你對CSS有著一定的了解, 為了讓你能夠儘快進入學習狀況, 這個章節主要是...

鐵人賽 開發技術 DAY 43
Sass3.3 & CSS設計模式 系列 第 44

技術 Sass教學(43) - Sass Style Guide(樣式指南) - Sass、Github、Codepen

以下文章同步於Github。 相關連結 1.Sass官網 Styleguide 2.github Styleguide 3.CodePen's CSS 進入主題...

鐵人賽 開發技術 DAY 42
Sass3.3 & CSS設計模式 系列 第 43

技術 Sass教學 (42) - SMACSS - 結構規劃與其它補充

以下文章同步於Github。 Minimizing the Depth(最小化深度) 有的時候我們設計模組時常會因為需求變動而新增元素, 一個區塊內可能就會新增...

鐵人賽 開發技術 DAY 41
Sass3.3 & CSS設計模式 系列 第 42

技術 Sass教學 (41) - Sass開發經驗分享

以下文章同步於Github。 這篇分享會比較雜一些, 主要是分享這一兩年使用Sass時遇到的問題, 畢竟寫程式並不是自己一個人的事情, 有的時候會因為團隊組成、...

鐵人賽 開發技術 DAY 40
Sass3.3 & CSS設計模式 系列 第 41

技術 Sass教學 (40) - 使用Sass Maps提升程式可讀、變數群組性

以下文章同步於Github。 範例程式碼 1.Using Sass Maps 2.w3cplus - Sass Maps 3.Handling z-index...

鐵人賽 開發技術 DAY 39
Sass3.3 & CSS設計模式 系列 第 40

技術 Sass教學 (39) - 輕鬆import資料夾內所有sass檔

以下文章同步於Github。 Sass Globbing Plugin連結 在這個plugin還沒有出現之前, Sass是不支援@import整個資料夾所有的S...

鐵人賽 開發技術 DAY 38
Sass3.3 & CSS設計模式 系列 第 39

技術 Sass教學 (38) - 這麼多Sass/CSS設計模式,究竟該如何漸進學習?

以下文章同步於Github。 以目前台灣比較熱門的CSS設計模式有: 1.SMACSS 2.OOCSS 3/BEM (較少人用,但觀念時常被提起) 4/MVCS...

鐵人賽 開發技術 DAY 37
Sass3.3 & CSS設計模式 系列 第 38

技術 Sass教學 (37) - MVCSS - Manifest、Vendor

以下文章同步於Github。 程式碼連結 MVCSS MVCSS中文翻譯 這個章節主要是聊MVCSS的Sass結構與命名方式, 首先我們就來看到Sass結構:...

鐵人賽 開發技術 DAY 36
Sass3.3 & CSS設計模式 系列 第 37

技術 Sass教學 (36) - MVCSS - Components、Structures

以下文章同步於Github。 程式碼連結 MVCSS MVCSS中文翻譯 Components(組件) 具有辨識性的UI皆放在Components的Sass目錄...

鐵人賽 開發技術 DAY 35
Sass3.3 & CSS設計模式 系列 第 36

技術 Sass教學 (35) - MVCSS - Foundation

以下文章同步於Github。 程式碼連結 MVCSS MVCSS中文翻譯 Foundation Foundation是指當你要使用MVCSS設計模式來建立你的S...

鐵人賽 開發技術 DAY 34
Sass3.3 & CSS設計模式 系列 第 35

技術 Sass教學 (34) - MVCSS - Styleguide

以下文章同步於Github。 程式碼連結 MVCSS MVCSS中文翻譯 進入主題 MVCSS融合了SMACSS、OOCSS、BEM的設計模式, 同時有參考了F...

鐵人賽 開發技術 DAY 33
Sass3.3 & CSS設計模式 系列 第 34

技術 Sass教學 (33) - BEM 設計模式

影片教學請點選下圖連結↓ [ ](https://www.youtube.com/watch?v=1koKr0-k8Wc) 以下文章同步於Github。 程式...

鐵人賽 開發技術 DAY 32
Sass3.3 & CSS設計模式 系列 第 33

技術 Sass教學 (32) - OOCSS - 提升CSS複用性

影片教學請點選下圖連結↓ 以下文章同步於Github。 程式碼連結 OOCSS An Introduction To Object Oriented CS...