常用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

 

Leave a Reply

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