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

Sassの基礎

前々回の記事でSassの環境を整えました( Sassの環境を整える ) 。今までは使うための準備でしたが今回は実際に使っていくための基本的な書き方を学習していきます!Sassにはたくさん書き方や応用で

フロントエンド

2020.05.31

jQueryの基礎

今回は、JavaScriptのライブラリのjQueryの基礎部分をまとめていこうと思います。最近ではjQueryは微妙と聞くこともありますが個人的には素のJSよりも触ってみて扱いやすかったので勉強のた

フロントエンド

2020.04.09

jQueryのeachメソッドの使い方

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

フロントエンド

2020.06.10

よく使うjQueryメソッド備忘録

結構jQueryを触っていてこのメソッドどうやって書くんだっけと、ついど忘れしてしまうときがあって、いちいちそのためにググってというのもめんどくさいので、備忘録としてここにまとめておきます。今後もなに

フロントエンド

2020.07.09

profile

kobayashi kent

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