フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

Sassでよく使う文字・数値処理関数リスト

はじめに

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

参考元:Udemy
www.udemy.com/sass-for-frontend-engineer/

[紹介元] CSSタグが付けられた新着投稿 – Qiita Sassでよく使う文字・数値処理関数リスト

コメント

記事に戻る

コメントを残す