Quantcast
Channel: omnioo lab. record » html/CSS
Viewing all articles
Browse latest Browse all 12

MacでSacc+Compassを使う

0
0

使ってみるとこれは便利でやめられない。しかし、Sass使っていない人が多い世の中なので難点は共同開発につきると思います。全員で使ってくれないとこの便利さは享受できないというのと普通にcss書いていたらもうこのご時世のスピードについてゆけないというものです。うちの会社は少なくとも私がいちばん最後になってしまいました。若い子は導入が早い。
というわけでSaccですが、rubyが入っていればもうそれだけで楽です。Macの場合はすでにOSにデフォルトでインストールされているので準備不要です。ここで説明する環境はMacのyosemiteです。

rubyのgemをアップデートしておく

まずはLinuxのyumとかapt-getみたいなもんで、gemっていうのがrubyにあるんですが、それをアップデートして最新のものにしておきます。rootにsuしておきましょう。(あるいはsudoかな。)
# gem update --system

Sassをインストールする

# gem install sass
やたらと時間かかりますが、インストールが終わったらバージョン確認
# sass -v

Compassをインストールする

コンパイルするのに必要なやつかな。
# gem install compass
これもインストールしたら一応バージョン確認。
# compass -v
これで準備完了。

saccを使ってみる

インストールが完了したら、プロジェクトディレクトリに移動します。
私はだいたいassetsあたりにcssをおくことが多いので、そのあたりに行きます。
DocumentRoot/assets/css
DocumentRoot/assets/img
DocumentRoot/assets/js
という作りにしている感じです。でここからはrootじゃなくていいです。普通のユーザーで。
$ cd ~/DocumentRoot/assets
次にコンパスで最初の初期設定をつくってあげます。
$ compass create
・config.rb
・sass
・stylesheets
という2つのディレクトリとconfig.rbというファイルが作成されます。デフォルトなのでこういうかたちになりますが自分が作成するsacc+cssで作成することができます。
私の場合は、stylesheetsというディレクトリを使わないので、まずはconfig.rbをテキストエディタで開いて、
http_path = “/”
css_dir = “css” ←ここ修正
sass_dir = “sass”
images_dir = “img” ←ここも修正
javascripts_dir = “js”
これで自分好みのやり方でcssが書けるようになります。
そんで、saccディレクトリの中でstyle.scssとかいうファイルを作ってコンパイルしてゆくとcssディレクトリの中にコンパイル済のstyle.cssを作成してくれます。

コンパイルのやり方

$ compass w
で-fのような動作のプロンプト待ちの状態になります。先の例でいうとsacc/style.scssを編集し保存するたびにコンパイルを自動実行してくれて、css/style.cssに保存してくれます。当然cssとして読み込んでいるのはコンパイル後のファイルになります。

scssを書いてみる

実際に使ってみると結構便利でやめられなくなります。Gitを使ってしまったあとの常習的なあの感じとにています。使ってないやつはバカなんじゃないかと思います。いろいろなことができるのですが、だいたい使うものって決まっているものです。まず結局はCSSを書くのでCSSが書けないとダメなので、普通にCSSを書く動作には優劣ありません。
最もSCSSが便利なのはセレクタとネストできるところです。親セレクタと子セレクタとネストできるので、セレクタの重複記述が圧倒的に少なくなります。CSSで書いているときの「どこで何をやってんのかわからなくなってきたから、最後の方でオーバーライドしちゃう!」ってのも圧倒的になくなります。
もう一つは変数を使えるところです。いろいろな場所に施した#336699なんていう色を一発で編集できてしまうし、ある程度変数化しておくと使い回しができるという特徴があります。
びっくりするぐらいコーディングスピードが増します。

とはいってもscssの半分もその機能を堪能していない状態です。コンパイル時に改行なしのコンプレスができたりとなんかいろいろできちゃうのですが、今回は割愛。

http://qiita.com/salchu/items/e3baa6d6cea6f1b322c8

Viewing all articles
Browse latest Browse all 12

Latest Images

Trending Articles





Latest Images