Skip to content

Instantly share code, notes, and snippets.

@TerasawaShuhei
Created June 16, 2013 13:19
Show Gist options
  • Save TerasawaShuhei/5792026 to your computer and use it in GitHub Desktop.
Save TerasawaShuhei/5792026 to your computer and use it in GitHub Desktop.
第58回 WEB TOUCH MEETING 『CSS拡張言語、LESSを導入してみる』のフォローアップ

第58回「WEB TOUCH MEETING」

『CSS拡張言語、LESSを導入してみる』のフォローアップ

####スライド

Web上でLESSのコンパイルを試せるサービス

  • LESS→CSSに変換してくれるサービス
    less2css

  • CSS→LESSに変換してくれるサービス
    css2less

Web上でLESS以外の拡張言語を試せるサービス

  • CSS⇔SASS(SCSS)に相互変換してくれるサービス
    css2sass

  • Stylus→CSSに変換してくれるサービス
    Try Stylus

便利ツールのリンク

  • カラー関数を視覚化してくれるWebツール
    (Sass用なのでLESSで使う場合は関数名は変える必要がある) SassMe

  • HTMLを入れると、CSSのid,class名、子孫セレクタ、セレクタを自動生成してくれるWebサービス CSS、Less、Sacc、Scssに対応
    OneClickCSS

  • IE9以下のセレクタ上限問題を解決してくれるツール
    Codekitならコンパイル後にBlessを自動でかけてくれる設定があります。
    Bless

  • PhotoshopのレイヤースタイルをCSSで書きだしてくれる、PhotoShopプラグイン(有料) CSS, LESS, Sass, Scss, Stylusに対応
    CSS Hat

  • PhotoshopのレイヤースタイルをCSSで書きだしてくれる、PhotoShopプラグイン(無料) これはCSSかSassに対応
    CSS3Ps

  • DEMOで使っていたエディタ
    Sublime Text 2

コンパイラのリンク

LESSの関数ライブラリ

参考資料

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment