分類:: sass

Compass 替代方案(3) - 加入 SVG Sprites

Compass 的 CSS Sprites 是非常好用的工具,在以前有介紹過 compass 的 Sprites 作法,只要把圖片丟一丟就可以完成,而且也可以做 for Retina 版本,但是使用SVG 製作 Sprites 就沒有辦法。一直以來我都是以向量工具做設計,如果不能轉 SVG 這樣高品質的圖檔,對我來說也是挺困擾的。 這篇就要介紹如何使用 Gulp 來製作 SVG Sprites,並且同時產生一般 png 版本來相容於舊版的瀏覽器。 先前的 Sprites 介紹文章 Spriting with Compass Sprites for Retina

Compass 替代方案(2) - 透過 PostCSS,停止加入不必要的 prefix

承上篇,因為 compass 很久沒維護,所以在找替代方案。而這篇是要介紹很火紅的 post-css,主要是要解決 css3 prefix 的問題,post-css和 sass 不同的是,在 prefix 的方法不需要先定義成 @mixin ,可以在事後再決定是否加入 prefix,這讓不斷在更新改變的 prefix 流程簡化很多,並且可以有效減少 css 的檔案大小 (prefix 是很肥大的)。 Prefix 的減少速度也是相當快速,像是 box-shadow 的 Prefix 可能消失超過一年, transform 也大約一年左右不需要 Prefix,如果不想要明年慢慢的移除自己所種的 Prefix,或許可以參考看看 post-css的 autoprefixer 工具。 如果還在使用Compass的使用者可以當作參考就好,工具還是要用得上手比較重要~

Compass 替代方案(1) - 更快速的 Sass

Compass 是一套非常優秀的 Sass 擴充套件,從剛開始學 Sass 就一直用到現在,許多優點是一般 CSS 或 Sass 較難達到的,如: CSS Sprites:可以將圖片轉成Sprite,並提供 CSS class。 CSS3 mixin:prefix 啊~ Vertical Rhythm:CSS 文字排版的救星。 image-url, image-size:圖片路徑的取代以及取得圖片的尺寸。 但現在有些問題讓我考慮放棄使用 Compass 如: 很久沒更新,距離上次更新已將近一年 基於ruby sass,效能較差,編譯速度慢 因為久沒更新,很多 css3 @mixin 已不符合現在規範 CSS Sprites 沒有 SVG 版本 接下來會連續幾篇開始介紹透過 Node sass 取代 Compass 的相關技術研究,當然 Compass 不會馬上被取代,但也要準備好替代方案,畢竟工具只是要增加產能使用,並非一定要追最新的才行。 如果還在使用Compass的使用者可以當作參考就好,工具還是要用得上手比較重要~

客製化屬於你的 Bootstrap 4

Bootstrap 是目前最流行的CSS Framework,第四版也釋出了開發版本,無論第幾版對於工程師來說 Bootstrap 就是那麼的容易上手,但扯上設計就要多多配合了,不同身份看待 Bootstrap 也有不同看法,例如: 設計師:Bootstrap 很醜誒,你看那個濁濁的顏色 (當然每個設計師觀點不同啦…)。 前端:Bootstrap 要配合設計師的稿,似乎有點麻煩…(看著對不上的Grid system)。 後端:不是都長一樣嗎? 其實Bootstrap的設定檔就有許多細節可以調整,不需要 Overwite,載入前就可以先調整,而且並不是一定要全部元件載入,可以只使用部分的元件,靈活的使用框架,才能發揮更大的價值。

Sass map get

去年有介紹sass模組的開發方式連結,sass 3.3 釋出以後有更好的方式去執行,這篇來介紹快速且好管理的模組製作方法。

Sass 3.3 Source Maps

Sass 3.3 除了上次提到的$Map外,還有另一個很有特色的功能就是Source Maps,這功能主要是配合開發者工具,直接就可以看Sass原始碼在哪一個檔甚至是哪一段,而這篇會配合Chrome 開發者工具來介紹Source Maps。

Sass 3.3

Sass3.3出一段時間了,而Fire.app目前還是3.2的版本,據說是因為在等Compass 1.0正式版,而如果用Ruby的Compass確實也只能用3.2 版的sass。 不過新東西就是想用看看,上網查了一下並不複雜,所以這次就來試試看Sass 3.3 + Compass 1.0.alpha吧。

CSS設定中英文不同的字體

Just font中的字型學文章都相當有意思,而有一篇是關於中英文字搭配的問題;這篇雖然是以windows word為例,但裡面的概念在網頁上也是很有幫助,而其中一段”以 Windows 內建的三種字型為例,表現最好的是微軟正黑體,英文部分採用了微軟的 Segoe UI,粗細與中文較一致“,在目前web中當然也可以有這樣的設定,只要用CSS3的unicode-range,就能夠在中文字中套用”微軟正黑體”,英文套用”Segoe UI”。

Sass 模組開發

最近社群上有人分享了一個連結,是關於sass模組製作的教學,大致看了一下,發現和我的方式頗為接近,所以就在這介紹我的Sass模組開發方式。 http://www.sitepoint.com/sass-component-10-minutes/