Sassで関数を作成する

Sassで自作の関数を作ってみます

サンプルコード

スマホのデザインを750pxで支給されることが多いので、750pxを基準にしてpx値を%値に変更する関数を作成してみます。

Sass

// 関数の用意
$spDesignWidth: 750;
@function sp_size_percent($size) {
	@return round($size / $spDesignWidth * 100) + %;
}

.contents {
	width: sp_size_percent(700);
}

コンパイルすると、以下のように%値で出力できました。

CSS

.contents {
  width: 93%;
}

【参考サイト】

• 自作関数を定義する @function | Web制作者のためのSassの教科書 – 公式サポートサイト