vdeep

*

vdeepはプログラミング、IT、Web技術、ライフハックの事などなどを管理人okutaniがつぶやくブログです。月間11万PV〜。

【Win・Mac】Sassを導入&初めてScssを使ってみる

      2017/01/31

LINEで送る
Pocket

sass-scss
こんにちは、okutani(@okutani_t)です。今まで、Webコーディングの際はCSSでちょこちょこ書いていたのですが、最近はやりのSassを使ってみました。

仕事場の開発環境がWindows、自宅がMacなので、それぞれの導入手順を本記事に記しておきます。

Sassとありますが、実際に利用するのは『Scss』です。かんたんな説明ですが、次のような違いがあります。

  • Sass(ruby/hamlライク)
  • Scss(css3ライク)

最近ではCSS3ライクである『Scss』が主流なようです。Scssは、Sassをインストールすれば利用できるようになるため、『SassをインストールしてScssを利用する』といった流れになります。

なお、Scssを利用するには以下が必要です。

1. Ruby
2. Sass本体

ドットインストールにも解説が載っているので、一度目を通しておくと良いかと思います。

参考Sass/SCSS入門 (全15回) – プログラミングならドットインストール

本記事では、Windows・MacそれぞれにSassをインストールをおこない、かんたんな使い方を説明しています。

では、はじめにRubyをインストールするところから始めていきましょう。

スポンサーリンク

Rubyのインストール

SassをインストールするためにRubyが必要です。Rubyが何かよく分からなくても大丈夫なので、ここは気にせずにRubyのインストールを進めましょう。

Macの場合、Rubyはデフォルトでインストールされているため、そのままSassのインストールの項目まで進んでください。

Windowsの場合は、下記サイトから実行ファイルをダウンロードします。

LINKDownloads

今回は、2015.11現在の最新版である「Ruby 2.2.3 (x64)」をダウンロードしました。

sass-scss1

ダウンロードが済んだら、ダブルクリックでインストーラーを実行しましょう。

インストール先とオプションの指定』まで進み、次のとおりに設定します。

sass-scss2

Td/Tkサポートをインストールする』はGUIアプリケーションの作成を可能にするオプションです。ここでは不要なのでチェックしませんでした。

Rubyの実行ファイルへ環境変数PATHを設定する』にチェックを入れます。これをチェックしないとRubyが実行できないので注意してください。

.rbと.rbwファイルをRubyに関連づける』にチェックしておくと自動で.rbファイルをRubyのファイルとして扱ってくれるのでチェック。

チェックが済んだら、そのままRubyのインストールを進めてください。

Rubyのインストール確認

問題なく進めば、Rubyのインストールが完了します。

Rubyが無事にインストールされたか、コマンドプロンプトを使って確認してみましょう。次のコマンドで確認します。

> ruby -v

sass-scss3

Rubyのバージョンが確認できればOKです。

Macの方でも一応、Rubyが入っているか確認しておきましょう。

$ ruby -v

では、次にSassを導入していきます。

Sassのインストール(Windows)

WindowsにSassをインストールする手順を紹介します。インストールはコマンドプロンプトにコマンドを入力して行っていきます。

まず初めに、文字コードをUTF-8にして文字化けを防いでおきます。

> set LANG=ja_JP.UTF-8

Sassのインストール時に使う『RubyGems』をアップデートしておきます。

> gem update --system

RubyGemsを使って、Sassをインストールします。

> gem install sass

sass-scss4

これでWindowsにSassが導入できました。

下記のコマンドで無事インストールされたか確認しておきましょう。

> sass -v

Sassのバージョンが表示されればOKです。

Sassのインストール(Mac)

MacにSassを導入する手順を紹介していきます。

ターミナルを開いて、次のコマンドでRubyGemsをアップデートしておきます。

$ sudo gem update --system

次のコマンドでSassをインストールします。

$ sudo gem install sass

sass-scss5

これでMacにSassがインストールされました。確認しておきましょう。

$ sass -v

バージョンが表示されればOKです。

Sassのインストールが済んだので、実際にScssを記述して、CSSファイルを生成してみましょう。

Sassを使ってCSSファイルを生成してみる

かんたんですが、Sassの使い方を載せておきます。

style.scss』という名前でファイルを作成し、下記を記述。

#main {
  width: 940px;
  p {
    font-size: 14px;
  }
}

このように『#mainの中にあるp』を、入れ子にして書くことができます。直感的で分かりやすいですね。

ではさっそく、ScssからCSSに変換(コンパイル)してみましょう。

まずはコマンドプロンプト(Macはターミナル)のcdコマンドで.scssファイルがある場所まで移動します。

例として、デスクトップにstyle.scssがある場合は次のとおりです。

$ cd ~/Desctop

次のコマンドで、style.scssからstyle.cssを出力することができます。

$ sass --style expanded style.scss:style.css

これで、style.scssからstyle.cssを生成することができました。ちなみに『--style expanded』オプションをつけてあげることで、インデントをきれいに整えてくれるので便利です。

--style expandedなし

#main {
  width: 940px; }
  #main p {
    font-size: 14px; }

--style expandedあり

#main {
  width: 940px;
}
#main p {
  font-size: 14px;
}

また、.scssと.cssファイルがそれぞれscss, cssフォルダに格納されている場合は、

$ sass --style expanded scss/style.scss:css/style.css

としてあげればOKです。

CSSファイル生成を自動化する

毎回、わざわざコマンドを打ってCSSに変換するのはめんどうですね。

次の手順をおこなうと、.scssファイルを保存したとき自動で.cssファイルに変換して出力してくれます。

$ sass --style expanded --watch scss:css

上記コマンドをかんたんに解説すると、『scssフォルダ内のファイルが変更されたら、cssフォルダに書き出す』といったことが自動化される、といったものです。

style.scssに何か変更を加えて保存してみましょう。自動でcssフォルダの中にあるstyle.cssに、変更が反映されます。

sass-scss6

自動変換を終了したい場合はCtrl + Cを入力しましょう。

とても便利にCSSを書くことができました。この機会にぜひScssを活用してみてください。

まとめ

Windows・MacにSassを導入する方法と、Scssのかんたんな使い方を説明しました。

さらに、Compassなどのフレームワークを使うとより便利に使えます。興味がある方は調べてみてください(僕もまだ勉強中…)。

HTML,CSSをよく書く方は、この機会にSass(Scss)を使えるようになっておくと良いですね。参考にしてください。

この記事が気に入ったら
いいね ! しよう

Twitter で
LINEで送る
Pocket

okutani (@okutani_t) のヒトコト
前まではLessをちょこちょこ使っていたのですが、Bootstrap4からはScssが使われるようなので切り替えてみました。自動コンパイル便利ですね!( ´ ▽ ` )ノ

 - CSS

スポンサーリンク

PC用AdSense

PC用AdSense

Share
  • このエントリーをはてなブックマークに追加

  こちらの関連記事もどうぞ

[CSS] リンクの頭に参考バッヂ付けたらレイアウト崩れた。white-spaceで解決

CSSで可愛いレイアウトが出来るとうれしくなりますよね。Webデザインのお勉強中 …

[レスポンシブ対応] CSSでチャット風デザインを実装する

「好きなプログラム言語何?」と聞かれれば、ためらいなく「CSS」と答えるokut …

WordPress記事内の画像に影をつける方法

こんにちは、okutani(@okutani_t)です。WordPressサイト …

hタグ下に斜めのストライプボーダーを設置&ボーダー画像の作り方解説

デザインセンスが皆無、見よう見まねでWebデザインやってる僕okutani(@o …

「Animate.css + wow.js」でWebサイトにアニメーションをつけてみよう

こんにちは、okutani(@okutani_t)です。みなさんはWebサイトに …

CSSでリンク横に「参考・LINK」バッジをつけてみよう

こんにちは、okutani(@okutani_t)です。今回は、リンク横にCSS …

ポチレバをCSSで装飾してみた

こんにちは、okutaniです。前回「カエレバをCSSで装飾してみた | vde …

CSSで“蛍光ペン”っぽく文字にマーカー線を引く方法

こんにちは、okutani(@okutani_t)です。Twitterでこんな質 …

[WordPress]記事内で使える『連載記事一覧』機能をPHPで作ってみた

こんにちは、okutani(@okutani_t)です。ブログを書いていると、連 …

カエレバをCSSで装飾してみた

こんにちは、okutani(@okutani_t)です。Amazonや楽天の商品 …

vdeepのトップページへ戻る画像です。風船の形をした島を女の子が掴んでいます。