SCSSの5つの文法紹介とメリットとは？書き方についても紹介！
- システム
エンジニア - SCSSとはどんな言語なのでしょうか？
- プロジェクト
マネージャー - SCSSはプログラム言語ではなく、Rubyで作られたメタ言語のことです。実際のソースを見ながら理解を深めていきましょう。
SCSSとは何か
SCSSとは、Sassの構文の一つであり、ウェブページのスタイルを指定するCSSをより効率よく記述するためのものです。
Sassとは「Syntactically Awesome Stylesheets」の略で日本語に訳すと、「構造的にすばらしいスタイルシート」という意味です。
SCSSは、CSSと同様「{…}」でブロックを作り、文末に「;」を使います。あらゆる構文を使うことができるCSSの拡張版です。
CSSはコーディングを進めるにつれて、より肥大化し、複雑になり、メンテナンスが難しくなっていきますが、SCSSはそれらを抑え、効率的に、読みやすくメンテナンスのしやすいコードを書くことができます。
SCSS入門におすすめのコンパイルする方法
SCSSを使うことによって、効率よく見やすいコードを書くことができますが、そのコードを使用するためには、CSSにコンパイル、すなわち変換する必要があります。
コンパイルする方法を2つ紹介します。まだSCSSの入門を始めたばかり、もしくはこれから始めようと考えているという人は、2つ目の方法を試してみて下さい。
Prepros
Preprosは、SassをCSSに変換するGUIコンパイラです。
scssをCSSにコンパイルする以外にも開発に便利な機能が備わっており、HTMLやCSSを更新すると自動でブラウザがリロードされたり、スマートフォンからでも確認できるようにローカルサーバーが用意されています。
scssの入門から勉強を始めている人にとっては、便利で嬉しい機能が搭載されています。しかし、Preprosは多機能ではありますが、無料版では購入を促すポップアップが表示されコーディングの邪魔になるため、無料版での使用はおすすめできません。
SCSSの5つの文法紹介とメリット
次にscssの基本的な文法の紹介を致します。scssを使うことでうまれるメリットについても紹介致します。
scss入門から学んでいる方、独学で学んでいる方も是非参考にして下さい。
1：SCSSの変数 (variables)
SCSSでは、変数が使用できます。繰り返し使うような値を変数に格納しておけば、メンテナンス時に変更したい箇所が出て来た時に、少ない作業量で済みます。
以下のコードはSCSSで書いており、「$main-color」という変数に「red」をいれ、「h1タグ」「h2タグ」「h3タグ」それぞれの「color」に、その変数「$main-color」を設定しています。
もし、赤にしている部分を青に変更したいとなった場合、「$main-color:red;」の部分を「$main-color:blue;」に変更するだけで、「h1タグ」「h2タグ」「h3タグ」すべてに反映されます。
|
1
2
3
4
5
6
7
8
9
10
|
$main-color:red;
h1{
color:$main-color;
}
h2{
color:$main-color;
}
h3{
color:$main-color;
}
|
以下は上記SCSSで書かれたコードをCSSで書いたものですが、「h1タグ」「h2タグ」「h3タグ」すべての色を青に変更したいとなった場合、3カ所変更する必要がでてきます。
SCSSであれば1カ所変更するだけで済むので、作業量が減ります。コードの量が多くなればなるほど、修正作業が発生した時の手間が省けます。
|
1
2
3
4
5
6
7
8
9
|
h1{
color:red;
}
h2{
color:red;
}
h3{
color:red;
}
|
2：SCSSのネスティング (nesting) について
SCSSの特徴としてネスト（階層化構造）を利用できます。
ネストにより、CSSの全体の記述量を減らすことができたり、htmlファイルの構造をイメージしやすくなったりするため、読みやすく、メンテナンスのしやすいコードになります。
以下はSCSSで書いたものです。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
nav{
ul{
margin:0;
list-style:none;
}
li{
margin:0;
}
a{
padding:10px;
}
}
|
上記で紹介したSCSSをCSSにコンパイル（変換）すると、以下のようになります。
今回紹介しているコードは単純で小さなコードなので、メリットは感じにくいかもしれませんが、規模が大きくなるにつれて、コードを階層化できていることで読みやすく、非常にメリットを感じるはずです。
|
1
2
3
4
5
6
7
8
9
10
|
nav ul {
margin: 0;
list-style: none;
}
nav li {
margin:0;
}
nav a {
padding:10px;
}
|
3：SCSSのミックスイン (mixins)
「@mixin」を使うことによって、修正作業の効率化を図ることができます。
以下はSCSSのコードですが、@mixinでコードの塊を作成し、別の場所でそれを呼び出すことができます。
以下は「hoge」という「mixin」を作成し、それを「.test」、「.test2」で呼び出しています。
|
1
2
3
4
5
6
7
8
9
10
|
@mixin hoge($color: #fff, $fSize: 10px) {
color: $color;
font-size: $fSize;
}
.test {
@include hoge(black, 20px);
}
.test2 {
@include hoge();
}
|
上記SCSSのコードをCSSで書き直すと、以下のようになります。
|
1
2
3
4
5
6
7
8
|
.test {
color: black;
font-size: 20px;
}
.test2 {
color: #fff;
font-size: 10px;
}
|
「@mixin」は入門者にとっては少し難しいかもしれませんが、使いこなせば、より効率よく見やすいコードが書けるようになるでしょう。
4：SCSSの継承 (inheritance)
SCSSの継承 (inheritance) とは、親要素で指定したものが継承して適用されるものです。
以下のSCSSでは「%test-shared」でスタイルを指定し、「.test1」や「.test2」の
「@extend %test-shared;」のコードにて「%test-shared」で指定したスタイルを継承しています。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
%test-shared {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.test1{
@extend %test-shared;
}
.test2{
@extend %test-shared;
border-color: green;
}
|
上記SCSSのコードをコンパイルすると以下のようなCSSが生成されます。
|
1
2
3
4
5
6
7
8
9
|
.test2, .test1 {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.test2 {
border-color: green;
}
|
このように、共通するプロパティは一つの塊にまとめられ、その差分だけが「.test2」の「border-color: green;」を表示されます。
こちらも入門者にとっては少し難しいかもしれませんが、挑戦してみてはいかがでしょう。
5：SCSSのコメント
scssを使用することでCSSコードが見やすく、変更時も少ない作業で変更可能になります。
ご紹介した文法をマスターし活用することで、効率がいいスタイルのコードが書けるようになります。メンテナンスもしやすくなるので是非お試し下さい。
もっと詳しく学びたい方はscss入門書も出ていますので確認してみて下さい。
「SASS」と「SCSS」の書き方とは？
SassはCSSを拡張した言語のことです。ファイルの拡張子として、SASS記法とSCSS記法の2つの記法があります。
Sassの2つの記法のうち多く使用されているのはSASS記法です。
SCSS記法
SCSS記法は主にCSSにネストを使用したコードです。そのためスタイルの書き方はCSSとさほど変わりません。
SCSS記法やSCSSファイルと書かれることが多いです。
Sassの記法2つのうち後に作られました。
SASS記法
SASS記法はコードを書く際に「{…}」を使わず、文末に「;」も付けません。インデントを主としている簡単な記法です。
SASS記法やSASSファイルと書かれることが多いです。
Sassのうち最初に作られた記法です。
- システム
エンジニア - シンプルに効率よくCSSコードがかけるということですね？
- プロジェクト
マネージャー - そうです。わかりやすくシンプルなコードを書くことができます。
SCSSを理解してコーディングに活かそう！
通常Sassを使う際はSCSS記法を使用します。scssを使用することでのメリットがたくさんあることを理解していただけたと思います。
一度文法をマスターしてしまえばシンプルで分かりやすくメンテナンスしやすいコードが書けるようになります。コーディングの際に是非SCSS記法を活かして下さい。
FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
株式会社オープンアップシステムはこんな会社です
秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。
-
スマホアプリから業務系システムまで
スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
-
充実した研修制度
毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
-
資格取得を応援
スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
-
東証プライム上場企業グループ
オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。
安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。
株式会社オープンアップシステムに興味を持った方へ
株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。
年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。
新着案件New Job
-
開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク
月給29万～30万円東京都品川区(大崎駅) -
遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万～60万円東京都港区(六本木駅) -
病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク
月給30万～30万円東京都豊島区(池袋駅) -
開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万～50万円東京都豊島区(大塚駅) -
債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務
月給62万～67万円東京都文京区(後楽園駅) -
PMO/東京都豊島区/【WEB面談可】/在宅勤務
月給55万～55万円東京都豊島区(池袋駅)
