5 SCSS 믹스인을 확인하십시오!
Hello World! 오늘의 기사는 SASS를 사용하는 주요 동기 중 하나인 mixin에 관한 것입니다. 믹스인이 무엇인지, 왜 사용해야 하는지에 대해 이야기하고, 제가 작성한 5가지 가장 좋아하는 믹스인을 공유합니다(그리고 마지막에 보너스 1개도 😁).목차
Mixins의 무엇, 왜, 어떻게?
A SASS - Mixin brings into practice one of software development's primary principles - DRY (Don't Repeat Yourself), by encapsulating CSS style declarations into a code block and allowing us to reuse them throughout our site. Mixins not only take care of redundancy in style sheets but also significantly speed up your work flow by reducing the number of lines you have to type.
Now that I've convinced you of why you should use mixins, let's see how we can create mixins.
Mixins can be defined using the @mixin rule. The general syntax for creating a mixin is as follows:
@mixin <name>(<arguments...>) {
// mixin content
}
After being declared, mixins can be easily integrated into our stylesheets using the @include rule.
@include <name>(<arguments...>)
With the What, Why & How out of the way, here are 5 of my favourite mixins (and a bonus at the end too :)).
미디어 쿼리
With up to half of all web traffic coming from mobile devices, it has become essential for websites to become responsive, however the syntax for vanilla CSS media queries is still clunky. My SCSS mixin aims to ease some of the pain.
You can define custom $breakpoints or pass numerical values. Furthermore, additional options can be added using the $and parameter.
// Custom Breakpoints
$breakpoints: (
sm: 576px,
md: 768px,
xl: 1200px,
);
// Media-Query Mixin
@mixin media(
$from: false,
$until: false,
$and: false,
$media-type: all,
) {
$min-width: 0;
$max-width: 0;
$query: "";
//FROM: this breakpoint (inclusive)
@if $from {
@if type-of($from) == number {
$min-width: $from;
} @else {
$min-width: map-get($breakpoints, $from);
}
}
//UNTIL: this breakpoint (exclusive)
@if $until {
@if type-of($until) == number {
$max-width: $until - 1px;
} @else {
$max-width: map-get($breakpoints, $until) - 1px;
}
}
@if $min-width != 0 {
$query: "#{$query} and (min-width: #{$min-width})";
}
@if $max-width != 0 {
$query: "#{$query} and (max-width: #{$max-width})";
}
@if $and {
$query: "#{$query} and (#{$and})";
}
@if ($media-type == "all" and $query != "") {
$media-type: "";
$query: str-slice(unquote($query), 6);
}
@media #{$media-type + $query} {
@content;
}
}
용법:
SCSS:
.foo-bar {
width: 50%;
@include media($from: "sm", $until: 900px, $and:"orientation: landscape"){
width: 100%;
}
}
CSS:
.foo-bar {
width: 50%;
}
@media (min-width: 576px) and (max-width: 899px) and (orientation: landscape) {
.foo-bar {
width: 100%;
}
}
BONUS: If you have a media-query being used throughout your style sheet, create nested mixins to further streamline your workflow.
@mixin sm-md{
@include media($from: "sm", $until: "md"){
@content
}
}
포지셔닝
This mixin is a massive time-saver when you want to position several elements. The values are provided in the order top right bottom left . Additionally, values such as auto , inherit , and initial are also supported.
Note: You can force a 0px offset by passing f0 to the mixin.
@mixin pos($type, $args: 0 0 0 0) {
position: $type;
$offsets: top right bottom left;
@if length($args) == 2 or length($args) == 4 {
@if length($args) == 2 {
$args: join($args, $args);
}
@each $offset in $offsets {
$offsetVal: nth($args, index($offsets, $offset));
#{$offset}: validOffset($offsetVal);
}
} @else {
@warn "Invalid number of arguments. (Must be either 2 or 4).";
}
}
@function validOffset($value) {
@if type-of($value) == number {
@if ($value != 0) {
@return $value;
} @else {
@return null;
}
} @else if str-slice($value, 1, 1) == "f" {
@return str-slice($value, 2);
} @else if index(auto initial inherit, $value) {
@return $value;
} @else {
@warn "Invalid offset value.";
@return null;
}
}
@mixin abs($args: 0 0 0 0) {
@include pos(absolute, $args);
}
@mixin rel($args: 0 0 0 0) {
@include pos(relative, $args);
}
@mixin fix($args: 0 0 0 0) {
@include pos(fixed, $args);
}
@mixin sticky($args: 0 0 0 0) {
@include pos(sticky, $args);
}
용법
SCSS:
.foo-bar{
@include rel(0 f0 auto 50%)
}
CSS:
.foo-bar {
position: relative;
right: 0;
bottom: auto;
left: 50%;
}
글꼴
This mixin provides a short hand for setting fonts, their fallbacks and style properties (font-family, size, weight, color, style and line-height). The mixin can be easily modified to all fallback support for sans-serif or any other font category.
⚠️ Be sure to include the fonts using the @font-face rule.
@mixin font-serif($name, $size: false, $weight: false, $color: false, $style: false, $lh: false) {
font-family: $name, "Times New Roman", Times, serif;
@if $size {font-size: $size};
@if $weight {font-weight: $weight};
@if $color {color: $color};
@if $style {font-style: $style;}
@if $lh {line-height: $lh;}
}
용법
SCSS:
.foo-bar{
@include font-serif("Noto Serif", 1.2rem, 700, #181818)
}
CSS:
.foo-bar {
font-family: "Noto Serif", "Times New Roman", Times, serif;
font-size: 1.2rem;
font-weight: 700;
color: #181818;
}
BONUS: Use the RFS Engine to set the font-sizes and achieve reponsive text; Example: @include font-size($size).
전환
Assign multiple transitions using this mixin. The transitions for which transition-duration , transition-delay and transition-timing-function is not defined inherit it from the last defined duration,delay and timing function.
@mixin transition($prop, $time, $easing: ease-in, $delay: 0s) {
$transition: ();
@for $i from 1 through length($prop) {
@for $j from 0 to (length($prop)) - (length($time)) {
$time: join($time, nth($time, -1));
}
@for $j from 0 to (length($prop)) - (length($easing)) {
$easing: join($easing, nth($easing, -1));
}
@for $j from 0 to (length($prop)) - (length($delay)) {
$delay: join($delay, nth($delay, -1));
}
$transition: append(
$transition,
(nth($prop, $i) nth($time, $i) nth($easing, $i) nth($delay, $i)),
$separator: comma
);
}
transition: $transition;
}
용법
SCSS:
.foo-bar{
@include transition(width opacity transform, 0.3s 0.4s, linear, 0.1s)
}
CSS:
.foo-bar {
transition: width 0.3s linear 0.1s, opacity 0.4s linear 0.1s, transform 0.4s linear 0.1s;
}
의사 요소
While pseudo-elements are useful for creating masking effects on text and images, they include a lot of code repetition. Let's reduce the number of lines of code with this mixin.
@mixin pseudo($display: block, $pos: absolute, $content: '', $width: 100%, $height: 100%){
content: $content;
display: $display;
position: $pos;
width: $width;
height: $height;
}
용법:
SCSS:
.foo-bar::before{
@include pseudo($width: 100px)
}
CSS:
.foo-bar::before {
content: "";
display: block;
position: absolute;
width: 100px;
height: 100%;
}
Z-인덱스
While not technically a mixin, this function allows you to define multi-level z-indexes in one place and prevents spaghetti code like z-index: 999 .
$z-indices: (
"menu": (
"items": 2,
"social": 3,
),
"main-content": 1,
"footer": -1,
);
@function ind($element, $sub-element: false){
$index: map-get($z-indices, $element);
@if $sub-element{ $index: map-get($index, $sub-element); }
@return $index;
}
용법
SCSS:
.menu{
.items {
z-index: ind(menu, items);
}
}
.footer{
z-index: ind(footer);
}
CSS:
.menu .items {
z-index: 2;
}
.footer {
z-index: -1;
}
결론
These are some of the mixins I created for use when working on my Portfolio Website . 이 믹스인 중 일부가 귀하에게 유용하고 자신만의 믹스인을 만들 수 있도록 영감을 주기를 바랍니다. 경험상 반복하는 경우 믹스인을 만드는 것이 좋습니다.
❤️을 삭제합니다. 당신의 격려가 저를 계속 움직이게 합니다. 댓글에서 좋아하는 믹스인을 알려주세요.
개선을 위한 제안이나 비판은 물론 환영합니다 😄.
참조:
Mixins can be defined using the
@mixin rule. The general syntax for creating a mixin is as follows:@mixin <name>(<arguments...>) {
// mixin content
}
@include rule.@include <name>(<arguments...>)
With up to half of all web traffic coming from mobile devices, it has become essential for websites to become responsive, however the syntax for vanilla CSS media queries is still clunky. My SCSS mixin aims to ease some of the pain.
You can define custom $breakpoints or pass numerical values. Furthermore, additional options can be added using the $and parameter.
// Custom Breakpoints
$breakpoints: (
sm: 576px,
md: 768px,
xl: 1200px,
);
// Media-Query Mixin
@mixin media(
$from: false,
$until: false,
$and: false,
$media-type: all,
) {
$min-width: 0;
$max-width: 0;
$query: "";
//FROM: this breakpoint (inclusive)
@if $from {
@if type-of($from) == number {
$min-width: $from;
} @else {
$min-width: map-get($breakpoints, $from);
}
}
//UNTIL: this breakpoint (exclusive)
@if $until {
@if type-of($until) == number {
$max-width: $until - 1px;
} @else {
$max-width: map-get($breakpoints, $until) - 1px;
}
}
@if $min-width != 0 {
$query: "#{$query} and (min-width: #{$min-width})";
}
@if $max-width != 0 {
$query: "#{$query} and (max-width: #{$max-width})";
}
@if $and {
$query: "#{$query} and (#{$and})";
}
@if ($media-type == "all" and $query != "") {
$media-type: "";
$query: str-slice(unquote($query), 6);
}
@media #{$media-type + $query} {
@content;
}
}
용법:
SCSS:
.foo-bar {
width: 50%;
@include media($from: "sm", $until: 900px, $and:"orientation: landscape"){
width: 100%;
}
}
CSS:
.foo-bar {
width: 50%;
}
@media (min-width: 576px) and (max-width: 899px) and (orientation: landscape) {
.foo-bar {
width: 100%;
}
}
BONUS: If you have a media-query being used throughout your style sheet, create nested mixins to further streamline your workflow.
@mixin sm-md{
@include media($from: "sm", $until: "md"){
@content
}
}
포지셔닝
This mixin is a massive time-saver when you want to position several elements. The values are provided in the order top right bottom left . Additionally, values such as auto , inherit , and initial are also supported.
Note: You can force a 0px offset by passing f0 to the mixin.
@mixin pos($type, $args: 0 0 0 0) {
position: $type;
$offsets: top right bottom left;
@if length($args) == 2 or length($args) == 4 {
@if length($args) == 2 {
$args: join($args, $args);
}
@each $offset in $offsets {
$offsetVal: nth($args, index($offsets, $offset));
#{$offset}: validOffset($offsetVal);
}
} @else {
@warn "Invalid number of arguments. (Must be either 2 or 4).";
}
}
@function validOffset($value) {
@if type-of($value) == number {
@if ($value != 0) {
@return $value;
} @else {
@return null;
}
} @else if str-slice($value, 1, 1) == "f" {
@return str-slice($value, 2);
} @else if index(auto initial inherit, $value) {
@return $value;
} @else {
@warn "Invalid offset value.";
@return null;
}
}
@mixin abs($args: 0 0 0 0) {
@include pos(absolute, $args);
}
@mixin rel($args: 0 0 0 0) {
@include pos(relative, $args);
}
@mixin fix($args: 0 0 0 0) {
@include pos(fixed, $args);
}
@mixin sticky($args: 0 0 0 0) {
@include pos(sticky, $args);
}
용법
SCSS:
.foo-bar{
@include rel(0 f0 auto 50%)
}
CSS:
.foo-bar {
position: relative;
right: 0;
bottom: auto;
left: 50%;
}
글꼴
This mixin provides a short hand for setting fonts, their fallbacks and style properties (font-family, size, weight, color, style and line-height). The mixin can be easily modified to all fallback support for sans-serif or any other font category.
⚠️ Be sure to include the fonts using the @font-face rule.
@mixin font-serif($name, $size: false, $weight: false, $color: false, $style: false, $lh: false) {
font-family: $name, "Times New Roman", Times, serif;
@if $size {font-size: $size};
@if $weight {font-weight: $weight};
@if $color {color: $color};
@if $style {font-style: $style;}
@if $lh {line-height: $lh;}
}
용법
SCSS:
.foo-bar{
@include font-serif("Noto Serif", 1.2rem, 700, #181818)
}
CSS:
.foo-bar {
font-family: "Noto Serif", "Times New Roman", Times, serif;
font-size: 1.2rem;
font-weight: 700;
color: #181818;
}
BONUS: Use the RFS Engine to set the font-sizes and achieve reponsive text; Example: @include font-size($size).
전환
Assign multiple transitions using this mixin. The transitions for which transition-duration , transition-delay and transition-timing-function is not defined inherit it from the last defined duration,delay and timing function.
@mixin transition($prop, $time, $easing: ease-in, $delay: 0s) {
$transition: ();
@for $i from 1 through length($prop) {
@for $j from 0 to (length($prop)) - (length($time)) {
$time: join($time, nth($time, -1));
}
@for $j from 0 to (length($prop)) - (length($easing)) {
$easing: join($easing, nth($easing, -1));
}
@for $j from 0 to (length($prop)) - (length($delay)) {
$delay: join($delay, nth($delay, -1));
}
$transition: append(
$transition,
(nth($prop, $i) nth($time, $i) nth($easing, $i) nth($delay, $i)),
$separator: comma
);
}
transition: $transition;
}
용법
SCSS:
.foo-bar{
@include transition(width opacity transform, 0.3s 0.4s, linear, 0.1s)
}
CSS:
.foo-bar {
transition: width 0.3s linear 0.1s, opacity 0.4s linear 0.1s, transform 0.4s linear 0.1s;
}
의사 요소
While pseudo-elements are useful for creating masking effects on text and images, they include a lot of code repetition. Let's reduce the number of lines of code with this mixin.
@mixin pseudo($display: block, $pos: absolute, $content: '', $width: 100%, $height: 100%){
content: $content;
display: $display;
position: $pos;
width: $width;
height: $height;
}
용법:
SCSS:
.foo-bar::before{
@include pseudo($width: 100px)
}
CSS:
.foo-bar::before {
content: "";
display: block;
position: absolute;
width: 100px;
height: 100%;
}
Z-인덱스
While not technically a mixin, this function allows you to define multi-level z-indexes in one place and prevents spaghetti code like z-index: 999 .
$z-indices: (
"menu": (
"items": 2,
"social": 3,
),
"main-content": 1,
"footer": -1,
);
@function ind($element, $sub-element: false){
$index: map-get($z-indices, $element);
@if $sub-element{ $index: map-get($index, $sub-element); }
@return $index;
}
용법
SCSS:
.menu{
.items {
z-index: ind(menu, items);
}
}
.footer{
z-index: ind(footer);
}
CSS:
.menu .items {
z-index: 2;
}
.footer {
z-index: -1;
}
결론
These are some of the mixins I created for use when working on my Portfolio Website . 이 믹스인 중 일부가 귀하에게 유용하고 자신만의 믹스인을 만들 수 있도록 영감을 주기를 바랍니다. 경험상 반복하는 경우 믹스인을 만드는 것이 좋습니다.
❤️을 삭제합니다. 당신의 격려가 저를 계속 움직이게 합니다. 댓글에서 좋아하는 믹스인을 알려주세요.
개선을 위한 제안이나 비판은 물론 환영합니다 😄.
참조:
top right bottom left . Additionally, values such as auto , inherit , and initial are also supported.0px offset by passing f0 to the mixin.@mixin pos($type, $args: 0 0 0 0) {
position: $type;
$offsets: top right bottom left;
@if length($args) == 2 or length($args) == 4 {
@if length($args) == 2 {
$args: join($args, $args);
}
@each $offset in $offsets {
$offsetVal: nth($args, index($offsets, $offset));
#{$offset}: validOffset($offsetVal);
}
} @else {
@warn "Invalid number of arguments. (Must be either 2 or 4).";
}
}
@function validOffset($value) {
@if type-of($value) == number {
@if ($value != 0) {
@return $value;
} @else {
@return null;
}
} @else if str-slice($value, 1, 1) == "f" {
@return str-slice($value, 2);
} @else if index(auto initial inherit, $value) {
@return $value;
} @else {
@warn "Invalid offset value.";
@return null;
}
}
@mixin abs($args: 0 0 0 0) {
@include pos(absolute, $args);
}
@mixin rel($args: 0 0 0 0) {
@include pos(relative, $args);
}
@mixin fix($args: 0 0 0 0) {
@include pos(fixed, $args);
}
@mixin sticky($args: 0 0 0 0) {
@include pos(sticky, $args);
}
.foo-bar{
@include rel(0 f0 auto 50%)
}
.foo-bar {
position: relative;
right: 0;
bottom: auto;
left: 50%;
}
This mixin provides a short hand for setting fonts, their fallbacks and style properties (font-family, size, weight, color, style and line-height). The mixin can be easily modified to all fallback support for sans-serif or any other font category.
⚠️ Be sure to include the fonts using the
@font-facerule.
@mixin font-serif($name, $size: false, $weight: false, $color: false, $style: false, $lh: false) {
font-family: $name, "Times New Roman", Times, serif;
@if $size {font-size: $size};
@if $weight {font-weight: $weight};
@if $color {color: $color};
@if $style {font-style: $style;}
@if $lh {line-height: $lh;}
}
용법
SCSS:
.foo-bar{
@include font-serif("Noto Serif", 1.2rem, 700, #181818)
}
CSS:
.foo-bar {
font-family: "Noto Serif", "Times New Roman", Times, serif;
font-size: 1.2rem;
font-weight: 700;
color: #181818;
}
BONUS: Use the RFS Engine to set the font-sizes and achieve reponsive text; Example:
@include font-size($size).
전환
Assign multiple transitions using this mixin. The transitions for which transition-duration , transition-delay and transition-timing-function is not defined inherit it from the last defined duration,delay and timing function.
@mixin transition($prop, $time, $easing: ease-in, $delay: 0s) {
$transition: ();
@for $i from 1 through length($prop) {
@for $j from 0 to (length($prop)) - (length($time)) {
$time: join($time, nth($time, -1));
}
@for $j from 0 to (length($prop)) - (length($easing)) {
$easing: join($easing, nth($easing, -1));
}
@for $j from 0 to (length($prop)) - (length($delay)) {
$delay: join($delay, nth($delay, -1));
}
$transition: append(
$transition,
(nth($prop, $i) nth($time, $i) nth($easing, $i) nth($delay, $i)),
$separator: comma
);
}
transition: $transition;
}
용법
SCSS:
.foo-bar{
@include transition(width opacity transform, 0.3s 0.4s, linear, 0.1s)
}
CSS:
.foo-bar {
transition: width 0.3s linear 0.1s, opacity 0.4s linear 0.1s, transform 0.4s linear 0.1s;
}
의사 요소
While pseudo-elements are useful for creating masking effects on text and images, they include a lot of code repetition. Let's reduce the number of lines of code with this mixin.
@mixin pseudo($display: block, $pos: absolute, $content: '', $width: 100%, $height: 100%){
content: $content;
display: $display;
position: $pos;
width: $width;
height: $height;
}
용법:
SCSS:
.foo-bar::before{
@include pseudo($width: 100px)
}
CSS:
.foo-bar::before {
content: "";
display: block;
position: absolute;
width: 100px;
height: 100%;
}
Z-인덱스
While not technically a mixin, this function allows you to define multi-level z-indexes in one place and prevents spaghetti code like z-index: 999 .
$z-indices: (
"menu": (
"items": 2,
"social": 3,
),
"main-content": 1,
"footer": -1,
);
@function ind($element, $sub-element: false){
$index: map-get($z-indices, $element);
@if $sub-element{ $index: map-get($index, $sub-element); }
@return $index;
}
용법
SCSS:
.menu{
.items {
z-index: ind(menu, items);
}
}
.footer{
z-index: ind(footer);
}
CSS:
.menu .items {
z-index: 2;
}
.footer {
z-index: -1;
}
결론
These are some of the mixins I created for use when working on my Portfolio Website . 이 믹스인 중 일부가 귀하에게 유용하고 자신만의 믹스인을 만들 수 있도록 영감을 주기를 바랍니다. 경험상 반복하는 경우 믹스인을 만드는 것이 좋습니다.
❤️을 삭제합니다. 당신의 격려가 저를 계속 움직이게 합니다. 댓글에서 좋아하는 믹스인을 알려주세요.
개선을 위한 제안이나 비판은 물론 환영합니다 😄.
참조:
transition-duration , transition-delay and transition-timing-function is not defined inherit it from the last defined duration,delay and timing function.@mixin transition($prop, $time, $easing: ease-in, $delay: 0s) {
$transition: ();
@for $i from 1 through length($prop) {
@for $j from 0 to (length($prop)) - (length($time)) {
$time: join($time, nth($time, -1));
}
@for $j from 0 to (length($prop)) - (length($easing)) {
$easing: join($easing, nth($easing, -1));
}
@for $j from 0 to (length($prop)) - (length($delay)) {
$delay: join($delay, nth($delay, -1));
}
$transition: append(
$transition,
(nth($prop, $i) nth($time, $i) nth($easing, $i) nth($delay, $i)),
$separator: comma
);
}
transition: $transition;
}
.foo-bar{
@include transition(width opacity transform, 0.3s 0.4s, linear, 0.1s)
}
.foo-bar {
transition: width 0.3s linear 0.1s, opacity 0.4s linear 0.1s, transform 0.4s linear 0.1s;
}
While pseudo-elements are useful for creating masking effects on text and images, they include a lot of code repetition. Let's reduce the number of lines of code with this mixin.
@mixin pseudo($display: block, $pos: absolute, $content: '', $width: 100%, $height: 100%){
content: $content;
display: $display;
position: $pos;
width: $width;
height: $height;
}
용법:
SCSS:
.foo-bar::before{
@include pseudo($width: 100px)
}
CSS:
.foo-bar::before {
content: "";
display: block;
position: absolute;
width: 100px;
height: 100%;
}
Z-인덱스
While not technically a mixin, this function allows you to define multi-level z-indexes in one place and prevents spaghetti code like z-index: 999 .
$z-indices: (
"menu": (
"items": 2,
"social": 3,
),
"main-content": 1,
"footer": -1,
);
@function ind($element, $sub-element: false){
$index: map-get($z-indices, $element);
@if $sub-element{ $index: map-get($index, $sub-element); }
@return $index;
}
용법
SCSS:
.menu{
.items {
z-index: ind(menu, items);
}
}
.footer{
z-index: ind(footer);
}
CSS:
.menu .items {
z-index: 2;
}
.footer {
z-index: -1;
}
결론
These are some of the mixins I created for use when working on my Portfolio Website . 이 믹스인 중 일부가 귀하에게 유용하고 자신만의 믹스인을 만들 수 있도록 영감을 주기를 바랍니다. 경험상 반복하는 경우 믹스인을 만드는 것이 좋습니다.
❤️을 삭제합니다. 당신의 격려가 저를 계속 움직이게 합니다. 댓글에서 좋아하는 믹스인을 알려주세요.
개선을 위한 제안이나 비판은 물론 환영합니다 😄.
참조:
z-index: 999 .$z-indices: (
"menu": (
"items": 2,
"social": 3,
),
"main-content": 1,
"footer": -1,
);
@function ind($element, $sub-element: false){
$index: map-get($z-indices, $element);
@if $sub-element{ $index: map-get($index, $sub-element); }
@return $index;
}
.menu{
.items {
z-index: ind(menu, items);
}
}
.footer{
z-index: ind(footer);
}
.menu .items {
z-index: 2;
}
.footer {
z-index: -1;
}
Reference
이 문제에 관하여(5 SCSS 믹스인을 확인하십시오!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/nidhishs/5-scss-mixins-to-check-out-2bkn텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
