タグ

Rubyとcssに関するtyabeのブックマーク (2)

  • Webデザイナーにオススメ!SCSS/Sassで記述してリアルタイムに変換、デザインを確認·Compass MOONGIFT

    独自の記法でCSSを記述するフレームワークがいくつか出てきました。しかし実際に利用する際にはCSSに変換する必要があります。記述して変換、では手間に感じて利用したくないでしょう。そこでCompassを使って自動変換してくれる環境を構築しましょう。 実行しているところです。メニューバーに常駐します。 設定です。SCSSまたはSassに対応し、自動で短縮化もしてくれます。 通知機能があります。Mac OSXの場合はGrowlで通知してくれます。 Webサーバ機能とlivereload機能があります。保存したタイミングで任意のポートをたたいて再読み込みさせます。 プロジェクトを追加したときの通知です。 Rubyファイルを含めてまとめてファイルを生成してくれます。 ファイルの配置はこんな感じです。デザインを組む前の準備が簡単になります。 ファイルを修正すれば自動で再コンパイルしてくれます。 いくつ

  • Rubyによる構造化CSSライブラリ·Less MOONGIFT

    CSSのメンテナンス性の悪さは言うに及ばないだろう。どうとでも書けてしまう手軽さはあるが、ファイルが分かれていたり、ネストしている場所としていない場所があったりするともう管理ができなくなる。ちょっとした変更がどこに影響するかも分からず、もはや触るのが怖くなる。 Lessの記述例 そんな訳でCSSは慣れれば慣れるほど使い方が難しい代物だ。そこでLessを使って分かりやすく管理してみよう。 今回紹介するオープンソース・ソフトウェアはLess、プログラミング的に記述するCSSライブラリだ。 Lessはコマンドラインのツールで、lesscというコマンドを利用する(lessは別コマンドで既に存在するので)。そして専用ファイルの.lessを変換し、.cssファイルを生成する。デザイナの方はCSSファイルを直接触らないようにする必要がある。 変換例 利用できる機能としては変数、階層構造、Mixin、計算

    Rubyによる構造化CSSライブラリ·Less MOONGIFT
  • 1