@mixin
재사용할 스타일의 선언그룹을 만들면 불필요한 중복을 줄일 수 있다.
css에서 다양한 브라우저를 지원하기위해 vendor prefix를 여러차례 재사용할 경우가 있는데 이때 재사용할 CSS 선언그룹을 만들 수 있다.
_mixins.scss
//----------------------------------
// Vendor Prefix
//----------------------------------
// @param {*} $property Property
// @param {*} $value Value
@mixin prefix($property, $value) {
-webkit-#{$property}: $value;
-moz-#{$property}: $value;
-ms-#{$property}: $value;
-o-#{$property}: $value;
#{$property}: $value;
}
// @param {Size} $radius [5px] - Radius
// @require {mixin} prefix
@mixin border-radius($radius: 5px) {
@include prefix("border-radius", $radius);
}
//----------------------------------
// Animation & keyframes
//----------------------------------
// Keyframes
// @param {*} $animation-name - Animation name
// @content [Animation css]
@mixin keyframes($animation-name) {
@-webkit-keyframes #{$animation-name} {
@content;
}
@-moz-keyframes #{$animation-name} {
@content;
}
@-ms-keyframes #{$animation-name} {
@content;
}
@-o-keyframes #{$animation-name} {
@content;
}
@keyframes #{$animation-name} {
@content;
}
}
// Animation
// @param {*} $str - name duration timing-function delay iteration-count direction fill-mode play-state ([http://www.w3schools.com/cssref/css3_pr_animation.asp](http://www.w3schools.com/cssref/css3_pr_animation.asp))
// @require {mixin} css3-prefix
@mixin animation($str) {
@include prefix("animation", $str);
}
//------------------
// placeholder
//------------------
@mixin optional-at-root($sel) {
@at-root #{if(not &, $sel, selector-append(&, $sel))} {
@content;
}
}
@mixin placeholder {
@include optional-at-root("::-webkit-input-placeholder") {
@content;
}
@include optional-at-root(":-moz-placeholder") {
@content;
}
@include optional-at-root("::-moz-placeholder") {
@content;
}
@include optional-at-root(":-ms-input-placeholder") {
@content;
}
}
// float clearfix
@mixin clearfix {
&::before {
content: "";
display: block;
clear: both;
overflow: hidden;
// visibility: hidden;
height: 0;
}
}
@mixin ghostVerticalAlign() {
&:before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
width: 0.1px;
}
}
// generic transform
@mixin transform($transforms) {
-moz-transform: $transforms;
-o-transform: $transforms;
-ms-transform: $transforms;
-webkit-transform: $transforms;
transform: $transforms;
}
// rotate
@mixin rotate($deg) {
@include transform(rotate(#{$deg}deg));
}
// scale
@mixin scale($scale) {
@include transform(scale($scale));
}
// translate
@mixin translate($x, $y) {
@include transform(translate($x, $y));
}
@mixin translateX($x) {
@include transform(translateX($x));
}
@mixin translateY($y) {
@include transform(translateY($y));
}
//transform origin
@mixin transform-origin($origin) {
moz-transform-origin: $origin;
-o-transform-origin: $origin;
-ms-transform-origin: $origin;
-webkit-transform-origin: $origin;
transform-origin: $origin;
}
// Flexbox display
@mixin flexbox {
display: -webkit-box;
//@debug: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
}
@mixin justify-content($justify) {
-webkit-justify-content: $justify;
-moz-justify-content: $justify;
-ms-justify-content: $justify;
justify-content: $justify;
-ms-flex-pack: $justify;
}
@mixin align-items($align) {
-webkit-algin-items: $align;
//algin-items: $align;
}
//Get the value for justify-content
@function getJustify($arg) {
$justify: (
"sa": space-around,
"sb": space-between,
"se": space-evenly,
"center": center,
"fs": flex-start,
"fe": flex-end,
);
@each $key, $value in $justify {
@if ($key == $arg) {
@return $value;
}
}
}
//Get the value for align-items
@function checkAlign($arg) {
$align: (
"b": baseline,
"s": stretch,
"sa": space-around,
"sb": space-between,
"center": center,
"fs": flex-start,
"fe": flex-end,
);
@each $key, $value in $align {
@if ($key == $arg) {
@return $value;
}
}
}
// Display flex
@mixin display-flex() {
@include flexbox;
@content;
}
@mixin hover-support {
@media not all and (pointer: coarse) {
&:hover {
@content;
}
}
}
_common.scss
input {
@include prefix(box-sizing, border-box);
@include prefix(appearance, none);
@include placeholder {
color: #aeaeae;
opacity: 1;
}
}반응형
'UXUI Development > CSS Pre-Processor' 카테고리의 다른 글
| SVG 색상변경 Coloring (with scss) / mixins (0) | 2022.04.11 |
|---|---|
| SASS(scss) 문법 #2_ Variables (변수) (0) | 2021.12.13 |
| SASS(scss) 문법 #1_ Nesting(중첩) (0) | 2021.12.13 |
| CSS Pre-Processor 전처리기 (0) | 2021.12.13 |
| CSS-in-CSS (0) | 2020.07.08 |
