SASS

範圍界定

以換行縮排取代{}包覆概念,不用加【;】

.namecard
  width: 350px
  height: 200px
.namecard {
 width: 350px;
 height: 200px;
}

包覆

.namecard
  width: 350px
  height: 200px
  & h2
    font-size: 25px
    font-weight: 300
.namecard {
 width: 350px;
 height: 200px;
}
.namecard h2 {
 font-size: 25px;
 font-weight: 300;
}

變數

原生CSS變數寫法

$bgcolor: #243010

.namecard
 width: 350px
 height: 200px
 background-color: $bgcolor
.namecard {
 width: 350px;
 height: 200px;
 background-color: #243010;
}

MIXIN

@mixin block
  border: solid 1px

.block1
  +block
  width: 70px
  height: 70px

.block2
  +block
  width: 120px
  height: 12px
.block1 {
 border: solid 1px;
 width: 70px;
 height: 70px;
}

.block2 {
 border: solid 1px;
 width: 120px;
 height: 12px;
}

MIXIN+參數

@mixin block($length: 50px)
  border: solid 1px
  width: $length
  height: $length

.block1
  +block(70px)

.block2
  +block(120px)
.block1 {
 border: solid 1px;
 width: 70px;
 height: 70px;
}

.block2 {
 border: solid 1px;
 width: 120px;
 height: 120px;
}

MIXIN+多參數

@mixin block($length: 50px,$color: black)
  border: solid 1px $color
  width: $length
  height: $length

.block1
  +block(70px,red)

.block2
  +block(120px,green)
.block1 {
 border: solid 1px red;
 width: 70px;
 height: 70px;
}

.block2 {
 border: solid 1px green;
 width: 120px;
 height: 120px;
}

Leave a Reply

Your email address will not be published. Required fields are marked *