サイト制作に関するメモ書き

HOME > HTML・CSS > Sassで関数を作成する

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%;
}

 

【参考サイト】

 

“Sassで関数を作成する” への1件のコメント

  1. […] Sass で関数を作成する | cly7796.net […]

関数を定義する方法 (@function) [Sass/SCSS] – Site-Builder.wiki へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP