第4章高度な機能を覚えてSassを使いこなそう

4-6 関数を使って様々な処理を実行する

数値の絶対値を取得する abs()

$margin: -15px;

section {
    margin-left: $margin;
    .item {
        float: left;
        width: 200px;
        margin-left: abs($margin);
    }
}

section {
  margin-left: -15px;
}
section .item {
  float: left;
  width: 200px;
  margin-left: 15px;
}

数値の小数点以下を四捨五入する round()

$width: 100%;

.boxA {
    width: $width / 6;
}
.boxB {
    width: round($width / 6);
}

.boxA {
  width: 16.66667%;
}
.boxB {
  width: 17%;
}

数値の小数点以下を切り上げる ceil()

$width: 100%;

.boxA {
    width: $width / 3;
}
.boxB {
    width: ceil($width / 3);
}

.boxA {
  width: 33.33333%;
}
.boxB {
  width: 34%;
}

数値の小数点以下を切り捨てる floor()

$width: 100%;

.boxA {
    width: $width / 6;
}
.boxB {
    width: floor($width / 6);
}

.boxA {
  width: 16.66667%;
}
.boxB {
  width: 16%;
}

16進数のRGB値に透明度を指定して、RGBA形式に変換できる rgba()

body {
    background: rgba(#6a5468, 0.3);
}

body {
  background: rgba(106, 84, 104, 0.3);
}

.box {
    background: rgba(red, .15);
}

.box {
  background: rgba(255, 0, 0, 0.15);
}

明るい色をカンタンに作れる lighten()

body {
    background: lighten(#000, 30%);
}

body {
  background: #4d4d4d;
}

暗い色をカンタンに作れる darken()

body {
    background: darken(#fff, 20%);
}

body {
  background: #cccccc;
}

$c: #888;

.boxA {
    background: lighten($c, 20%);
}
.boxB {
    background: darken($c, 20%);
}

.boxA {
  background: #cccccc;
}
.boxB {
  background: #666666;
}

2つのカラーコードの中間色を作れる mix()

body {
    background: mix(#000, #fff, 50%);
}

body {
  background: gray;
}

body {
    background: mix(rgba(000, 000, 000, .3), #fff, 50%);
}

body {
  background: rgba(217, 217, 217, 0.65);
}

$a: #000;
$b: #fff;

.boxA {
    background: mix($a, $b, 70%);
}
.boxB {
    background: mix($a, $b, 30%);
}

.boxA {
  background: #4d4d4d;
}
.boxB {
  background: #b2b2b2;
}

リストのN 番目の値を取得できる nth()

$nameList: top, about, company;
.item {
    background: url(#{nth($nameList, 2)}.png);
}

.item {
    background: url(about.png);
}

指定したキーの値を取得する map-get()

$colors: (
    twitter: #1b95e0,
    facebook: #3b5998,
);
.sns-twitter {
    color: map-get($colors, twitter);
}

.sns-twitter {
    color: #1b95e0;
}

セレクタを置換するselector-replace()

#{selector-replace(".item .text", ".text", ".image")} {
    float: left;
}

.item .image {
    float: left;
}