HOME > デスクトップアプリ > Web > AIRアプリ「Scout」で「Sass(SCSS)」を導入してみる

AIRアプリ「Scout」で「Sass(SCSS)」を導入してみる

「Sass」を導入するには、「Ruby」のインストールやコマンドプロンプトの使用やらとハードルが高かったのですが、「Scout」というAIRアプリを使うことによって簡単に導入できるようになりました。

「Sass(SCSS)」には、

  • ルールのネスト
  • & 親セレクタの参照
  • コメント
  • 変数
  • 演算
  • ミックスイン
  • スタイルの継承(@extend)

などの記法があります。

「Sass(SCSS)」を導入するに当たって参考になるサイトを紹介します。

「Sass(SCSS)」を簡単に説明すると、例えば「base.scss」というファイルに

@charset "utf-8";
/* 変数のテスト */
$bg: #DDD;
#left_column {
background-color: $bg;
}
#right_column {
background-color: $bg;
}
/* ネストのテスト */
#navbar {
  width: 80%;
  height: 23px;
  ul { list-style-type: none; }
  li {
    float: left;
    a { font-weight: bold; }
  }
}

のように記述すると「base.css」に

@charset "utf-8";
/* 変数のテスト */
/* line 6, ../scss/base.scss */
#left_column {
  background-color: #dddddd;
}
/* line 9, ../scss/base.scss */
#right_column {
  background-color: #dddddd;
}
/* ネストのテスト */
/* line 14, ../scss/base.scss */
#navbar {
  width: 80%;
  height: 23px;
}
/* line 18, ../scss/base.scss */
#navbar ul {
  list-style-type: none;
}
/* line 19, ../scss/base.scss */
#navbar li {
  float: left;
}
/* line 21, ../scss/base.scss */
#navbar li a {
  font-weight: bold;
}

のように出力されます。(「base.css」自動的に作成されます。)

このように、記法さえ覚えてしまえばスタイルシートの記述を効率的に行なえるようになり、またメンテナンス性も向上します。

UP