【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜基礎編

【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜基礎編

すぐに使えるSCSS入門

すぐに使えるSCSS入門

#SCSS
#HTML5
#RIA
#CSS
野中 龍一

野中 龍一

facebook logohatena logotwitter logo
Clock Icon2012.10.09

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

早速ですがみなさん、黒い画面（コンソールやターミナル）はお好きですか？
ちなみに僕は最近やっと黒い画面に対していくつかの呪文使えるくらいになりました。文系理系でもどちらでもなくさらに低学歴の僕にとっては潜れば潜るほど黒い画面がつきまといます。（今では好きですよ、黒い画面）

今回は、すぐに使えるSCSS入門｜基礎編ということで、「黒い画面など見たくない！」というあなたにも、GUI操作だけですぐに使えるアプリケーションのインストールからSCSSの基本的な利用方法について、実際の開発に使えるポイントを押さえて解説していきたいと思います。

SCSSを覚えて生産的で楽しいWebサイト制作・アプリケーション開発をしていきましょう。

まだSCSSを知らない方向けに「SCSS」って？

前回の記事「Media Queriesの記述を少し楽にしてくれるSCSS（Sass） Mixin（自作）」からの引用をぺたり。

SCSS(Sass)はCSSをもう一度楽しくするCSSにコンパイルするためのメタ言語です。

SCSSにはネストされたルール、変数、ミックスイン、セレクタ継承などCSSにあるととっても便利な拡張を使うことができるようになります。
その他にもif,for,each,whileなども使えるようになります。

ちなみにSassには2つの構文があり、SCSS（Sassy CSS）とSass（インデント構文）に別れます。SCSSは.scssという拡張子、Sassは.sassという拡張子を持ち、お互いにSass-convertコマンドラインツールを使うことで変換もできますし、どちらの構文で書かれたとしてもインポートできます。

ちなみに私はよりCSSの記述に近いSCSSを利用しています。

全体の流れ

今回の大まかな流れです。順を追って説明していきます。

  1. Scoutのインストール
  2. Windows OS 64bit版のエラー回避方法（※重要）
  3. Scoutでプロジェクト定義
  4. 自動処理の起動
  5. SCSSの編集作業
  6. SCSSの主な4つの機能

GUI操作が可能なScout.appのインストール

１，ダウンロード

まずは、Scoutのページから最新版のScout.appをダウンロードします。この記事を執筆している時点ではversion 0.7.1が最新版です。

２，インストール

ScoutはAdobe AIRでできているのでAIRが必要になりますが、無ければScoutのインストール時に自動インストールされるので気にしなくて大丈夫です。

セキュリティ情報を許可してインストールを完了させます。インストール時のセキュリティは自己責任でお願いいたします！完了すると以下の画面が立ち上がります。
すでにプロジェクトが作られていますが、初回インストールであればプロジェクトは表示されません。

※開発環境がWindows OS 64bitの場合（注意）

64bitの場合、アプリケーションのコアファイルを修正する必要があります。難しいものではありません。

まず、テキストエディタを管理者権限で起動します。「アイコンを右クリック」や「プログラムやファイルの検索を行って該当プログラムを右クリック」してエディタを起動します。

 エディタを起動したら、Scoutがインストールされているディレクトリにある「process_interaction.js」というファイルを開きます。
 ドラッグアンドドロップでは管理者として編集できない場合があるので必ずメニューの「ファイル」→「開く」からファイルを開いてください。

一般的なファイルの場所「C:\Program Files (x86)\Scout\javascripts\app」

 開くを押した際に、一覧に出てこない場合はファイルの種類をすべてのファイルかJavaScriptファイルになるよう変更しましょう。

Java.exeのパスを書き換える

開いたファイルの106行目から119行目にかけてJava.exeの場所に関する記述があります。Javaを特殊な場所にインストールしていなければ「C:\\Program Files」の後に「 (x86)」を追記します。
本当はJavaのバージョンを調べて適切にパスを設定するべきですが今回は動くことを優先します。

変更前

  function javaDir() {
    if(air.Capabilities.os.match(/Windows/)) {
      path = air.File.applicationDirectory.resolvePath("C:\\Program Files\\Java\\jre7\\bin\\java.exe"); //ここ
      if(!path.exists){
        path = air.File.applicationDirectory.resolvePath("C:\\Program Files (x86)\\Java\\jre7\\bin\\java.exe"); //ここ
        if(!path.exists){
          path = air.File.applicationDirectory.resolvePath("C:\\Program Files\\Java\\jre6\\bin\\java.exe"); //ここ
        }
      }
      return path;
    } else {
      return air.File.applicationDirectory.resolvePath("/usr/bin/java");
    }
  }

変更後

  function javaDir() {
    if(air.Capabilities.os.match(/Windows/)) {
      //path = air.File.applicationDirectory.resolvePath("C:\\Program Files\\Java\\jre7\\bin\\java.exe");
      path = air.File.applicationDirectory.resolvePath("C:\\Program Files (x86)\\Java\\jre7\\bin\\java.exe"); //ここ
      if(!path.exists){
        //path = air.File.applicationDirectory.resolvePath("C:\\Program Files (x86)\\Java\\jre7\\bin\\java.exe");
        path = air.File.applicationDirectory.resolvePath("C:\\Program Files (x86)\\Java\\jre7\\bin\\java.exe"); //ここ
        if(!path.exists){
          //path = air.File.applicationDirectory.resolvePath("C:\\Program Files\\Java\\jre6\\bin\\java.exe");
          path = air.File.applicationDirectory.resolvePath("C:\\Program Files (x86)\\Java\\jre6\\bin\\java.exe"); //ここ
        }
      }
      return path;
    } else {
      return air.File.applicationDirectory.resolvePath("/usr/bin/java");
    }
  }

編集が完了したら、間違いが無いか確認して保存しましょう。

Scoutプロジェクトの定義

プロジェクトの作成

Scout.appを開いて左下のプロジェクト追加ボタンを押下します。
プロジェクトフォルダの選択画面が開くので、新規に作成するか、すでにあるデータのルートフォルダを選択しましょう。

プロジェクトが作成されました。

プロジェクトの設定

今回はサンプルとして、以下のような構成のプロジェクトを作成しました。
サンプルプロジェクトのファイルを用意したので必要な場合はダウンロードして利用してください。

  • css
    • output (生成されるCSSファイルを保存)
    • scss
      • core (サイト内で共有する読み取り用ファイルを格納)
      • style.scss
  • index.html

設定項目

  1. Stylesheet Directories
    • Input Folder* - SCSSを読み込むフォルダの指定
    • Output Folder* - 生成されるCSSファイルが保存されるフォルダの指定
  2. Othor Directories
    • JavaScript Folder - JavaScriptフォルダの指定
    • Images Folder - 画像フォルダの指定
    • Config File - コンフィグファイルの指定
  3. Output Modes
    • Environment - Scoutが生成するCSSファイルに対してコメントを付けるか付けないかの設定
    • Output Style - Scoutが生成するCSSファイルのスタイルを指定する
  4. Manage Project - プロジェクトの削除

* は必須設定の項目です。

今回は「Input Folder」と「Output Folder」のみ指定を行います。

Input Folder サンプルプロジェクトファイルのcss/scss/を指定
Output Folder サンプルプロジェクトファイルのcss/output/を指定

画像の赤線部分で選択を行います。

これでScoutの設定は完了です。
プロジェクトの自動処理ボタンを押して編集を始めましょう。
アウトプットファイルがない場合初回起動時に生成されます。

基本的なSCSSの書き方

SCSSは「.scss」という拡張子で保存し、書き方はCSSと変わりません。

変数、ネストされたルール、ミックスイン、セレクタ継承、がSCSSの代表的な機能になります。
それでは、１つ１つサンプルを作りながら説明していきます。

その他の機能についてはこちら

4つの主な機能1：変数

変数とは、箱に情報を保存し後で取り出すことができます。

CSS内で頻繁に利用するサイズや色の指定を変数で管理することで、変更の手間を大きく減らすことができます。
また、変数の値は演算が可能でサイズだけでなく、色の16進数なども計算させることができます。

HTML

このHTMLでは#header, #container, #footerの横幅を960pxに合わせる指定を行います。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>SCSS Sample Project</title>
<link rel="stylesheet" href="css/output/style.css" media="all" />
</head>
<body>
        <header id="header">
        header
        </header>
        
        <div id="container">
        countents
        </div>
        
        <footer id="footer">
        footer
        </footer>
</body>
</html>

SCSS

変数は「$」を使って定義します。サンプルでは大文字で書いていますがもちろん小文字も利用できます。大文字にしているのは定数のように使いたい時にわかりやすくするためです。

@charset "utf-8";

$MAX_CONTENT_WIDTH       : 960px;
$KEY_COLOR               :  #222;

#header
{
        width         : $MAX_CONTENT_WIDTH;

        background    : $KEY_COLOR;
}

#container
{
        width         : $MAX_CONTENT_WIDTH;
}

#footer
{
        width         : $MAX_CONTENT_WIDTH;

        background    : $KEY_COLOR;
}

Output CSS

生成されたCSSにしっかりと値が入っていますね。

@charset "utf-8";
/* line 9, ../scss/style.scss */
#header {
  width: 960px;
  background: #222222;
}

/* line 16, ../scss/style.scss */
#container {
  width: 960px;
}

/* line 21, ../scss/style.scss */
#footer {
  width: 960px;
  background: #222222;
}

上記のサンプルをもとに編集して保存してみてください。

また、Scoutのlog画面も確認してみましょう。正しく上書き保存されていれば以下のような画面になります。

>>> Change detected at 20:09:17 to: style.scss
overwrite style.css

もしエラーが表示されてしまったら、エラー箇所についてlogが残ります。修正を行って再度保存しましょう。

4つの主な機能2：宣言ブロックのネスト

CSSでは宣言ブロックをネストすることができません。セレクタをいくつもいくつも指定しなければいけません。

SCSSを使えば宣言ブロックのネストが可能になります。
ただ、セレクタをネストしすぎるとパフォーマンスに影響するので気をつけましょう。

HTML

<html lang="ja">
<head>
<meta charset="utf-8">
<title>SCSS Sample Project</title>
<link rel="stylesheet" href="css/output/style.css" media="all" />
</head>
<body>

        <header id="header">
                <h1 id="siteID">SCSS Sample Project</h1>
                <p id="description">yattaa! Hello World!</p>
        </header>

</body>
</html>

SCSS

IDのネストは意味が無いので本来はやらない方が良いです。サンプルとして見てください。

@charset "utf-8";

#header
{
        //ここに#headerのスタイル指定を記述することもできます
        
        #siteID
        {
                font-size   : 200%;
                font-weight : bold;
        }

        #description
        {
                font-size   : 100%;
        }
}

Output CSS

しっかりネストした通りにセレクタが宣言されていますね。

@charset "utf-8";
/* line 6, ../scss/style.scss */
#header #siteID {
  font-size: 200%;
  font-weight: bold;
}
/* line 12, ../scss/style.scss */
#header #description {
  font-size: 100%;
}

4つの主な機能3：Mixins（関数）

MixinsはJavaScriptの関数に似たものです。
これを使いこなせるようになるとSCSSを使うのがだいぶ楽しくなります。あんなことやあんなところに使えそうなどなど夢が膨らみますね。

HTML

このHTMLは変数のサンプルに利用したHTMLと同じソースコードです。
今度はMixinsを使って上下のマージンを調整しながら#header, #container, #footerに対して中央寄せのCSSを指定していきます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>SCSS Sample Project</title>
<link rel="stylesheet" href="css/output/style.css" media="all" />
</head>
<body>
        <header id="header">
        header
        </header>
         
        <div id="container">
        countents
        </div>
         
        <footer id="footer">
        footer
        </footer>
</body>
</html>

SCSS

@mixin center-layout($margin_top: 0, $margin_bottom: 0)がMixinsの指定になります。
引数が2つ定義されており、デフォルト値の0が指定されています。

@charset "utf-8";
 
$MAX_CONTENT_WIDTH       : 960px;

@mixin center-layout($margin_top: 0, $margin_bottom: 0) {
        margin   : $margin_top auto $margin_bottom auto; //引数を上下に指定
        width    : $MAX_CONTENT_WIDTH; //変数を指定
}

#header
{
        @include center-layout(); //引数なしでデフォルト値を指定
}
 
#container
{
        @include center-layout( 20px ); //上マージンのみ引数に指定
}
 
#footer
{
        @include center-layout( 50px, 10px ); //上下マージンを引数に指定
}

Output CSS

@charset "utf-8";
/* line 12, ../scss/style.scss */
#header {
  margin: 0 auto 0 auto;
  width: 960px;
}

/* line 17, ../scss/style.scss */
#container {
  margin: 20px auto 0 auto;
  width: 960px;
}

/* line 22, ../scss/style.scss */
#footer {
  margin: 50px auto 10px auto;
  width: 960px;
}

4つの主な機能4：セレクタ継承

セレクタ継承はCSSでもHTMLにクラスを指定することで継承と似たように振る舞うことができます。例えば以下のように。

.item
{
	line-height : 150%;
	color       : #333;
}

.item.blue
{
	color       : blue;
}

<ul>
	<li class="item">A</li>
	<li class="item blue">B</li>
</ul>

SCSSの場合、もっと簡単に他の宣言ブロックを継承することができます。とってもクリーンに。SCSSの場合を見てみます。

HTML

CSSの複数クラス指定を使わずHTMLをクリーンな状態で継承することができます。

<meta charset="utf-8">
<title>SCSS Sample Project</title>
<link rel="stylesheet" href="css/output/style.css" media="all" />
</head>
<body>

        <ul class="list">
                <li class="item">A</li>
                <li class="item">B</li>
                <li class="item">C</li>
        </ul>

        <ul class="floatList">
                <li class="item">A</li>
                <li class="item">B</li>
                <li class="item">C</li>
        </ul>

        <ul class="glidList">
                <li class="item">A</li>
                <li class="item">B</li>
                <li class="item">C</li>
        </ul>
</body>
</html>

SCSS

@extend .list;の部分で対象となるクラスを継承します。
生成されるCSSの記述量は増えますが、HTMLには影響を与えないため、CSSだけで多くを制御できるようになります。

例えばCSSでよく使われるclearfixもこの継承を使うことでHTMLにclearfixを書きまくらなくて済むようになります。

@charset "utf-8";
 
.list
{
        margin     : 20px 0 0 0;

        .item
        {
                list-style      : none;
                font-size       : 100%;
        }
}

.floatList
{
        @extend .list;

        .item
        {
                width           : 300px;
                float           : left;

                font-size       : 90%;
        }
}

.glidList
{
        @extend .list;

        .item
        {
                overflow        : hidden;
                width           : 150px;
                height          : 150px;
                float           : left;
                
                border          : 1px solid #eee;

                font-size       : 90%;
        }
}

Output CSS

それほど難しい指定ではなかったですが、書いてみると意外と面倒なCSSですね。

@charset "utf-8";
/* line 4, ../scss/style.scss */
.list, .floatList, .glidList {
  margin: 20px 0 0 0;
}
/* line 8, ../scss/style.scss */
.list .item, .floatList .item, .glidList .item {
  list-style: none;
  font-size: 100%;
}

/* line 19, ../scss/style.scss */
.floatList .item {
  width: 300px;
  float: left;
  font-size: 90%;
}

/* line 32, ../scss/style.scss */
.glidList .item {
  overflow: hidden;
  width: 150px;
  height: 150px;
  float: left;
  border: 1px solid #eee;
  font-size: 90%;
}

SCSSの継承とCSSの複数指定はどちらか一方が優れているというものではないので、必要に応じて使い分けましょう。

以上、SCSSの基本となる4つの機能でした。

まとめ

いかがだったでしょうか？CSSからSCSSに乗り換えてみると便利さに驚きます。
次回はSCSSを更に便利にするcompassについて紹介しつつSCSSのファイル分割と@importについて触れたいと思います。SCSS * compassでもう普通のCSSには戻れませんね。

Share this article

facebook logohatena logotwitter logo

関連記事

SASS là gì ? Phân biệt SASS, SCSS và CSS

SASS là gì ? Phân biệt SASS, SCSS và CSS

@wakamshaさんのAltJS,AltCSS課題をGulp, SCSS, TypeScript でやってみた

@wakamshaさんのAltJS,AltCSS課題をGulp, SCSS, TypeScript でやってみた

User avatar
植木 和樹
2017.06.07
SCSSでremを使ったVertical Rhythm

SCSSでremを使ったVertical Rhythm

User avatar
野中 龍一
2015.07.07
これからはじめるGulp #25：Hologramとgulp-hologramでスタイルガイドを作る

これからはじめるGulp #25：Hologramとgulp-hologramでスタイルガイドを作る

User avatar
野中 龍一
2014.12.25
Classmethod's white logo
Facebook's logo
X's logo
YouTube's logo

© Classmethod, Inc. All rights reserved.