kokeblog

Sassの環境を整える

  • 2020年05月03日
  • 今回は、何となく避けてきたSassを勉強しようとふと思ったのでブログにまとめていきます。学校の授業で少し触ったのですがほとんど覚えていませんので時間もありますので覚えていこうと思います。

    Sassとは?

    そもそもSassって何?というところからまとめていきます。

    Sassは「Syntactically Awesome Style sheets」の略でCSSをより効率よく書けるように生まれたものです。普通のCSSでは使えないような変数や関数を使って書くことができます。書き方自体もかなり変わって入れ子構造で書いていきます。

    Sassを使うための環境を整える

    Sassを使うために色々と準備することがあります。

    Sassのインストール

    まずSassをインストールするところからです。SassをインストールするにはRubyがインストールされている必要があります。今回、Macで環境を整えているのでRubyのインストールは不要です。元々入っていますからね。Windowsの場合はRubyをインストールする必要があるので注意してください。本題のSassのインストールですが、ターミナル(Windowsの場合はコマンド プロント)を使用します。ターミナルを起動したら、以下のコマンドを入力します。

    sudo gem install sass

    Windowsの場合はsudoはいりません。Macはroot権限というもので実行しないといけないらしく一番前にsudoが必要みたいです。

    インストールできたか確認するためにSassのバージョンを確認できる下記のコマンドを入力してみましょう。

    sass -v

    入力して下記のような文字が出てきたらインストールできています。

    Ruby Sass 3.7.4

    これでSassをインストールする作業は完了です!

    Sassのコンパイル

    次はSassのコンパイルのやり方をまとめていきます。SassはそのままではブラウザがちゃんとCSSとして読み取れずせっかく書いたのに装飾ができていない状態で表示されてしまいます。ブラウザがきちんと読み込める状態にする必要があるのでコンパイルしなくてはいけません。

    調べていくと色々とやり方はあるみたいですね。VScodeの拡張機能である「Live Sass Compiler」をインストールして割と簡単にできるやり方もありますね。今回は、ターミナルにコマンドを入力してコンパイルするやり方を書いていきます。

    まずは、ターミナルを起動してSassのファイルのあるディレクトリまで移動する必要があります。下記のコマンドを打ち込んで目的のディレクトリまで移動しましょう。

    cd Sassのファイルがあるディレクトリ

    例えばデスクトップのtestという中にSassのファイルがあるとするなら

    cd Desktop/test

    と入力すればOKですね。

    目的のディレクトリまで移動したら次は下記のコマンドを入力してコンパイルします。

    sass scssファイル名:cssファイル名

    今回はscssファイルで考えています。style.scssというファイル名なら以下のようになります。

    sass style.scss:style.css

    ただこれだとSassで書くたびにターミナルでコマンドを入力しないといけないのでかなりめんどくさいですよね。そこでSassファイルを書いて保存するたびにCSSファイルを書き出してくれるコマンドが下記になります。

    sass –watch scssファイル名:cssファイル名

    先ほどのようにstyle.scssというファイル名なら以下のようになります。

    sass –watch style.scss:style.css

    これでSassを使うための準備はOKです。

    まとめ

    今回はSassを使っていくための環境を整えるためにやるべき作業をまとめていきました。慣れないうちはコマンドなど忘れてしまうことも多いと思うので忘れたときはそのつどこの記事を見て思い出しつつ徐々に覚えていきたいと思います。次の記事でSassの具体的な書き方を学習してまとめていこうと思います。

    Pocket

    関連記事

    Sassの基礎

    jQueryを使って一番上に戻るボタンを実装する

    jQueryのeachメソッドの使い方

    フォーム作成の備忘録

    カテゴリー