Sass(SCSS)の基本機能まとめました

更新情報をお届けします!

無料会員登録していただくと、
会員限定の特別コンテンツ記事を最後まで
読むことができます!
その他、更新情報・イベント情報を
お届けいたします。

シェア

ツイート

LINEで送る

Pocket

ブックマーク

Sass(SCSS)の基本機能まとめました

仕事でHTMLコーディングをする人の約7割が、Sassを使用しているという調査結果があるように、コーディングをする上でSassはかかせない便利なものとなってきています。今回はSassの基本機能を記事にまとめてみました。

Sassとは?

Sassとは?

まず、Sassを使ったことがない方に向けて、簡単にSassの説明をします。

Sassとは「Syntactically Awesome Stylesheets」の略で、訳すると「構造的にとても凄い(最高な・素晴らしい)スタイルシート」という意味になります。

 

SassにはSASS記法・SCSS記法という2種類の記法があり、元々はSASS記法が採用されていましたが、CSSとの互換性に乏しいなどの理由から、CSSとの互換性を高めたSCSS記法が作られました。SCSSはCSSと記法が近いため、CSSを理解している人であれば、SCSSに慣れるのにそんなに時間はかからないと思います。

HTMLとCSSの記述のルールはこちらを参考にしてください。

HTMLとCSSのコーディングルールとは?

参考程度に、2種類の記法の例を上げておきます。

 

//SASS記法

div

margin: 0 0 10px

display: block

img

width: 50px

height: 50px;

 

//SCSS記法

 

div{

 margin: 0 0 10px;

 display: block;

 mg{

  width: 50px;

  height: 50px;

  }

}

 

//コンパイル後のCSS

 

div{

margin: 0 0 10px;

}

div img{

 width: 50px;

 height: 50px;

}

最新情報をいち早くお届け!

無料会員登録していただくと、
会員限定の特別コンテンツ記事を最後まで
読むことができます!
その他、更新情報・イベント情報を
お届けいたします。

Sass(Scss)の基本機能

Sass(Scss)の基本機能

Sass(Scss)はcssの拡張メタ言語の一つです。Sass(Scss)の特徴的な機能としてネスト(入れ子)記述・変数などcss記述の際に不便だったところや二度手間だった部分を補ってくれる機能に加え、条件で分岐させ、繰り返しの処理関数を使う事でできるようになっています。

ネスト(入れ子)構造

SCCの場合、親セレクタを何度も何度も記述しないといけなく、長くなってしまうのを、簡潔にまとめることができるのがSassのネスト(入れ子)機能です。

 

//例えばCSSで

div{

   position: relative;

   display:block;

}

div a{

  position: absolute;

  top:0;

  left:0

}

div a span{

 color:#fff;

}

 

//こう書いていたものが、Sassの場合は

 

div{

  position: relative;

   display:block;

 

 a{

   position: absolute;

   top:0;

  left:0

   span{

   color:#fff;

     }

ネスト(入れ子)構造

このようにまとめることが出来るのです。

 その他に、疑似要素や擬似クラスを使う場合は、&(アンパサンド)を使って

 //Sass

 a{

 &:link{

 color:#000;

  }

 

  &:hover{

  color:#555;

  }

 

 &:visited{

 color:#999;

  }

 }

 //コンパイル後のCSS

 a link{

 color:#000;

  }

 

a hover{

 color:#555;

  }

 

a visited{

 color:#999;

 }

疑似要素や擬似クラス

変数で定義する

変数とは、そのスタイルシート内で繰り返し出てくる数値やカラーコードに名前をつけて定義し、その指定した名前を書くことで使いまわすことができるようになる機能です。

 

書き方は「$変数名: 値;」です。

 

例えば、サイト内の青色を#0000FF(濃い青)にしていたけど、サイトが完成した後に#6495ED(薄い青)に変えたくなってしまった場合、変数で青色を定義しておけば一括で変更することが出来ます。

//変数の定義

 $blue: #6495ED;

 $red: #d62b2b;

 

//呼び込み

 bg{

 color: $blue;

 background-color: $red;

 }

 

//コンパイル後のCSS

bg{

 color: #6495ED;

 background-color: #d62b2b;

}

mixinでテンプレート化する

mixinでテンプレート化する

Mixinとは小さなテンプレートのようなもので、上手に活用すれば大幅に記述量を減らすことが出来ます。

感覚としては、変数の強化版のような感じかと思います。

 

mixinを使用するには

mixinのコンパイル後

  1. @mixinの後に名前をつけ
  2. @includeの後ろにmixin名を書い呼び出します。

また、以下の例のように、mixinに引数を使える事もできます。

 

例)

 

// HTML

<a class="start">始める</a>

<a class="end">終わる</a>

 

//Sass

@mixin btn($color: ddd){

   border-radius: 10px;

   border:2px solid $color;

   color: $color;

   font-size: 1rem;

   padding:10px;

   display:block;

}

 

.start{

   @include btn(#ff0000);

}

 

.end{

   @include btn(#000DFF);

}

 

//コンパイル後のcss

.start{

   border-radius: 10px;

   border:2px solid $ff0000;

   color: $ff0000;

   font-size: 1rem;

   padding:10px;

   display:block;

}

.end{

 border-radius: 10px;

   border:2px solid $000DFF;

   color: $000DFF;

 font-size: 1rem;

   padding:10px;

}

mixinで作成したcolor以外が.startと.endでテンプレートとして使用されています。

 

Compassでさらに便利に

Compassでさらに便利に

上記のように自分オリジナルでmixinを作っても良いのですが、Sass(Scss)のフレームワークである「Compass」には豊富に使えるMixinスニペットが用意されています。時短を求める人はぜひCompassを利用しましょう。

 

「Compass」とはオープンソースのフレームワークの事です。CompassはSassで記述した後、cssにコンパイル(変換)する際に必ず使用します。Sassをさらに便利にしてくれるのがCompassです。

Sassの補助的な役割だけでなく、Compassにも使える機能が備わっています。

 

Compassのmixinで特によく使うものを幾つか上げておきます。

 

//Sass

.ellipse{

   @include border-radius(10px 10px 0 0);  //角丸

}

 

//コンパイル後のcss

.ellipse{

 -webkit-border-radius: 10px;

 -moz-border-radius: 10px;

 border-radius: 10px;

}

 

//Sass

.clearfix{

 @include clearfix; //float解除

}

 

//コンパイル後のcss

.clearfix{

 overflow: hidden;

 *zoom: 1;

}

 

//Sass

.half-opacity{

 @include opacity(0.5); //透明度

}

コンパイル後のcss

.half-opacity{

 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);

 opacity: 0.5;

}

Compassのコンパイル後

//Sass

.rotate45{

 @include transform(rotate(45deg)); //変形

}

 

//コンパイル後のcss

.rotate45{

 -webkit-transform: rotate(45deg);

 -moz-transform: rotate(45deg);

 -ms-transform: rotate(45deg);

 transform: rotate(45deg);

}

@includeのコンパイル

@extendは元の要素を継承させる

mixinと混同してしまいますが、mixinはテンプレートを作成し、extendは継承元の要素を引き継ぎます。共通する要素を引き継ぎながら差分が新しいルールとしてまとめられます。

 

//Sass

.extend-how {

 float: left;

 width: 250px;

 height: 250px;

 border: 1px solid $black;

 background: $brown;

 margin: 10px;

}

 

.start {

@extend .extend-how;

 height: 300px;

}

 

.end {

@extend .extend-how;

 height: 450px;

 background: $white;

}

 

//コンパイル後のcss

.extend-how, .start, .end {

   float: left;

   width: 250px;

   height: 250px;

  border: 1px solid #3d3321;

   background: #6e6048;

   margin: 10px;

}

 

.start {

  height: 300px;

}

 

.end {

   height: 450px;

   background: #fff;

}

とても便利ですが、継承元が変更してしまえば@extendした要素が全て変更されます。絶対に変更しないのであれば@extendを使用するのも良いですが、あまりおすすめはいたしません。

 

@importで分割したファイルをまとめて読み込む

 

1つのSCSSファイルで全てのスタイルを書いていくと記述量が膨大になるので、任意のルールでSCSSファイルを分けて作業すると変更・修正が容易になります。

 複数のファイルに分けることをpartial(パーシャル)と言い、パーシャルするSCSSファイルの名前の頭に_(アンダーバー)を付けます。

 

例)_default.scss

 

_は、SCSSからCSSにコンパイル(変換)する時に、個別のCSSファイルとして出力させない働きを持っています。 複数のCSSファイルが出来てしまうと、サイトの読み込み速度が遅くなるので、_をつける必要があります。 仕事などでサイトの納期が迫っているときなど複数人で分担してコーディングをしなければいけない場合、パーシャルして進めれば、誤って上書きをしてしまう、なんてこともなくなりそうですね。

そして、パーシャルしたSCSSファイルを@importで読み込みます。

 書き方は、

@import "_default".scss;

SCSSを導入すれば効率が上がる

SCSSを導入すれば効率が上がる

今回、ご紹介した機能はsassの機能のほんの一部です。 すべての機能を使いこなすのは難しいですが、今回ご紹介したいくつかの機能を使いこなすだけでも、CSSで書いていた時と比べて効率的に作業ができるようになります。SCSSフォルダ内にCSSを書いても問題は無いので、とりあえず導入してみて少しずつ、Sassに慣れていくと良いと思います。

こちらの記事では、Webデザイナーが効率よく作業するための方法について紹介しています。

Webデザイナー必見!制作を効率よくするためにできること

更新情報をお届けします!

無料会員登録していただくと、
会員限定の特別コンテンツ記事を最後まで
読むことができます!
その他、更新情報・イベント情報を
お届けいたします。

シェア

ツイート

LINEで送る

Pocket

ブックマーク

CATEGORY :
サイト制作
tree