はじめに
Sassの関数には文字や数値を処理するものが数多く用意されています。
今回はその中でも特に使用頻度が高いと思われるものをピックアップしてみました〜
使用頻度が高そうな関数(文字・数値系)
style.scss
.quote { //" "を付けて出力してくれる関数
content: quote(ハロー);
}
.unquote { //" "を外して出力してくれる関数
content: unquote("ハロー");
}
.abs { //絶対値を出力してくれる関数
width: abs(50px - 100px);
}
.ceil { //数値の切り上げをしてくれる関数
width: ceil(100px / 3);
}
.floor { //数値の切り捨てをしてくれる関数
width: floor(100px / 3);
}
.round { //四捨五入してくれる関数
width: round(100px / 3);
}
出力結果
style.css
@charset "UTF-8";
.quote {
content: "ハロー";
}
.unquote {
content: ハロー;
}
.abs {
width: 50px;
}
.ceil {
width: 34px;
}
.floor {
width: 33px;
}
.round {
width: 33px;
}
使用頻度が高そうな関数(色系)
style2.scss
.rgba {
color: rgba(#98ab8e, 0.3); //16進数渡したカラーコードをry
}
.mix {
color: mix(#f70000, #0000e2);
}
.lighten {
color: lighten(#279841, 30%);
}
.darken {
color: darken(#279841, 30%);
}
出力結果
style2.css
.rgba {
color: rgba(152, 171, 142, 0.3);
}
.mix {
color: #7c0071;
}
.lighten {
color: #7bdd91;
}
.darken {
color: #081e0d;
}