Sassの基本機能まとめ

Sassを学んだので基本機能をメモした.

ルールのネスト

ルールをネストで表現できる

.item {
  p {
    margin: 0;
  }
}

親セレクタの参照

親セレクタを & で参照できる

a {
  background: #eee;
  &:hover {
    background: #ccc;
  }
}

プロパティのネスト

プロパティもネストできる

section {
  border: 1px solid #999 {
    top-color: #a99;
    bottom: 0;
  }
}

プレースホルダーセレクタ

CSSへの変換後には直接書き込まれないプレースホルダを % で使える

%btnBase {
  text-align: center;
  text-decoration: none;
}
.btn {
  @extend %btnBase;
}

変数

$val_name で変数が宣言できる

$red: #cf2d3a;

.notes {
  color: $red;
}

演算

四則演算とか剰余とかの演算ができる

.e1 {
  width: 500px + 80;
  // 580px
  width: 500px - 80;
  // 420px
  width: 500px * 8;
  // 4000px
  width: 500px / 8;
  // 62.5px
  width: 20px % 4;
  // 0px
  content: "hoge" + fuga;
  // hogefuga
}

基礎関数

色々な関数が用意されている

.e1 {
  width: abs(-15px);
  // 絶対値 15px
  width: round(100px / 6);
  // 四捨五入 17px;
  width: ceil(100px / 3);
  // 切り上げ 34px;
  width: floor(100px / 6);
  // 切り下げ 16px;
  color: rgba(#6a5468, 0.3);
  // 16進RGB(色キーワード)+alpha値->RGBA rgba(106, 84, 104, 0.3);
  color: lighten(#000, 30%);
  // 明度上げる #4d4d4d
  color: darken(#fff, 20%);
  // 明度さげる #cccccc
  color: mix(#000, #fff, 50%);
  // 中間色求める gray

if文

@ifで if文が使える

$cond: true;
@if $cond {
  .e1 {
    width: 15px;
  }
}

for文

@for でfor文が使える

@for $value from 1 through 3 {
  .hoge_#{$value} {
    margin-bottom: 1px * $value;
  }
}

for-each文

@each でfor-each文が使える

$list: a, b;
@each $val in $list {
  .hoge_#{$val} {
    content: #{$val};
  }
}

while文

@while でwhile文が使える

$val: 20;
@while $val > 20 {
  .hoge_#{$val} {
    content: #{$val};
  }
  $val: $val - 10;
}

ミックスイン

@mixin でプロパティの寄せ集めが作れる

@mixin kadomaru($value) {
  border-radius: $value;
  webkit-border-radius: $value;
}

.box {
  @include kadomaru(3px);
}
// .box {
//   border-radius: 3px;
//   webkit-border-radius: 3px;
// }