はじめに
普段Sassを使っていますが、結局CSSと比較して何ができるんだっけというところを忘れがちなので、公式ガイドを参考に記法をまとめておきます。
https://sass-lang.com/guide
なお、記法がSassとScssの2種類あるため、両方の記法を記載しています。
そもそもSassとは
Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
Sassは、世界で最も成熟した、安定した、強力なプロフェッショナルグレードのCSS拡張言語です。(訳)
※公式サイトより引用
一言で言うとCSSの拡張言語です。
スタイルのネストやモジュールの仕組みなど、CSSをよりプログラムのように書くことができる機能が取り入れられています。
変数
$で変数を宣言し利用できます。
$変数名: 値
Sassの場合
variable.sass
$font-default: Helvetica, sans-serif
$text-color: #111
body
font-family: $font-default
color: $text-color
Scssの場合
variable.scss
$font-default: Helvetica, sans-serif;
$text-color: #111;
body {
font-family: $font-default;
color: $text-color;
}
コンパイル後のCSS
variable.css
body {
font-family: Helvetica, sans-serif;
color: #111;
}
ネスト
HTMLのようにセレクターをネストして書くことができます。
Sassの場合
nesting.sass
ul
margin: 10
padding: 10
li
display: inline-block
a
display: block
padding: 6px 12px
&:hover
color: #666
Scssの場合
nesting.scss
ul {
margin: 10;
padding: 10;
li {
display: inline-block;
a {
display: block;
padding: 6px 12px;
&:hover {
color: #666;
}
}
}
}
コンパイル後のCSS
nesting.css
ul {
margin: 10;
padding: 10;
}
ul li {
display: inline-block;
}
ul li a {
display: block;
padding: 6px 12px;
}
ul li a:hover {
color: #666;
}
Mixins
複数のプロパティ宣言を一緒に再利用できるようにする仕組みです。
Sassの場合
mixins.sass
=baseButton($bg-color)
border: 1px solid #333
background-color: $bg-color
.danger-button
+baseButton(#ff0000)
Scssの場合
mixins.scss
@mixin baseButton($bg-color) {
border: 1px solid #333;
background-color: $bg-color;
}
.danger-button {
@include baseButton(#ff0000);
}
コンパイル後のCSS
mixins.css
.danger-button {
border: 1px solid #333;
background-color: #ff0000;
}
Extend/Inheritance
いわゆる継承です。
Sassの場合
extend.sass
%message-shared
border: 1px solid #ccc
padding: 10px
color: #333
.message
@extend %message-shared
.success
@extend %message-shared
border-color: green
.error
@extend %message-shared
border-color: red
.warning
@extend %message-shared
border-color: yellow
Scssの場合
extend.scss
%message-shared {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.message {
@extend %message-shared;
}
.success {
@extend %message-shared;
border-color: green;
}
.error {
@extend %message-shared;
border-color: red;
}
.warning {
@extend %message-shared;
border-color: yellow;
}
コンパイル後のCSS
extend.css
.message, .success, .error, .warning {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
border-color: green;
}
.error {
border-color: red;
}
.warning {
border-color: yellow;
}
Operators
通常のCSSだと四則演算にはcalc()を使いますが、Sassでは使わずに演算ができます。
Sassの場合
operators.sass
.container
width: 100%
display: flex
article
width: 600px / 960px * 100%
aside
width: 300px / 960px * 100%
Scssの場合
operators.scss
.container {
width: 100%;
display: flex;
}
article {
width: 600px / 960px * 100%;
}
aside {
width: 300px / 960px * 100%;
}
コンパイル後のCSS
operators.css
.container {
width: 100%;
display: flex;
}
article {
width: 62.5%;
}
aside {
width: 31.25%;
}
Partials/Modules
Sassでは分割したファイルをモジュール化する仕組みがあります。
_partial.sassのようにアンダースコアをファイル名のprefixとし、利用したいファイルで、@use partialを書きます。
※アンダースコアをつけることで、CSSへのトランスパイル時に、CSSファイルとして出力しないようになります。
Sassの場合
_base.sass
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-color
styles.sass
@use 'base'
.inverse
background-color: base.$primary-color
color: white
Scssの場合
_base.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
styles.scss
@use 'base';
.inverse {
background-color: base.$primary-color;
color: white;
}
コンパイル後のCSS
styles.css
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
.inverse {
background-color: #333;
color: white;
}
コメント
Sass/Scssの場合
comment.sass
// JavaScriptのように単一コメントを書くことができます。CSSへは出力されません。
/* CSSと同じコメント記法も当然使用できます */
コンパイル後のCSS
comment.css
/* CSSと同じコメント記法も当然使用できます */
以上になります。
ぜひ素敵なSassライフをお過ごしください