2023.11.24
【Sass】便利な内部関数（色の調整、数値関連など）
はじめに
Sassには内部関数もあり、この記事では覚えておくと何かと便利な内部関数をまとめます。
使い方は簡単で、以下のように値として書き込みます。
background-color: lighten($baseColor, 20%);色の調整
| コード | 内容 |
| lighten($baseColor, 20%); | 明度を上げる |
| darken($baseColor, 20%); | 明度を下げる |
| saturate($baseColor, 20%); | 彩度を上げる |
| desaturate($baseColor, 20%); | 彩度を下げる |
| adjust-hue($baseColor, 50deg); | 色相を変える |
| rgba($baseColor, 0.5); | 透明度を変える |
数値関連
| コード | 内容 |
| round($number); | 四捨五入 |
| ceil($number); | 小数点以下を切り上げ |
| floor($number); | 小数点以下を切り捨て |
| abs($number); | 絶対値（正の値）を返す |
| percentage($number); | パーセント形式に変換 |
| min(1px, 2px); | 引数で渡した値の内、最小値を返す |
| max(1px, 2px); | 引数で渡した値の内、最大値を返す |
| random() | ０～１までのランダムな数値を返す |
その他
| コード | 内容 |
| nth(n) | 配列からn番目の値を返す |
| quote() | 入れた値をダブルクオーテーションで囲って出力する |
おわりに
他にもSassには便利な機能があり、公式ページにまとめられていますので、以下に公式ページへのリンクを載せておきます。
https://sass-lang.com/documentation/
以上、Sassの便利な内部関数でした！
記事検索
新着記事
カテゴリ一覧
アーカイブ
こんなブログです
28歳でWeb業界に未経験で転職し、日々勉強中です。
日々抜けていく知識をせき止めるためのブログです。
日々抜けていく知識をせき止めるためのブログです。