mame_hashbill@mame_hashbill
Article information
RevisionsEdit RequestsShow all likersShow article in Markdown
Report article

【これからScssを使う人へ】Scssの使い方と便利さをさらっと紹介するぞ

HTMLCSSSassscss初心者

この記事は

普段CSSでコーディングしているけど、
Scssも便利らしいし勉強しなきゃなあと思ってる人向けの記事だよ！！

わたしも初めからScssを使ってたわけではないので、使ってみるまでいまいち便利さがわからなかったんだが、
今はもう逆にCSSでどうやって書いてたかよく覚えてないぞ・・・(´-ω-｀)うぬぅ

Scssって何？

Sass は Syntactically Awesome Style Sheets (構文的に素晴らしいスタイルシート) の略で、CSSを便利に使えるように拡張した言語です。

-SASS (scss) の基本的な使い方/Web Design Leaves

CSSとだいたい一緒だけど、色々できてめちゃ便利になったのがSassって感じだな。

あれ？Sass？Scssじゃないの？

SassとScssはだいたい一緒だけど、ちょっと違う。
で、CSSから入ってるひとなら絶対Scssのが親しみやすい。

違いはあとで説明するけど、簡単に言うとCSSの書き方と似ている方がScssで、
もっと書き方が簡略化されているのがSassって感じだ。
（SassとScssの違いに飛ぶ）

WebでScssが試せるぞ

Scssは、コンパイルして一回CSSとして出力させてからHTMLに読み込ませるっていう仕組みなので、そもそもコンパイルできる環境ができてないと使えないのだけど、構築ができてなくても実際にどんな風に書けるのか試せるサイトが存在するので紹介。

環境ができてないけど勉強したいって人はひとまずこの辺で試してみるといいと思うぞ。

・SassMeister | The Sass Playground!
　書いたScssを即時でコンパイルして出来上がったCSSも右側に表示してくれるサイト。
・CodePen
　登録後、CSSの設定のところで「Scss」を選択すると、Scss記述でも書けるようになるサイト

Scssの書き方

じゃあ実際にどんな風に書くのかを見ていこう！

たとえばこんなデザインのページがあったとする。

で、HTMLをこう書いたとする。

<div class="container">
  <div class="inner">
    <p class="title">コンテナのタイトル</p>
    <p class="text">コンテナのテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </div>
  <div class="inner">
    <p class="title">コンテナのタイトル</p>
    <p class="text">コンテナのテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </div>
  <div class="inner">
    <p class="title">コンテナのタイトル</p>
    <p class="text">コンテナのテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </div>
</div>

CSSで書いてみるとこんな感じ？

body {
  background: #65B7B7;
}

.container {
  display: flex;
  margin: 0 auto;
  width: 80%;
}
.inner {
  background: #F5CE3F;
  margin: 10px;
  padding: 0 20px;
  border-radius: 10px;
}
.title {
  font-size: 26px;
  font-weight: bold;
}
.text {
  font-size: 14px;
}

これをScssにすると、こうなる。

body{
  background:#65B7B7;
  .container{
    display:flex;
    margin:0 auto;
    width:80%;
    .inner{
      background:#F5CE3F;
      margin:10px;
      padding:0 20px;
      border-radius:10px;
    }
    .title{
      font-size:26px;
      font-weight:bold;
    }
    .text{
      font-size:14px;
    }
  }
}

そう、Scssはクラスの記述を入れ子にして書けるのだ！！！
こうすると、階層構造がとてもわかりやすいな！！！

&(アンパサンド)を使う

でも、これだけだとまだ便利さがわからないよな。
次は、HTML上のクラスの名前を少し変えて書いてみる。

<div class="container">
  <div class="container__inner">
    <p class="container__title">コンテナのタイトル</p>
    <p class="container__text">コンテナのテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </div>
    <div class="container__inner">
    <p class="container__title">コンテナのタイトル</p>
    <p class="container__text">コンテナのテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </div>
    <div class="container__inner">
    <p class="container__title">コンテナのタイトル</p>
    <p class="container__text">コンテナのテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </div>
</div>

お？なんでアンスコ2個でつないでんの？？？ってなった人。
これはBEMというクラスの命名規則で、Scssと相性の良い規則なので覚えておいてほしいぞ。

（ハシビロコウが書いたBEM記事）
[HTML/SCSS]BEM設計をワイヤーフレームを使って解説してみる

で、こいつをScssで書くと、こうなる。

body{
  background:#65B7B7;
}

.container{
  display:flex;
  margin:0 auto;
  width:80%;
  &__inner{
    background:#F5CE3F;
    margin:10px;
    padding:0 20px;
    border-radius:10px;
  }
  &__title{
    font-size:26px;
    font-weight:bold;
  }
  &__text{
    font-size:14px;
  }
}

そう、Scssは&（アンパサンド）を使うことで、クラス名が一部省略できるのだ！
しかもBEMの規則に乗っ取って命名しておくと、
.containerの中にどんな子要素があるのか一目瞭然になる。

(ちなみにbodyも含めて入れ子にしてしまって良いんだけど、あんま入れ子やると階層が深くなってわかりづらいので離してます)

また、

a{ 
  color:#fff;
}
a:hover{
  color:#000;
}

とかの場合も、

a{ 
  color:#fff;
  &:hover{
    color:#000;
  }
}

こうやって入れ子にして書ける。
どこを:hoverした時なのか、わかりやすくなってよいよい。

もちろん、:before・:afterも入れ子にして書けるから、
&:beforeとか、&:afterっていう書き方もできる。

変数

Scssは変数を使うことができる。
たぶんいろいろやればすごい複雑なこともできるんだろうけど、今回はよく使ってる変数を紹介。

色の変数

ページ上で何度も使う色は、CSSだとそのたびにカラーコードをコピペしなきゃいけなくてめんどくさいよなぁ。
でも、Scssなら変数を一回書いてしまえばその必要がなくなるのだ。

色の変数の書き方は非常に簡単で、たとえば

$point:#6A71C4;

と書く($の後の文字列はなんでもOK)。

ほんで、この色を使いたいタイミングがきた時に

color:$point;

とか

background:$point;

とかやるだけで、#6A71C4の色が呼び出されるのだ。

font-familyも変数に

ページ内でたまに出てくるfont-familyがある場合は、
そいつも変数にしておくとお手軽に呼び出せるぞ。

$font_yu: 游ゴシック体, "Yu Gothic", YuGothic;

こうやって設定しておくと、

font-family:$font_yu;

こう書いた時に游ゴシックが呼び出される。

便利〜〜〜〜〜〜〜

引数

Scssは、引数を使うこともできる。
→引数（アーギュメント）とは - IT用語辞典 e-Words

Scssの引数は、@mixinで書いて@includeで呼び出せるぞ。
ここでは、わたしがよく使う@mixinを紹介するぞ〜。

display:flex

display:flexは、justify-contentとかalign-itemsとか、ブラウザごとの記述とかが
いちいちめんどくさいので、@mixinにして１行で呼び出せるようにしている。

こんな感じで。

@mixin flex($justify:space-between,$align:center) {
  display: flex;
  display: -webkit-flex;//Safari,Android,iOS対応
  display: -ms-flexbox;//IE対応
  justify-content: $justify;
  -webkit-box-pack: $justify;//Safari,Android,iOS対応
  -ms-flex-pack: $justify;//IE対応
  align-items: $align;
  -webkit-box-align: $align;//Safari,Android,iOS対応
  -ms-flex-align: $align;//IE対応
}

@mixinのあとに@mixinの名前を、()の中に初期値を設定。
{}の中には呼び出したい記述を書いているよ。

で、今回の場合は$justifyと$alignってのがjustify-contentとかalign-itemsの値として入っているよな。
ここは、()内で指定した値が呼び出されるので、指定を変えたいときは()の中の値を指定すればよい。
ちなみにここで設定している()内の値は初期値なので、

呼び出すときに

.hoge{ 
  @include flex;
}

と書くと、コンパイルされるCSSは以下のようになるのだ。

.hoge{
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    justify-content: space-between;
    -webkit-box-pack: space-between;
    -ms-flex-pack: space-between;
    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
}

これを例えば

.hoge{ 
  @include flex($justify:flex-start,$align:baseline);
}

とかすると、コンパイルされるCSSは以下のようになるよ。

.hoge{
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    justify-content: flex-start;
    -webkit-box-pack: flex-start;
    -ms-flex-pack: flex-start;
    align-items: baseline;
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
}

なんとなくわかるかね？

position:absolute

これは自分の記事で度々紹介している@mixinなのだけど、せっかくなのでまた載せておく。
position:absoluteも毎回行数が多くてめんどくさいので@mixinにして呼び出しちゃいます。

@mixin absolute($top:null, $right:null, $bottom:null, $left:null){
  position: absolute;
  @if $top != null{
    top: $top;
  }
  @if $right != null{
    right: $right;
  }
  @if $bottom != null{
    bottom: $bottom;
  }
  @if $left != null{
    left: $left;
  }
}

これは
$top,$right,$bottom,$leftの値がnullじゃないときは、
topには$topの値を、rightには$rightの値を、bottomには$bottomの値を、leftには$leftの値を入れてねっていう@mixinですな。

使うときはこんな感じ。

.hoge{
  @include absolute($top:0,$left:0);
}

こうすると、コンパイルされるCSSは

.hoge{
  position:absolute;
  top:0;
  left:0;
}

こうなる。1行で済むので記述量が減ってだいぶすっきりだな。

メディアクエリ

Scss使ってて一番「便利だな〜〜〜〜〜」と思うのは、これ使ってるときかもしれぬ。

レスポンシブ対応するページを作る際、メディアクエリを使うと思うのだけど、Scssでやるとこんな風な@mixinが作れる。

$min_pc:769px;//デスクトップ(769px)以上

@mixin min_pc {
  @media screen and (min-width: $min_pc) {
    @content;
  }
}

$min_pcは変数だな。ここにはメディアクエリでよく使う769pxを入れたぞ。
@mixinの中身にこれを当てはめると

@media screen and (min-width: 769px) {
    @content;
  }

となるな。

で、この@contentというのは、実行処理の@includeから@mixinにスタイルセットを渡すことができる機能だぞ。
-@content : @mixinにスタイルセットを渡す | 集の一期一会

ちょっとなに言ってるかわからない人、わたしもよくわからないけど、つまり、

.hoge{
  font-size:16px;
  @include min_pc{
    font-size:28px;
  }
}

としたとき、コンパイルされるCSSはこうなるのだ。

.hoge {
  font-size: 16px;
}

@media screen and (min-width: 769px) {
  .hoge {
    font-size: 28px;
  }
}

メディアクエリもクラスに入れ子で書くことができるので、
どのクラスにどんなスタイルが当たっているのか確認するのが格段に楽になるぞ。

ブラウザハック

ブラウザハックもIEバグに苦しんでる時とかに使うよな。
これもメディアクエリと同じ感じで、@mixinにしておくと便利だぞ。

/* IE10 以降にのみ適用される */
@mixin IE{
  @media all and (-ms-high-contrast: none) {
    @content;
  }
}

/* Safariのみ適用される */
@mixin Safari{
  @media screen and (-webkit-min-device-pixel-ratio:0) {
    @content;
  }
}

使い方はメディアクエリのときと同様、ハックしたい部分で@includeで呼び出せばおk。

SassとScssの違い

最後にSassとScssの違いを。
さっきの、

.container{
  display:flex;
  margin:0 auto;
  width:80%;
  &__inner{
    background:#F5CE3F;
    margin:10px;
    padding:0 20px;
    border-radius:10px;
  }
  &__title{
    font-size:26px;
    font-weight:bold;
  }
  &__text{
    font-size:14px;
  }
}

これは、Sassで書くと

.container
  display: flex
  margin: 0 auto
  width: 80%
  &__inner
    background: #F5CE3F
    margin: 10px
    padding: 0 20px
    border-radius: 10px
  &__title
    font-size: 26px
    font-weight: bold
  &__text
    font-size: 14px

こうなる。
インデントで入れ子を全部管理しているような感じなので、インデントをずらすとバクッと表示崩れが起きる感じ。

シンプルな記述を好む人はこっちの方が使いやすいのかな？とか思うんだが、
私は{}に慣れ親しんでしまってるので、断然Scssが好きだなぁ。

最後に

ちょっとでもScssの便利さが伝わって、「使えそう」とか「使ってみたい」とか思ってもらえたら嬉しいぞ！

じゃあの〜〜〜〜〜〜

Edit request
81
Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Linked from these articles
kai_kouQiita週間ストック数ランキング【自動更新】からリンク
hikarutいいねユーザーランキング(毎日自動更新)からリンク
okadato623【毎日自動更新】Qiitaのデイリーいいねランキング！ウィークリーもあるよ（避難所）からリンク
Comments
Mitsuzara@Mitsuzara
問題のあるコメントを報告する

すごくわかりやすくまとまっていて、Scss使ったことがなかったのでめちゃくちゃ勉強になります！

0
mame_hashbill@mame_hashbill
問題のあるコメントを報告する

@Mitsuzara ありがとうございます〜〜〜！そう言っていただけてとても嬉しいです！！！

0
Sign up for free and join this conversation.
If you already have a Qiita account