読者です 読者をやめる 読者になる 読者になる

Sass インターポレーションなど

html/css関連

@extend ⇒ 継承(継承元のスタイルを引き継ぐ。)

例:

style.scss

.box1 {
  color: blue;
  background-color: white;
}

.box2 {
  @extend .box1;
  width:300px;
}

@mixin ⇒ ミックスイン(スタイルの集まりを作り、@includeで呼び出す。)

     引数が使える。

例:

style.scss

@mixin boxSet {
  padding: 15px;
  background: #ccc;
  color: white;
}

.box3 {
  @include boxSet;
}

例:引数使う場合

style.scss

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

.box5 {
  @include kadomaru(5px 10px);
}

@function ⇒ 関数

計算がメイン。

例:

style.scss

@function half($value){
  @return $value / 2;
}

.box6 {
  width: half(1000px);
}

 #{ } ⇒ インターポレーション。$valueを変数として使いたいため。

インターポレーションに関して

   ⇩

目指せsassマスター!デザイナーがすぐ実践できる基本テクニック12連発 | 株式会社LIG

例:

style.scss

$value: 20;

@while $value > 0 {
  .mt_#{$value} {
   margin-top: $value + px;
}
  .mb_#{$value} {
   margin-bottom: $value + px;
}
  $value: $value - 10;
}

切り上げ ⇒ 小数点以下の数字が0以外は切り上げ。

例:

16.1676 ⇒ 17

切り捨て ⇒ 小数点以下の数字が何であっても切り捨て。

例:

16.9017 ⇒ 16

下記サイトがSassで使われる関数を紹介してます。

  ⇩

Sassの関数一覧紹介サイト

compas

cssスプライトを自動で作成してくれる。

  ⇩ 

cssスプライトについて

広告を非表示にする