LoginSignup
11

More than 5 years have passed since last update.

Sassでよく使う関数リスト

Last updated at Posted at 2018-10-04

はじめに

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

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11