SCSS

Sublime Text 3でCompassのビルド設定とエラー

新しいPC(Windows10)に入れていたSublime Text3でCompassのビルド設定をしていなかったのでしばらくぶりに設定をした時の覚書とエラーが出たのでその対処方法。

Ruby がインストールされていて、既にSassとCompassはインストール済みの上の作業です。

一応Rubyの確認

インストールされていれば、バージョンが表示される

 

gemをアップデートする

sassをアップデートする

compassをアップデートする

compassはアップデータありませんでした。

この後、Sublime text 3での設定。

sublime text3で必要なパッケージのインストール

sublime text 3を起動後、ctrl + shift + p でPackage Controlを起動し、Package Control: Install Packageを選択。

いろいろ便利なパッケージがありますが、今回は以下のものをインストール

・Sass
・SASS Build
・SCSS
・Compass
・SublimeOnSaveBuild

これで、config.rbのあるフォルダのscssファイルを開き、保存してみる→保存と同時にビルドされるはず・・・

と、以下のようなメッセージが。

warningなので、致命的じゃないですが、気になるので調べてみる。
すると、こちらのページが参考になりました

【メモ】SassバージョンアップしたらCompassでwarningが出る
http://qiita.com/ryokio0129/items/bb62e4aeab2921290846

Compass & Sass Deprecation warning
https://stackoverflow.com/questions/35949660/compass-sass-deprecation-warning

メッセージにある、
C:/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/css3/_deprecated-support.scss
を開いてみます。

85行目あたり

この部分を以下のように修正します。

そして保存。

無事エラーは出なくなり、Compassのビルドもできるようになりました。

 

OSX Yosemite にSass,Compassのインストールとエラー対処

長年愛用してきたmacbookpro(2008 early)に別れを告げるべく、ついに新型MJLT2J/Aを購入しました。
appleサイトでは、15.4インチ 2.5GHzは、282,800円(税別) 2015年10月20日現在。
Applecare protectionを付けたら、税込35万近くなります–;

この辺に円安の影響がでてるんでしょうか。痛いですね~
これを購入しようかと思いましたが、結局秋葉原のWinkさんで購入しました。

APPLE Mac ノート
MacBook Pro Retinaディスプレイ 2500/15.4 MJLT2J/A MJLT2J/A
https://www.winkdigital.com/item/index.jsp?pid=156292&stid=1

ヤマトの3年間延長保証もつけてみました。
過去に壊れた経験があるので。
そのときはヨドバシの延長保証で10万近くのものカバーしてもらいました。
アップル製品iphone以外は延長保証は3年までしかつけられないようです。
ここは残念だけど

昨日、無事商品が届き、現在セットアップ中^^

OSの起動の速さにびっくりしてます。
多分、電源押してから、1分かかってないんじゃないかと。
今までのmacbookproも愛着がありますが、新しいモデルってスゴイですね。

で、いろいろアプリをインストールしたりしていて、sass,compassをインストールするところでちょっとつまづき。

osxには、rubyはすでにインストールされていますので
一応、updateを。

環境によってはsudoつけないとパーミッションエラーになります。

Sassをインストール

バージョン確認

 

続いて同様に

すると、

 

のようなエラーメッセージが。
調べると、Command Line Developer Toolsをインストールする必要があるみたいでした。

すでにXcodeをインストールしていたので、Xcodeを起動し
Open Developer Tool->More Developer Tools

xcode

するとAppleDeveloperサイトのDownloads for Apple Developerページが開くので(要AppleIDログイン)
Command Line Toolsをインストール

command line toolインストール

スクリーンショット 2015-10-21 7.13.30

 

こちらのサイトを参考にさせていただきました

http://koukitips.net/mac_terminal_sass_compass/

MavericksでCommand Line Tools for Xcodeをインストールする
http://qiita.com/3yatsu/items/47470091277d46f3fde2

config.rbに追記するべき

imagesフォルダへのリンクはデフォルトだと絶対パスになる。
それを相対パスになるようにするには

生成されたcssにcompassのコメントが入るのを消したい

コメントアウトされてるので「#」をとる

scss でフォントサイズをremで指定するmixin

今さらながら、SCSSからCompassを使いはじめました。

今さらながら、その便利さに驚愕している日々です。

いろいろ覚えておきたいことは一杯あるのですが今日は基本となるfont-sizeの指定をカンタンにできるようにするmixinの覚え書き。

まずは、rootのフォンとサイズを10pxにするため、htmlに以下のように指定します。

そしてbodyを14pxを指定する場合、

css3のremの指定と対応していないIE対策としてpxを一緒に指定します。

これをmixinにするには

とし、18pxで表示したいところには

とするだけ!

めちゃくちゃカンタンになりました!

 

参考にさせていただきました:

SCSSで古いIEなどにもrem感覚でフォントを指定する方法

http://negimemo.net/1141