恵比寿のWebサイト制作・Webデザインチームのブログ。Webデザインやコーディング、SEO対策まで幅広く手掛けています。

恵比寿のデザイン制作チームのブログです。

Webデザイン、
Web制作、
SEO対策の
ご依頼・ご相談

Contact

bracketsでSassを導入する方法

投稿日:2018-04-03 更新日:




SassTop2

CSSをより便利に扱うためにSassというCSSを拡張したメタ言語があります。

Sassを使うことでCSSをプラグラムらしく記述することができます。それによってコーディングの効率が劇的にあがります。

今回はSassをbracketsのライブプレビューで見れるように導入する方法を紹介します。

手順1:Rubyをダウンロードする

Rubyを以下のサイトでダウンロードします。
https://www.ruby-lang.org/ja/downloads/

ダウンロード後、インストールできたらCommand promptを開いてruby -v と入力し、Enterでrubyがインストールされていることを確認します。

C:\Users >ruby -v
ruby 2.4.4p296 (2018-03-28 revision 63013)[x64-mingw32]

手順2:Sassをインストールする

Command promptでsudo gem install sassと入力してEnter
(Windowsの場合はgem install sass)

しばらく待って、インストールできたらsass -vを入力し、Enterでsassがインストールされていることを確認します。

C:\Users >sass -v
Ruby Sass 3.5.6

手順3:Sassをcssに変換するコンパイラをダウンロードする。

ブラウザはsassファイルを読み取ることができないため、cssに変換する必要があります。
コンパイルするためのGUIソフトは色々ありますが、ここではフリーの「Koala」を使用します。
以下のリンクからダウンロードできます。
http://koala-app.com/

Koalaをダウンロード、インストールできたら開きます。

変換したいscssファイルの入ったフォルダを、Koala画面中央にドラッグするとフォルダ内のscssファイルが読み込まれます。
sass1-2

 

表示されたscssファイルをクリックすると右にメニューが現れます。
sass2

Koalaの設定を整える

メニューに表示されている自動コンパイル、Source Map、Autoprefixの3箇所にチェックを入れておきましょう。
Autoprefixはベンダープレフィックスを自動でつけてくれる機能です。
自動コンパイルはエディターでsassファイルを編集して保存した際に、自動でcssファイルを作成してくれます。
Source Mapはグーグルのデベロッパーツールでサイトを検証したときにsassのファイルも表示してくれます。無くても良いですが、あるにこしたことはないでしょう。

sass3

メニュー下部にあるアウトプットスタイルは出力されるcssの記述形式です。個人的にはexpandedかcompressedが良いと感じています。

expandedは通常のcss方式の見た目で、ファイル容量は重くなりますが、scssのネストやインデントを取り除いた見やすいコードになります。

compressedはスペースを全て取り、コードを圧縮して記述します。見づらさはあるものの、読み込みスピードは非常に速いです。

また、sassファイルを右クリックで、アウトプットパス設定を開くことで作成されるcssファイルの出力先を決めることができます。

Bracketsの設定

最後にBracketsの設定です。
まず、「拡張機能マネージャー」→「入手可能」→「Brackets SASS Code Hints」を検索してインストールします。
「インストール済み」から有効化されているか確認しましょう。画像の様に「無効」ボタンが表示されていれば問題ありません。
sass4

以上がSassの導入になります。
試しにコードを書いてみましょう。

html

<main>
   <section>
     <h1>h1です</h1>
     <p>pタグです</p> 
   </section>
</main>

 

scss

@charset "utf-8";

@mixin font($font-size,$color){
font-family:'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
font-size: $font-size;
font-weight: bold;
color: $color;
}

main{
  width: 100%;
    section{
      background-color: #ccc;
      height: 100px;
        h1{
          @include font(25px,#f00);
        }
        p{
          @include font(16px,#00f);
        }
    }
}

保存をするとKoalaがcssファイルを自動で生成します。(Koalaは開いたままにしておくこと)
htmlのhead内に出力されたcssへのリンクを記述しましょう。

これで、ライブプレビューボタンを押すとブラウザ上できちんと反映されているはずです。
一度設定してしまうと非常に便利ですね。

 

Koalaでエラーが出てしまうという方は、よくある原因としては次のようなものがあります。

  • パスの中に日本語のファイルがある
  • Sassファイルの中に全角のスペースがある
  • Sassファイルの中で@charset utf-8を設定していない。
  • @charset utf-8より上の行に何らかの記述をしている(コメントアウト含め)

これらをきちんと守らないと、コンパイル時にInvalid(無効)のエラーが出てしまうので気をつけましょう。




この記事をシェアする

  • Twitter
  • Facebook
  • BookmarkB!
  • Pocket

Related Entries

この記事を書いた人

TOM

TOM

Webデザイナー、UI/UXデザインと共にJavascript、PHP等のプログラミング言語について日々勉強中。