YoonStudyNote

@content 선언된 Mixin에 @content이 포함되어 있다면 해당 부분에 원하는 스타일 블록 을 전달할 수 있다. 이 방식을 사용하여 기존 Mixin이 가지고 있는 기능에 선택자나 속성 등을 추가할 수 있다. @mixin 믹스인이름() { 스타일; @content; } @include 믹스인이름() { // 스타일 블록 스타일; } @mixin icon($url){ &::after{ content: $url; @content; } } .box1 { @include icon("image/icon.png"); } .box2{ @include icon("image/icon2.png"){ display: block; position: absolute; width: 100px; height: 100px;..

1. 인수(Arguments) Mixin은 함수(Functions)처럼 인수(Arguments)를 가질 수 있다. 하나의 Mixin으로 다양한 결과를 만들 수 있다. // SCSS @mixin 믹스인이름($매개변수) { 스타일; } @include 믹스인이름(인수); // Sass =믹스인이름($매개변수) 스타일 +믹스인이름(인수) 매개변수(Parameters)란 변수의 한 종류로, 제공되는 여러 데이터 중 하나를 가리키기 위해 사용된다. 제공되는 여러 데이터들을 전달인수(Arguments) 라고 부른다. 다음과 같이 인수전달이 된다. @mixin dash-line($width, $color) { border: $width dashed $color; } .box1 { @include dash-line(1..

이전 내용에서처럼 외부에서 값을 받아오는 일이 없으면 굳이 매개변수를 사용하지 않아도 된다. 또한 굳이 @mixin을 쓰지않아도 사용이 가능하다. // SCSS @mixin 믹스인이름 { 스타일; } // Sass =믹스인이름 스타일 // SCSS @mixin large-text { font-size: 22px; font-weight: bold; font-family: sans-serif; color: orange; } // Sass =large-text font-size: 22px font-weight: bold font-family: sans-serif color: orange 소스코드에서 볼 수 있듯이, SCSS는 중괄호로 범위를 지정하고 Sass는 들여쓰기를 잘 해야한다. 예시) @mixin la..

재활용(Mixins) Sass Mixins는 스타일 시트 전체에서 재사용 할 CSS 선언 그룹 을 정의하는 아주 훌륭한 기능이다. 약간의 Mixin(믹스인)으로 다양한 스타일을 만들어낼 수 있다. 우선, Mixin은 두 가지만 기억하면 된다. 선언하기(@mixin)와 포함하기(@include) 이다. 만들어서(선언), 사용(포함)하는 것이다! --> 즉, mixin로 공유할 정보를 입력하는것이고 include를 이용해서 mixin의 정보를 가져와서 사용하는것이다. @mixin 기본적인 Mixin 선언은 아주 간단하다. @mixin 지시어를 이용하여 스타일을 정의한다. 1. 매개변수로 값을 받아오기 // SCSS @mixin 믹스인이름 (매개변수) { 스타일; } // Sass =믹스인이름 스타일 @mix..