[Sass] Sass(4) - Mixin
Mixin
- Mixin을 사용하면 스타일시트 전체에서 재사용할 수 있는 CSS스타일을 정의할 수 있다.
1. Mixin 정의
/* 1. arguments(인수)가 없을 경우 */
@mixin mixin-name {
// css code
}
/* 2. arguments(인수)를 사용할 경우 */
@mixin mixin-name($arg1, $arg2, ...) {
// css code
}
/* 3. arguments(인수)가 없을 경우 기본값을 설정하여 출력 */
@mixin mixini-name($arg1: 기본값설정1, $arg2: 기본값설정2, ...){
// css code
}
2. Mixin 사용
@include mixin-name;
/* arguments(인수)가 있는 경우 */
@include mixin-name($arg1, $arg2, ...);
3. Mixin 예제
/* 1번예제 - 기본 */
/* SCSS */
@mixin color {
color: red;
}
p {
@include color;
}
/* css */
p {
color: red;
}
/* 2번예제 - argument사용 */
/* SCSS */
@mixin color($color){
color: $color
}
p {
@include color(#ffaaaa);
}
/* css */
p {
color: #ffaaaa;
}
/* 3번예제 - arguments(인수)가 없을 경우 기본값을 설정 */
/* SCSS */
@mixin title($color: #ffaaaa, $size: 10px) {
color: $color;
font-size: $size;
}
h1 {
@include title(red);
}
/* css */
h1 {
color: red; /* 인수에 red를 넣어서 red로 출력 */
font-size: 10px; /* 인수에 기본값이 설정 되어있어서 10px로 출력 */
}
Author And Source
이 문제에 관하여([Sass] Sass(4) - Mixin), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@hyesom/Sass-Sass4-Mixin
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
/* 1. arguments(인수)가 없을 경우 */
@mixin mixin-name {
// css code
}
/* 2. arguments(인수)를 사용할 경우 */
@mixin mixin-name($arg1, $arg2, ...) {
// css code
}
/* 3. arguments(인수)가 없을 경우 기본값을 설정하여 출력 */
@mixin mixini-name($arg1: 기본값설정1, $arg2: 기본값설정2, ...){
// css code
}
@include mixin-name;
/* arguments(인수)가 있는 경우 */
@include mixin-name($arg1, $arg2, ...);
/* 1번예제 - 기본 */
/* SCSS */
@mixin color {
color: red;
}
p {
@include color;
}
/* css */
p {
color: red;
}
/* 2번예제 - argument사용 */
/* SCSS */
@mixin color($color){
color: $color
}
p {
@include color(#ffaaaa);
}
/* css */
p {
color: #ffaaaa;
}
/* 3번예제 - arguments(인수)가 없을 경우 기본값을 설정 */
/* SCSS */
@mixin title($color: #ffaaaa, $size: 10px) {
color: $color;
font-size: $size;
}
h1 {
@include title(red);
}
/* css */
h1 {
color: red; /* 인수에 red를 넣어서 red로 출력 */
font-size: 10px; /* 인수에 기본값이 설정 되어있어서 10px로 출력 */
}
Author And Source
이 문제에 관하여([Sass] Sass(4) - Mixin), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hyesom/Sass-Sass4-Mixin저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)