第3章これだけはマスターしたいSassの基本機能

3-6 演算

演算の基本

article {
    width: 560px - 14px;
    padding: 7px;
}

article {
  width: 546px;
  padding: 7px;
}

/* 足し算 */
.example01 {
    width: 500px + 8;
}

/* 掛け算 */
.example02 {
    width: 500px * 8;
}

/* 割り算 */
.example03 {
    width: (500px / 8);
}

/* 割り算の余り */
.example04 {
    width: 100px % 3;
}

@charset "UTF-8";
/* 足し算 */
.example01 {
  width: 508px;
}

/* 掛け算 */
.example02 {
  width: 4000px;
}

/* 割り算 */
.example03 {
  width: 62.5px;
}

/* 割り算の余り */
.example04 {
  width: 1px;
}

別々の単位で演算する

article {
    width: 300px + 5cm;
}

article {
  width: 488.97638px;
}

変数と演算を同時に利用する

$main_width: 560px;

article {
    width: $main_width - 7 * 2;
    padding: 0 7px;
}

article {
  width: 546px;
  padding: 0 7px;
}

$main_width: 560px;

article {
    $padding: 7px;
    width: $main_width - $padding * 2;
    padding: 0 $padding;
}

各演算子の注意点や条件など

p:after {
    content: "今日は、" + 寒いです。;
    font-family: sans- + "serif";
}

p:after {
  content: "今日は、寒いです。";
  font-family: sans-serif;
}

.example01 {
    $value: 50px;
    width: $value / 2;
}
.example02 {
    width: (50px / 2);
}
.example03 {
    width: 50px - 50 / 2;
}

.example01 {
  width: 25px;
}

.example02 {
  width: 25px;
}

.example03 {
  width: 25px;
}

色の演算

a {
    color: #000 + #111;
}

a {
  color: #111111;
}