iT邦幫忙

sass相關文章
共有 198 則文章
鐵人賽 開發技術 DAY 13
Sass3.3 & CSS設計模式 系列 第 14

技術 Sass教學 (13) - susy2 - 如何打造susy2開發環境

影片教學請點選下圖連結↓ 以下文章同步於Github。 進入主題 目前已經有軟體可以編譯Sass與Susy2, 例如Fire.app、codekit等等,...

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

技術 Sass教學 (28) - @each+Sass Maps批次新增各元素樣式

影片教學請點選下圖連結↓ 以下文章同步於Github。 範例程式碼 sassmeister-程式碼範例 A Sass Component in 10 Mi...

徵才 【台北市】前端工程師(近捷運松江南京站)-APO

**我們需要您具備以下能力: 1、從事前端開發2年及以上,熟悉各種前端技術,包括HTML/CSS/JavaScript/Node.JS等2、具備跨終端的前端開發...

鐵人賽 開發技術 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 進入主題...

技術 Sass 變數 與 darken , lighten DAY33

今天我們要來介紹 Sass的變數啦~~介紹之前我們必須先了解為什麼我們需要它呢??當我們原先在撰寫 css的時候假設有100個地方的顏色皆為紅色但有一天我們需要...

鐵人賽 開發技術 DAY 40
30天掌握Sass語法 系列 第 36

技術 Sass開發流程設計 - (10)Susy 版型種類介紹

這一次我想聊的是關於susy所提供的grid種類, 因為他不單單只能設計RWD版型而已, 一些常見的網頁版型設定也都有支援提供, 後面如果有時間的話也會設計一個...

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

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

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

鐵人賽 開發技術 DAY 24
30天掌握Sass語法 系列 第 20

技術 30天掌握Sass語法 - (24) 淺談Sass協作流程分享

該如何讓兩位以上的隊友發揮1+1=3以上的更大價值, 一直以來都是公司團隊間時常需要討論的議題, 又會因為每個隊友的能力不同, 所以每間公司的團隊流程也會有所調...

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

技術 Sass教學 (8) - susy2 - responsive grid with Breakpoint

影片教學請點選下圖連結↓ 以下文章同步於Github。 由於我們即將要來介紹如何透過susy2來設計responsive grid, 在那之前我想先花一章...

鐵人賽 開發技術 DAY 36
30天掌握Sass語法 系列 第 32

技術 Sass開發流程設計 - (6) 如何逐步整合自己的Sass資料夾

在開發數個網站後, 網頁設計師通常都會思考該如何化繁為簡地設計自己的開發流程, 今天則就提供一些心法讓剛碰觸Sass的朋友了解該如何整合自己的Sass資料, 範...

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

技術 ASP.NET MVC 導入 SASS

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

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

技術 Sass教學 (15) - susy2 - 實作Bootstap3 RWD Grid

影片教學請點選下圖連結↓ 以下文章同步於Github。 這個章節主要是要來講如何透過Susy2來設計Bootstrap的版型, 透過模仿別人設計好的RWD...

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

技術 Sass教學 (3) - susy2 Grid settings(下)

影片教學請點選下圖連結↓ 以下文章同步於Github。 這一個章節主要是要講susy2的Debug模式, 除了維持susy1就有的column顯示外, 還...

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

技術 Sass教學 (6) - Sass 3.3 - 參考父選擇符:&

影片教學請點選下圖連結↓ 以下文章同步於Github。 先來介紹以前Sass3.2的語法, //scss .box{ color:black;...

鐵人賽 開發技術 DAY 35
30天掌握Sass語法 系列 第 31

技術 Sass開發流程設計 - (5) Sass設計資源整理

除了閉門造車設計Sass網站設計流程外, 我自己也時常會去搜尋其他網頁設計師的Sass資源, 再去從對方的設計風格和理念找出優缺, 衡量是否該改善我自己撰寫Sa...

鐵人賽 自我挑戰組 DAY 12

技術 第 12 集:Sass 編譯環境

> 此篇會介紹三種免費的 sass 編譯方法 Live Sass Compiler 這是一款免費 VSCode 插件,會自動將所有 sass、scss...

鐵人賽 開發技術 DAY 34
30天掌握Sass語法 系列 第 30

技術 Sass開發流程設計 - (4) 排版流程(下)

延續昨天的版面, 已將所有的大框架建立好了, 這裡先來提自己的排版流程習慣: 1.我習慣先把大框架設定用好後,再來微調各元素間的距離。 2.在排網頁時,我會先將...

鐵人賽 開發技術 DAY 8
CSS沒有極限 系列 第 8

技術 CSS沒有極限 - text-shadow初試身手

text-shadow算是CSS3中較早出現的語法,而且不需要打前輟詞就能夠執行,text-shadow是一個很簡單的效果,但是可以有非常多的變化。 本篇CSS...

鐵人賽 開發技術 DAY 6
CSS沒有極限 系列 第 6

技術 CSS沒有極限 - CSS3的色彩

在過去我們只要使用色碼來表示顏色,色碼是用三組十六進制數位表示,每位元組從00到FF,相當十進位數位從0到255...,而現在我們有了新的屬性alpha(透明度...

鐵人賽 Modern Web DAY 15

技術 Day 15: 在 Vue 專案使用 Sass/SCSS +共用變數 (feat. Vite)

Outline 主要分成四個部份 安裝 Sass 預處理器,在 SFC 檔使用 SCSS 撰寫 style 區域引入 SCSS 樣式或變數 全域引入 SCSS...

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

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

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

鐵人賽 開發技術 DAY 45
30天掌握Sass語法 系列 第 41

達標好文 技術 45天掌握Sass語法-完賽心得

終於結束這45天的奇幻之旅, 真的寫得很盡興,很高興有這個活動讓我有機會整理我腦袋上的東西。 每天花上8~12小時不間斷地錄製教學影片和撰寫文章, 最初的目的是...

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

技術 Sass教學 (4) - susy2 - 960Grid固定版型(Fixed layout)設計

影片教學請點選下圖連結↓ 以下文章同步於Github。 我遇過許多朋友都提到, 他們很想要學好susy, 但是真的有案子要用的時候, 卻又不知道該如何下手...

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

技術 Sass教學 (29) - SMACSS - Module Rules

影片教學請點選下圖連結↓ 以下文章同步於Github。 程式碼連結 SMACSS - Module 進入主題 Module意思是一個獨立的CSS組件或單一...

鐵人賽 開發技術 DAY 41
CSS沒有極限 系列 第 37

技術 CSS - Flex的對齊

今天參加了MOPCON,所以來介紹簡單一點的。承前篇,Flex是為了改善過去的CSS2排版模式所衍生出的新語法,本章則要介紹他的對齊方式。 CSS範例:http...

鐵人賽 開發技術 DAY 21
CSS沒有極限 系列 第 17

技術 CSS沒有極限 - CSS3 Fliter 效果

本篇CSS效果發表於http://ashareaday.wcc.tw/#2013-10-06 (建議使用Chrome瀏覽器) 假日都來介紹些單篇的主題吧~,今天...

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

技術 Sass教學 (2) susy2 - Grid settings(中)

影片教學請點選下圖連結↓ 以下文章同步於Github。 上個章節講了susy2的簡易設定方式, 接著我們來看它預設的全域設定, susy2 global-...

鐵人賽 自我挑戰組 DAY 23

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

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

鐵人賽 開發技術 DAY 28
CSS沒有極限 系列 第 24

技術 CSS沒有極限 - CSS only responsive navigation

本篇CSS效果發表於http://ashareaday.wcc.tw/#2013-10-13 (建議使用Chrome瀏覽器) 這篇要介紹的是noscript的C...

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

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

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