iT邦幫忙

sass相關文章
共有 125 則文章
鐵人賽 開發技術 DAY 28
30天掌握Sass語法 系列 第 24

技術 30天掌握Sass語法 - (28)Compass圖片合併功能(CSS Sprite)

在早期網頁設計師要做CSS Sprite的時候, 除了自己手做土法煉鋼以外, 同時也會使用線上網站工具來解決這個問題, 剛好翻到六年前我自己在photoshop...

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

技術 CSS沒有極限 - pure CSS 專輯列表效果

本篇CSS效果發表於http://ashareaday.wcc.tw/#2013-10-12 (建議使用Chrome瀏覽器) 鐵人賽快要結束了,今明兩天會介紹純...

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

技術 30天掌握Sass語法 - (27) 使用@if提升@Mixin靈活度,以CSS圖形化為例

在第20天的時候, 我有分享關於@Mixin與Sass運算的運用手法, 但在一些設計情境下, 你會發現有些樣式如果只單純用Sass運算還是不太夠的, 所以這一次...

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

技術 CSS沒有極限 - CSS transform-3D的透視(perspective)

本篇CSS效果發表於http://ashareaday.wcc.tw/#2013-10-11 (建議使用Chrome瀏覽器) 本篇介紹的transform 3D...

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

技術 CSS沒有極限 - CSS transform-origin 起始點

本篇CSS效果發表於http://ashareaday.wcc.tw/#2013-10-10 (建議使用Chrome瀏覽器) 本篇介紹transform的起始點...

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

技術 30天掌握Sass語法 - (25) 透過index()與nth()來設計網站版本樣式控制管理

在以往有些網站性質會因為節慶的關係, 而會修改網頁樣式, 在傳統比較常見的做法, 一個網站會有兩隻CSS, 第一個CSS是網站全域樣式,譬如Layout、mod...

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

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

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

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

技術 CSS沒有極限 - CSS transform 概觀

本篇CSS效果發表於http://ashareaday.wcc.tw/#2013-10-08 (建議使用Chrome瀏覽器) 接下來要介紹CSS transfo...

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

技術 30天掌握Sass語法 - (22)Sass顏色函數介紹

網頁設計師在設計網頁時, 通常都會直接瀏覽繪圖軟體工具來觀看色盤, 但如果是透過Sass顏色函數的話, 就可以自動產生出所想要的顏色。 同時也會介紹一個Sass...

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

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

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

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

技術 CSS沒有極限 - Web-font & icons 3連發 - 自製web font icons

本篇CSS效果發表於http://ashareaday.wcc.tw/#2013-10-05 (建議使用Chrome瀏覽器) 接下來會連接3篇文章都介紹web-...

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

技術 30天掌握Sass語法 - (18)規劃你的Sass結構

在上回我們曾經提到過@import的用法, 它的功用在於可以將CSS檔案進行切割, 如果是單純要被匯入整合Sass檔, 而並沒有要轉出成CSS檔案的話, 那就在...

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

技術 30天掌握Sass語法 - (17)使用@content建構RWD網頁設計

esponsive Web Design(RWD) 又稱為響應式網頁設計, 它可以因應網頁解析度上的不同, 進而改變網頁上的樣式, 如果你不了解什麼是RWD的話...

技術 CSS沒有極限 - 利用Sass繪製扁平化風格的long-shadow

網頁設計的趨勢從擬物轉換為扁平化,而扁平化顧名思義就是較扁、較平,去除了真實化實體,扁平化也延伸出許多的視覺風格,而long shadow就是其中一種,讓扁平的...

技術 30天掌握Sass語法 - (16)如何將別人撰寫的CSS Framework轉換成Sass格式

我們常常會看到國外的有名大神們都會釋出CSS framework, 只要引入他的CSS檔案後,你就可以使用他的樣式進來。 而這次的主題則便是跑一次相關的流程給大...

技術 30天掌握Sass語法 - (15)如何透過Sass&Compass支援CSS3動畫效果

這次的主題主要是要分享自己是如何透過Sass&Compass來支援動畫效果, 一共會分享Compass Transition,以及國外分享出來的Anim...

技術 CSS沒有極限 - CSS3 :target選取器,可以做出許多nojs的互動效果

CSS3多了相當多的selectors,而:target是其中一個,它可以讓html的id被套用上新的樣式,而這功能也可以讓html的互動性更高。 本篇內容同步...

技術 30天掌握Sass語法 - (14)透過Compass CSS3 Mixin輕鬆撰寫CSS3靜態樣式

在早期如果我們必須要撰寫一個最基礎的圓弧效果時, 是必須要寫很多瀏覽器前綴詞的,譬如這樣: .box{ -webkit-border-radius: 100...

技術 CSS沒有極限 - CSS藏頭詩 Selection

這是一個很簡單的技術,就是可以改變文字反選後的樣式,而支援的樣式並不多,目前僅有Color、background、background-color、text-s...

技術 30天掌握Sass語法 - (13)如何使用sublime text 2 打造撰寫Sass環境

Sublime text 2 網站連結: http://www.sublimetext.com/2 首先Sublime text 2是沒有提供Sass、Scss...

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

技術 30天掌握Sass語法 - (12)以Bootstrap framework淺談HTML、SASS設計模式

相信網頁設計師們都知道bootstrap這個前端framework, 載入它的js與css後, 之後只要在你的html tag加上他寫好的class樣式即可。...

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

技術 CSS沒有極限 - CSS的新"文字"及"尺寸"單位

大多數網站在文字的單位都是使用px,尤其在台灣多數使用者都是用windows系統,不管是什麼瀏覽器,在windows下都是以單數px是較為清楚的,如13xp.1...

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

技術 30天掌握Sass語法 - (11)覺得Sass的寫法不適合你寫CSS嗎?那試試看SCSS吧!

有些人或許對SASS這種太乾淨的寫法有點無法適應, 因為他是靠TAB推進來寫CSS與階層性的, 如果你覺得SASS你不習慣, 那你可以試試看SCSS! 舉例來說...

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

達標好文 技術 CSS沒有極限 - CSS的神奇Calc運算

今天來介紹CSS最犯規的function calc,通常會用來做數值的運算,尤其是針對於長寬等等,而他最特別的是運算的數值"不需要"相同單位...

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

技術 CSS沒有極限 - 意想不到的background-attachment

background-attachment是背景固定模式的屬性,而不同的固定方式就能夠有不同的視覺效果,而人類的視覺是很容易欺騙的,適當的利用可以有意想不到的效...

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

技術 30天掌握Sass語法 - (10)如何建立自己的Sass Reset CSS

以目前坊間最有名的Reset CSS不外乎是 myer所發表的Reset.css http://meyerweb.com/eric/tools/css/rese...

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

技術 30天掌握Sass語法 - (9)如何逐步建立自己的CSS資料庫

今日教學重點: (1)用_mixin.sass來整理自己曾經寫過的CSS (2)使用Compass CSS3一鍵匯出多種瀏覽器支援語法 (3)你相信嗎?Comp...

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

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

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

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

技術 CSS沒有極限 - 別忘了偽元素

偽元素在IE8之後全面都有支援,而這樣功能在CSS3可以創造出更多的效果。 圖片來源:動畫 火影忍者 本篇CSS效果發表於http://ashareaday....

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

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

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