Sass (Syntactically Awesome Stylesheets) のチートシートです。インデントを多用した SASS 記法ではなく、広く普及している SCSS 構文の Sass を対象とします。
.class1 {
background-color: #f00;
}
.class2 {
@extend .class1;
color: #fff;
}
パーセント記号を用いることで、抽象クラスのような実体のないクラス class1 を定義できます。CSS にコンパイルすると class1 は消失します。
%class1 {
background-color: #f00;
}
.class2 {
@extend %class1;
color: #fff;
}
main.scss
@import "sub"; // 拡張子省略が可能
// @import "sub.scss";
// @import url("sub.scss");
// @import url(sub.scss);
sub.scss
.myclass {
$val: #f00;
background-color: $val;
}
@import "sub1.scss", "sub2.scss";
アンダースコアから開始されるファイル名の SCSS ファイルを import する際には、アンダースコアを省略できます。
main.scss
@import "sub";
_sub.scss
.myclass {
$val: #f00;
background-color: $val;
}
他のプロジェクトから CSS を流用してきて import する際に、名前空間用のクラスを用意すると本プロジェクトのスタイル汚染を回避できます。SCSS は CSS との互換性があるため、CSS ファイルのファイル名を SCSS にして import するだけで実現できます。
main.scss
.mynamespace1 {
@import "project1";
}
.mynamespace2 {
@import "project2";
}
_project1.scss
プロジェクト 1 での CSS (または SCSS)
_project2.scss
プロジェクト 2 での CSS (または SCSS)
#myid {
background-color: #00f;
h1 {
background-color: #f00;
}
p, ul {
background-color: #0f0;
}
}
#myid {
background-color: #0f0;
h1 {
+ p { // 隣接セレクタ (h1 の同階層直後の p 要素にのみ適用)
background-color: #f00;
}
}
ul {
> li { // 子セレクタ (ul 直下の li 要素にのみ適用)
background-color: #f00;
}
}
}
ネストしない書き方も可能
#myid {
background-color: #0f0;
h1 + p { // 隣接セレクタ (h1 の同階層直後の p 要素にのみ適用)
background-color: #f00;
}
ul > li { // 子セレクタ (ul 直下の li 要素にのみ適用)
background-color: #f00;
}
}
.myclass {
border: 2px dotted #f00 {
top: {
color: #0f0;
}
bottom: {
color: #00f;
}
}
}
後述の @if
を使用せずに条件分岐が記述できます。
body タグに somepage クラスが付与されているページでのみ有効化
.html
<body>
<div id="myid">
...
</div>
</body>
.scss
#myid {
background-color: #f00;
body.somepage & {
color: #fff;
}
}
myclass が付与された div でのみ有効になるスタイルを記述
div {
background-color: #f00;
&.myclass {
color: #fff;
}
}
hover 中の div でのみ有効になるスタイルを記述
div {
background-color: #f00;
&:hover {
color: #fff;
}
}
#myid {
background-color: #f00;
@media print {
color: #fff;
}
}
$myvar: #f00;
.myclass {
background-color: $myvar;
}
.myclass {
$myvar: #f00;
background-color: $myvar;
}
文法上のあいまいさが発生する箇所で変数を参照するためにはシャープを利用します。以下の例ではシングルクォーテーションで変数の値を囲んでいることもポイントです。
$myvar: '.myclass';
#{$myvar} {
background-color: #f00;
}
パス情報を変数に格納
$MY_PATH: '../img';
.myclass {
background: url(#{$MY_PATH}/icn.png);
}
幅や高さ
$myvar: 20px;
.myclass {
width: ($myvar * 5) + 100;
background-color: #f00;
}
RGB
.myclass {
background-color: #000 + #000000 + red + rgb(0, 255, 0); // 黄色
color: #000 + 255; // RGB すべてに 255 加算 → 白色
}
@mixin myMixin($arg1: 10px 10px, $arg2: #f00) {
margin: $arg1;
background-color: $arg2;
}
.myclass1 {
@include myMixin;
}
.myclass2 {
@include myMixin(20px 20px, #0f0);
}
$args: 20px 20px, #0f0;
.myclass3 { // カンマ区切り変数を利用する場合は '...' が必要
@include myMixin($args...);
}
.mynamespace {
@mixin myMixin {
background-color: #f00;
}
.myclass1 {
@include myMixin;
}
}
@mixin myMixin {
background-color: #f00;
@content;
}
.myclass1 {
@include myMixin {
color: #fff;
}
}
$myvar: true;
@if $myvar and true {
.myclass1 {
background-color: #f00;
}
}
@mixin myMixin($arg) {
@if $arg == 0 {
background-color: #f00;
}
@else if $arg == 1 {
background-color: #0f0;
}
@else {
background-color: #00f;
}
}
.myclass1 {
@include myMixin(0);
}
.myclass2 {
@include myMixin(1);
}
.myclass3 {
@include myMixin(2);
}