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

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

OTHER SNAPS