標籤彙整:sass

常用mixin

用色定義

$bg-color: #f2f2e9
$main-color: #24260f
$sub-color: #90a955
$light-sub-color: #c1d7ae

内距外距設零

html,body
  padding: 0px
  margin: 0px

絶對定位

@mixin abso
  position: absolute

垂直水平置中

@mixin center
  position: absolute
  top: 50%
  left: 50%
  transform: translateX(-50%) translateY(-50%)

動畫效果

@mixin trans($s)
  transition: $s

尺寸

@mixin size($w,$h)
  width: $w
  height: $h

塞滿

@mixin fill
  width: 100%
  height: 100%

調整文字

@mixin text($size,$spacing,$color)
  font-size: $size
  text-spacing: $spacing
  color: $color

RWD寬度定義

$break-large: 1024px
$break_midium: 768px
$break-small: 400px

 

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;
}