Posts match “ css ” tag:

From Sass(+Compass) to libSass(+compass-mixins)

最近又要對抄筆記做不小個改動,於是打算來解決一個困擾我已久的問題: Sass/Compass 有夠慢!

http://lmgtfy.com/?q=sass+slow

舊做法:Compass + concat

其實很早以前我就已經嘗試處理過這個問題,原本所有需要 compile 的 @import 都會回歸到同一個 .scss 檔案,但由於每次在 watch 的狀態下按存檔我都要等個 10 秒左右,最後我就受不了了,於是出現了如下的結構:

sass_tree_01.png

這樣每次會生出 一堆 css(沒有前置底線的都會生成 .css 檔案),然後再透 Grunt 在這些 .css 檔生出來之後把它們 concat 起來,如此在只更改單一檔案的時候(e.g. sass/cards/new-features.scss)就不會需要同時 compile 其它的一大包東西(是說我本來以為 Sass 本身的 cache 機制進場可以解決這個問題,但上網查了一下跟親自試了一下之後覺得似乎沒有什麼幫助...)

此時的 Gruntfile.js (我是用 grunt-contrib-compass) 就生出了這兩段新的 configuration:

// in grunt.initConfig

concat: {
  css: {
    options: {
      separator: ''
    },
    src: [
      '<%= config.concatDir %>/css/*.css',
      '<%= config.concatDir %>/css/cards/*.css'
    ],
    dest: '<%= config.distDir %>/content/css/app.css'
  }
},
watch: {
  css: {
    files: ['<%= config.concatDir %>/css/{,**/}*.css'],
    tasks: ['concat:css']
  }
}

然而在碰到修改的是共用的 _ xxx.scss 或著是需要整包做一次重新 compile 就會要等有點久...

新做法:libSass + compass-mixins

  • libSass

    Sass engine 的 C/C++ port 版,運作速度非常非常之快。並且有各個 language 的 wrapper,都可以在頁面上找到。

  • compass-mixins

    脫離了 Ruby Compass 的魔掌之後仍然有 Compass 大部分的 mixin 可以用。

  • grunt-sass

    Grunt + node-sass

安裝必須品

npm install --save-dev compass-mixins
npm install --save-dev grunt-sass

修改 Gruntfile.js

// in grunt.initConfig

sass: {
  options: {
    includePaths: [
      // 把 compass-mixins 加到 sass 的 include path

      'node_modules/compass-mixins/lib'
    ]
  },
  dist: {
    options: {
      sourceComments: true
    },
    // 用 grunt 展開檔案丟給 node-sass

    // ref: http://gruntjs.com/configuring-tasks#globbing-patterns

    files: [{
      expand: true,
      cwd: '<%= config.appDir %>/sass',
      src: '{,**/}*.scss',
      dest: '<%= config.concatDir %>/css',
      ext: '.css'
    }]
  }
}

值得注意的是如果是從 Compass 轉移過來的話,原本 Compass 是自動 compile 整個設定的 Sass 資料夾內非 _ 開頭的 Sass 檔案,而 node-sass 的 compile 是以單一檔案為基礎的,因此在這邊我們需要透過 Grunt 的 globbing patterns 把原本 Compass 設定的 Sass 資料夾內的檔案展開餵給 grunt-sass。

如果你沒有這個需求,可以直接參考 grunt-sass 的 README 有最基本的一對一設定方法:

sass: {
  options: {
    sourceMap: true
  },
  dist: {
    files: {
        'main.css': 'main.scss'
    }
  }
}

馬上來試一下速度怎麼樣!

後記

其實當時要改成 Compass + concat 前我就已經有稍微調查過 node-sass,不過那時候恰恰是 Sass 迎來升上 3.3 並且 Compass 迎向 1.0 的可怕時刻,然而偏偏我就是需要 Sass 3.3 才有的功能,而 libSass 的進展畢竟還是沒有直接跟上 Sass,最後我只好作罷。

Switching from Ruby Sass to LibSass
http://www.sitepoint.com/switching-ruby-sass-libsass/

時過境遷,後來 Ruby Sass 停下來等 libSass 追上後再齊頭並進,才有了今天這麼快速又不落人後的 libSass!

Sass Compatibility
http://sass-compatibility.github.io/

果然在這個變化快速的產業,偶爾就是需要讓子彈飛一陣子。

週末長知識: scrollable <div> 的捲動重繪問題

前端也是做了很久,直到最近才發現這個事實,感覺有點羞愧 ww
為了讓同樣的事情不要再重演,決定專文說明之!

以下文章的內容基本以 Chrome 瀏覽器作為展示用的平台,所以一些 render performance 的問題不見得會出你家的瀏覽器上,畢竟各家瀏覽器為了讓使用者能夠順暢瀏覽網頁,可能還是有做一些各自的調整。

現在已知的是 Opera 在本文主題的範圍內所受的影響與 Chrome 是一樣的(同為 Blink引擎)。

scrollable <div>

其實直接看一下 CSS 就明白我的意思啦

.scrollable {
    height: 100%;
    overflow: auto;
}

其實就是帶有捲軸的 <div> 而已,它的特性是在內容超出設定的 寬度/高度 之後會出現捲軸(用 overflow: scroll 的話,會一直有捲軸)

捲動重繪問題,初次見面!

其實就是在新版的 手打 首頁。

其實一開始還感覺不大出來,但多捲幾下之後發現這個捲動的吃力程度連我的(三年前的)超級遊戲桌機都有點受不了,馬上來用 Chrome DevTools 看兩把!

從圖中可以清楚的看到每個 frame 中有很長的時間用在 painting,並且很多 frame 的運作時間超過 16~17ms,造成整體的 fps 沒辦法達到 60。

簡單的重現

Preview 的時候先按「Launch the preview in a separate window」在新視窗開啟,再來打開 DevTools 觀察比較準(原本擺在 iframe 裡可能會影響結果)

確認的方法就是開啟 DevTools 裡的「Enable paint flashing」,就可以在捲動的時候看到重繪的區域。

Read on

React 碎碎念: 我只是想寫個 CSS

是說上次的碎碎念好像有點莫名地在我不知道的地方流傳,我根本沒宣傳那篇文章才對...

總之歡迎關注 React碎碎念 系列文章

碎碎念大部分是個人意見,客觀部分敘述有錯誤歡迎指證。

有一天

這天在 ReactJS.tw 看到了人家轉貼的 新工具介紹文章 — React Storybook,點過去看完之後順道看了一下作者還有寫些什麼文章,於是發現了這篇,也就是本文的主角

State of React and CSS

推薦讀完再繼續看下去。

想想上次發的 React 碎碎念: 艱困的新手之路 也是因為被一些看到的東西點燃了(X)

你原本怎麼寫 CSS?

其實原本有在寫 CSS 到一定程度的人(不管是前端工程師還是網頁設計師),一般會碰到一個轉捩點就是 — 習得 CSS 心法 (WTF)。

寫 CSS 的人,隨著碰過的網頁跟經驗增加,漸漸碰到頁面趨向複雜或是網站越來越巨大,然後 CSS 寫一寫就崩潰了。

於是坊間就有各種拯救你的心法出現,是經過時間淬鍊的成果,你可以選擇 follow 一種,或著結合眾家精隨融會貫通。(或著像我只學了皮毛就一直亂寫)

比較有名的心法這邊列三個:

還有一則很容易不小心就搜尋到的投影片 — 漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例

歡迎來到 React 的世界

然而,就是這個然而

在 React 崛起之後,因應它用力的 component 化,帶動了嶄新的 CSS 風潮。上面的 Medium 文章中列出搭配 React 使用的方式有:

  • 使用現成的 CSS framework
  • 寫 (good old) CSS
  • 用別人寫的 React-based UI
  • 用 CSS Modules
  • 在 JS 裡面寫 CSS

上面就 React 出現之後才崛起的其實又大體上可以分成兩類:

  • 在 JS 裡面寫 CSS
  • 用 CSS Modules
Read on