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

related

three.jsについて

卒業制作でthree.jsを使って作品を作ろうと考えており、今three.jsを勉強中です。使い始めた技術なのでなかなか関数など覚えきれないのでブログにまとめていこうと思います。今回は全体の流れをまと

フロントエンド

2020.10.26

Markdown記法備忘録

前回の記事でHexoを使ってサイトを制作しましたが、そのサイトの記事を書いていくには、Markdown記法を使う必要があります。いつもWordPressのGUIで記事を更新している私にとってはあまり馴

フロントエンド

2020.09.13

jQueryのeachメソッドの使い方

jQueryでは複数の要素に対して繰り返し処理を行う場合にeach()を使うことができます。そのeach()を使いこなしたていきたいので今回しっかりまとめていきます! eachメソッドって何? そもそ

フロントエンド

2020.06.10

Hexoを使ってみた

今回は、静的サイトジェネレーターのひとつであるHexoを使って日記的なサイトを作ってみたので簡単な紹介とHexoの使い方などまとめていこうと思います。制作したサイトのURLはこちらです。URL(htt

フロントエンド

2020.09.11

profile

kobayashi kent

トライデントコンピューター専門学校Webデザイン学科
アニメとかゲームとか音楽聴くのが好き