otaku-tokyo

 

Sass

Sassとは

CSSをより効率的に書き、ファイルサイズを減らすための方法

入れ子構造

.main h1を表すときは次のように入れ子にする

.main{

width: 100%;

h1{}

}

&記号

li(セレクタ):hoverやli.secondは次のように表す

li{font-size: 15px;}

&:hover{background-color: red;}

&.second{}

変数

変数は利用する箇所より前に指定

$color: #26546a;

h1{color: $color;}

p{color: $color;}

mixin

@mixin lesson-card{

background-color: #fff;

margin: 20px;

img{

margin: 16px auto 20px;

}

}

.lesson-1{

@include lesson-card;

}

.lesson-2{

@include lesson-card;

}

引数(ひきすう)

@mixin font-data($color){

font-size: 14px;

color: $color;

background-color: darken($color, 20%);

}

.card{

@include font-data(#ff0000);

}

$html: #ffffff;

.card2{

@include font-data($html);

}

関数

color: darken($blue, 50%);

color: lighten(色, 50%);

color: rgba(色, 0.5);

import

外部ファイルを_colors.scssとし、次のコードで読み込める

@import “_colors.scss”;

(これを@import “colors”;と省略するのが一般的)

実際の開発現場では変数のみを_variables.scssでまとめておいてstylesheet.scssで@import “valiables”;と読み込んで使うことが多い

WordPressでの使用

WordPressテーマではSCSSではなくCSSが使われることが多い。

理由として次の2つが考えられる。

・テーマ利用者はCSSのカスタマイズができるがSCSSのカスタマイズはできないという人が多い
・WordPressでSCSSを使用するにはコンパイルするかコンパイルのためのプラグインをインストールする必要があり面倒