2022-02-06 前端常用scss整理 索引 RWD 置中 淡入淡出 樣式變數 mixinRWD 123456789101112131415161718192021222324252627282930313233343536373839@mixin desktop { @media(max-width: 1440px) { @content }}@mixin tablet { @media(max-width: 768px) { @content }}@mixin phone { @media(max-width: 540px) { @content }}// 自訂寬度@mixin custom($width) { @media(max-width: $width + 'px') { @content }}// 填入數字即可產生相應寬度的@media// 正數為max-width、負數為min-width// $w: int@mixin media($w) { @if ($w < 0) { @media (min-width: (-$w + px)) { @content; } } @else { @media (max-width: ($w + px)) { @content; } }} 置中 123456789101112131415161718192021222324252627282930313233343536373839// $type(option): flex, transform, margin// $axis(option): x, y, all@mixin center($type: flex, $axis: all) { @if ($type == flex) { display: flex; @if ($axis == x or $axis == all) { justify-content: center; } @if ($axis == y or $axis == all) { align-items: center; } } @if ($type == transform) { position: absolute; @if ($axis == x) { right: auto; left: 50%; transform: translateX(-50%); @content; } @if ($axis == y) { bottom: auto; top: 50%; transform: translateY(-50%); @content; } @if ($axis == all) { top: 50%; bottom: auto; left: 50%; right: auto; transform: translate(-50%, -50%); @content; } } @if ($type == margin) { margin: 0 auto; }} 淡入淡出 1234567891011121314151617181920212223242526272829303132// $switch(option): in, out// $axis(option): x, y// $offset(option) int// $name(option) custom name@mixin fade($switch: out, $axis: x, $offset: 10, $name: fade) { @keyframes #{$name} { from { @if ($switch == out) { opacity: 1; } @else { opacity: 0; } @if ($axis == x) { transform: translateX(0); } @else { transform: translateX($offset); } } to { @if ($switch == out) { opacity: 0; } @else { opacity: 1; } @if ($axis == x) { transform: translateX($offset); } @else { transform: translateX(0); } } }} 變數樣式變數 123456// 顏色$primary: #449966 !default;$secondary: #F8EBCF !default;$tertiary: #F0E0B9 !default;// 過渡$transition-1: all .2s ease-out;