LOG IN

Sass(SCSS記法)

by kuroko

Sassとは?

Sass(Syntactically Awesome Style Sheets)とは、CSSをとっても効率的に記述するための言語。
SassをコンパイルしてCSSにすると、ブラウザで読み込めるようになります。

2つの記法

Sassには、SASS記法とSCSS記法という2種類の記法があります。

SASS記法

・拡張子 .sass
・Rubyライクな書き方で、記述量が少ない
・波カッコ({})のかわりにインデントを使用
・終わりのセミコロン(;)不要
・プロパティ後のコロン(:)のあとには半角スペースが必要(ないとエラーがでる)

.nav
overflow: hidden
margin: auto
.nav__item
display: inline-block
list-style: none
padding: 5px 10px

SCSS記法(Sassy Cascading Style Sheets)

・拡張子 .scss
・波カッコ({})や終わりのセミコロン(;)はCSS同様で必要
・CSSをそのまま書いてもエラーにならない

.nav{
overflow: hidden;
margin: auto;
.nav__item{
display: inline-block;
list-style: none;
padding: 5px 10px;
}
}

SCSS記法のほうが、CSSに似ていてわかりやすいのと、CSSのままでもエラーにならないので普及したようです!

Sass(SCSS記法)でできること

ネストを入れ子で書ける

.nav{
overflow: hidden;
margin: auto;
.nav__item{
display: inline-block;
list-style: none;
padding: 5px 10px;
}
}
.nav{
overflow: hidden;
margin: auto;
}
.nav .nav__item{
display: inline-block;
list-style: none;
padding: 5px 10px;
}

「&」で親セレクタの参照ができる

.link{
color: #d45d87;
&:hover{
color: #3261ab;
}
}

.nav{
overflow: hidden;
margin: auto;
&__item{
display: inline-block;
list-style: none;
padding: 5px 10px;
}
}
.link {
color: #d45d87;
}
.link:hover {
color: #3261ab;
}

.nav {
overflow: hidden;
margin: auto;
}
.nav__item {
display: inline-block;
padding: 5px 10px;
list-style: none;
}

変数を使える

$pink: #d45d87;
$blue: #3261ab;
$space: 10px;


a{
color: $pink;
padding: $space $space*2;
&:hover{
color: $blue;
}
}
a {
padding: 10px 20px;
color: #d45d87;
}
a:hover {
color: #3261ab;
}

演算ができる

$pink: #d45d87;
$blue: #3261ab;
$space: 10px;

.nav{
&__item{
display: inline-block;
list-style: none;
padding: $space/2 $space*2;
color: $pink+$blue;
}
}
.nav__item {
display: inline-block;
list-style: none;
padding: 5px 20px;
color: #ffbeff;
}

カラーコードは、R、G、Bそれぞれの値に演算が行われます。

関数を使って明るい色や暗い色を簡単に作れる

$pink: #d45d87;

.link{
color: $pink;
&:visited{
color: darken($pink,20%);
}
&:hover{
color: lighten($pink,20%);
}
}
.link {
color: #d45d87;
}
.link:visited {
color: #a02b54; // #d45d87から20%暗い色に
}
.link:hover {
color: #e9aec3; // #d45d87から20%明るい色に
}

パーセンテージだとどんな色かわかりにくいですが、Sass Color Generatorでカラーコードを設定すれば、明度を表すlighten/darken、彩度を表すsaturate/desaturateを確認できます。

Sass Color Generator
Sass Color Generator

参考サイト
Sassの色指定をlighten_darkenでするときに便利すぎな「Sass Color Generator」 _ [M] mbdb (モバデビ)

スタイルの継承ができる「@expend」

@expendを使うと、別のセレクタ内のスタイルを継承できます。

.space{
margin: 10px;
padding: 10px 15px;
}

.box{
@extend .space;
border: 1px solid #ccc;
}
.space, .box {
margin: 10px;
padding: 10px 15px;
}

.box {
border: 1px solid #ccc;
}

※@media内では、@mediaの外で使われているセレクタを@expendで継承することはできません

スタイルが定義できる「@mixin」

@expendではセレクタをそのまま継承しましたが、@mixinを使うと引数を渡すことができるので、計算した値を返すこともできます。@mixinは、@includeで呼び出します。

@mixin getPadding($width,$height){
padding-top: ($height / $width)*100%;
}

.box{
@include getPadding(800,600);
background: url('images/photo_01.jpg') no-repeat center top;
background-size: cover;
}
.box {
padding-top: 75%;
background: url("../_components/sass/images/photo_01.jpg") no-repeat center top;
background-size: cover;
}

ループが使える「@for」

@forを使って、繰り返しの処理を行うことができます。次の例ではは、iが1から5になるまで繰り返します。

@for $i from 1 through 5 {
.slide__image-#{$i}{
background: url(../../images/slide_image-#{$i}.jpg) no-repeat center center;
background-size: cover;
}
}
.slide__image-1 {
background: url("../images/slide_image-1.jpg") no-repeat center center;
background-size: cover;
}

.slide__image-2 {
background: url("../images/slide_image-2.jpg") no-repeat center center;
background-size: cover;
}

.slide__image-3 {
background: url("../images/slide_image-3.jpg") no-repeat center center;
background-size: cover;
}

.slide__image-4 {
background: url("../images/slide_image-4.jpg") no-repeat center center;
background-size: cover;
}

.slide__image-5 {
background: url("../images/slide_image-5.jpg") no-repeat center center;
background-size: cover;
}

オリジナルの関数を作れる

JavaScriptのように、関数を使うことができます。

$width: 100%;

.box{
.box-3{
width: round($width: / 3);
}
}
.box .box-3 {
width: 33%;
}

roundは、小数点第1位を四捨五入をして整数にしえくれる関数ですが、本当は小数点の値(33.33%など)にしたい。そこで、小数点第何位まで取得するかを指定し、その値を計算して返してくれる関数を作ります。

@function roundWidth($value,$n){
$squared: 10;
@for $i from 1 to $n{
$squared: $squared*10;
}
@return (round($value*$squared) / $squared);
}

roundWidthという関数を作り、引数に幅の値を渡すための「$value」、少数点第何位までを取得するかを渡すための「$n」を設定します。オリジナルの関数は、関数名で呼び出します。

$width: 100%;
.box{
.box-3{
width: roundWidth(($width / 3),2);
}
}

幅100%を3で割った「33.333...%」と、小数点第2位までを取得するという値を引数でroundWidthへ渡します。一度、「33.333...」という値を、小数点以下2桁ぶんを繰り上げるためにfor文で10を2乗をしたもの、つまり100をかけて「3333.333...」とします。それをroundで四捨五入し「3333」となてから、最後に小数点2桁分を繰り下げるため、先ほど掛けた分の100で割って小数点に戻します。$widthを%で代入しているので、戻ってくる値も%で戻ってきます。

.box .box-3 {
width: 33.33%;
}

コンパイルの方法

コマンドを打つ

ターミナル(Windowsはコマンドプロンプト?)などで、コマンドを書いてコンパイルします。が、エンジニアでない方は、コマンドを書くのはなかなかハードルが高いですね。
私もコンパイルは使ってないので、挑戦しよう!って方は、次のサイトが参考になるかと思います。
Sassコマンドの使い方を覚えよう _ Web制作者のためのSassの教科書 - 公式サポートサイト

Dreamweaverを使う

Dreamweaver2017では、Sassファイルを自動でコンパイルしてくれるので、難易度の高い導入手間は不要!初心者の方やWindowsの方は導入のハードルが高いので、Adobe Dreamweaverを使うと簡単にコンパイルまでできそうですね。詳しい操作の説明は、次のサイトが参考になるかと思います。
新しいDreamweaverで簡単にSassを使った開発環境を簡単に構築する _ テクニカルクリエイター.com

タスクランナーを使う

いろいろな処理を自動化してくれるもので、代表的なものには、GRUNT、gulpがあります。このタスクランナーの中に、Sassのコンパイルを自動的に行ってくれるものがあり、それを使ってコンパイルをします。Sassのコンパイルだけだと先ほどのDreamweaverが簡単そうですが、その他の処理も同時に行うので、タスクランナーを一度使うと、手放せないですね。
※gulpについては、次の記事に詳しく書きます。

参考にさせていただいた書籍・サイト

Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語
Web制作者のためのSassの教科書 - 公式サポートサイト
【Sass】SASS記法からSCSS記法に変換して、SCSS記法を使用したいのだ _ バシャログ。
どっちのSassが良い?SASS vs SCSS
SassとCSS設計 - Sassの基本 _ CodeGrid

参考にさせていただいた書籍やサイトを運営されている皆さま、ありがとうございます。


kuroko
OTHER SNAPS