WindowsにCompassをインストールしてSASS/SCSS環境を構築する
SASSはRubyのgem（プログラム）なります。 Macには最初からRubyが入っているのですが、Windowsだと入っていないのでインストールしましょう。 インストーラーを使用すると簡単です。下記URLからダンロードしてください。 ここでは現時点で最新版の「Ruby 2.0.0-p0」をダウンロードしてみます。 RubyInstaller インストールするときに、環境変数のPATHをチェックしておきます。 スタートアップメニューの「アクセサリ」から「コマンド プロンプト」を起動します。 ruby -v と入力して ruby 2.0.0p0 と表示されたらインストール完了です。 Compassのインストール 「コマンド プロンプト」から下記のコマンドを順に実行します。 gem update --system gem install compass 下記コマンドでインストールされたか確認し
Sass + Compass の基本導入と設定ファイル config.rb について
明けましておめでとうございます！今年もどうぞよろしくお願いいたします。 2013 年は、26 年ぶりに 4 つ全ての数字が異なっているみたいですね。みなさんどのようなお正月をお過ごしでしょうか。私は寝正月を大満喫しました。 さて、Windows でも Mac でも Sass + Compass 環境ならば config.rb で設定が書けるので、今日はそれについて。「Sass とは何か？」「Compass とは何か？」は省きます。インストールから設定、楽して監視開始、あたりを。 Sass + Compass を使うには？ まず基本のとこから一応さらっと！ 最近は簡単な方法もたくさん出ていますが、地道にやるならば Ruby（と RubyGems）を入れて、Sass と Compass を入れて、となります。 Ruby + RubyGem インストール Windows だったら RubyFor
Compassを使ってSassのCSS出力を手軽にしよう
Sassを使っていて1つ面倒なことと言えば、CSSを生成するのに必要なコマンドではないでしょうか。 sass -t expanded _scss:shared/css --watch 長い...。プロジェクトでCSSの設計を始めるたびにこれだけ入力するのは大変です。 そこで登場するのが「Compass」です。CSS3のmixinなどが含まれた強力なフレームワークなのですが、次のコマンドを打つだけでCSSの出力ができる機能も持っています。 compass watch 簡単ですよね。いつでもどのプロジェクトでも「compass watch」ですから。 1度だけCSSを出力する「compass compile」もあります。 インストール方法 Sassはもう既に入っていると思うので、次のコマンドを入力してCompassをインストールしましょう。 Windows gem install compas
やさしいSassとCompassの導入方法（Windows、Mac） | ajike switch
いまさらですが、SassとCompassの環境を導入しました 以前から使いたいなとは思っていたのですが、弊社の体制や運用面でのネックがあったりして見送っていました ただ、最近すこし時間に余裕があり、ガイドラインレベルでCSSメタ言語の運用などを考えることができ、懸念点を解消できたので導入にいたりました 前置きはさておき、今回は環境構築についてです 私の作業環境がときにWindowsだったりMacだったりと『アホか！』な感じなので、両方の方法について書いてます なお、ふだん黒い画面をさわることがないので…そちらの使い方はあまり自信がないです… Rubyのインストール Macは最初から入っているようですが、Windowsはインストールしなければいけないようです Windowsユーザは、下記URLからダウンロードしてください RubyInstaller 次に、念のためRubyがインストールされて
CSSフレームワーク「Compass」の基礎
Compassのメリット CSSスプライトが簡単に作成できる Compassでは、フォルダに配置するだけで、CSSスプライトで記載された一枚画像が簡単に作れます。CSSスプライトを利用すれば、1ページ辺りの画像の読み込みを何度も実行せずにすむため、ページの高速化につながります。 独自のmixinが利用できる グラデーションやベンダープレフィックスを自動で付与してくれる機能があります。 独自の関数が利用できる 画像のサイズを取得したり、三角関数の計算をしたりできる関数があります。 mixinや関数はCompassの公式リファレンスで紹介されています。ここでは記載できないほどのmixinや関数がありますので、一度見てみると面白いかと思います。 上記に加え、第1回目に記載したこちらのSassのメリットももちろん享受できます。 読みやすい 変数や繰り返し処理が使える 成果物の品質を統一できる 高速
Sass/Compass徹底入門を監修しました - MOL
2014年3月18日に発売される、Sass and Compass in Actionの邦訳版である『Sass&Compass徹底入門 CSSのベストプラクティスを効率よく実現するために』を監修した。 Sass&Compass徹底入門 CSSのベストプラクティスを効率よく実現するために Wynn Netherland, Nathan Weizenbaum, Chris Eppstein, Brandon Mathis, 石本 光司 (株式会社サイバーエージェント) 翔泳社 2014-03-18 Amazonで詳しく見る by G-Tools 監修の依頼を受けて音速でハイと答えたのだけど、監修って何するんだろうねって感じだった。いや、原書の『Sass and Compass in Action』は以前から購入していて、Sass/Compassの開発者であるNathan Weizenbaumや
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
