YoonStudyNote

1. 함수(Functions) 자신의 함수를 정의하여 사용할 수 있다. 함수와 Mixins은 거의 유사하지만 반환되는 내용이 다르다. Mixin은 위에서 살펴본 대로 지정한 스타일(Style)을 반환하는 반면, 함수는 보통 연산된(Computed) 특정 값을 @return 지시어를 통해 반환한다. // Mixins @mixin 믹스인이름($매개변수) { 스타일; } // Functions @function 함수이름($매개변수) { @return 값 } 사용하는 방법에도 차이가 있다. Mixin은 @include 지시어를 사용하는 반면, 함수는 함수이름으로 바로 사용한다. 그리고 함수는 시작할때도 "@"을 사용하고 return할때도 "@"을 사용한다 // Mixin @include 믹스인이름(인수); //..

1. 확장(Extend) 특정 선택자가 다른 선택자의 모든 스타일을 가져야하는 경우가 종종 있다. 이럴 경우 선택자의 확장 기능을 사용할 수 있다. @extend 선택자; .btn { padding: 10px; margin: 10px; background: blue; } .btn-danger { @extend .btn; background: red; } .btn, .btn-danger { padding: 10px; margin: 10px; background: blue; } .btn-danger { background: red; } CSS에서 .btn, .btn-danger이렇게 "," 콤마를 볼 수 있다. 이것은 다중선택자이고 2개의 클래스 모두 똑같은 스타일을 적용한다는 뜻이다. 그리고 backgro..

@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..

Sass의 @if 조건문에서 사용되는 논리(Boolean) 연산에는 ‘그리고’,’ 또는’, ‘부정’이 있다. 자바스크립트 문법에 익숙하다면 &&, ||, !와 같은 기능으로 생각하면 된다. and 그리고 or 또는 not 부정(반대) $width: 90px; div { @if not ($width > 100px) { height: 300px; } } div { height: 300px; }

색상도 연산할 수 있다. div { color: #123456 + #345678; // R: 12 + 34 = 46 // G: 34 + 56 = 8a // B: 56 + 78 = ce background: rgba(50, 100, 150, .5) + rgba(10, 20, 30, .5); // R: 50 + 10 = 60 // G: 100 + 20 = 120 // B: 150 + 30 = 180 // A: Alpha channels must be equal } div { color: #468ace; background: rgba(60, 120, 180, 0.5); }

문자 연산에는 +가 사용된다. 문자 연산의 결과는 첫 번째 피연산자를 기준으로 한다. 첫 번째 피연산자에 따옴표가 붙어있다면 연산 결과를 따옴표로 묶는다. 반대로 첫 번째 피연산자에 따옴표가 붙어있지 않다면 연산 결과도 따옴표를 처리하지 않는다. div::after { content: "Hello " + World; flex-flow: row + "-reverse" + " " + wrap } div::after { content: "Hello World"; flex-flow: row-reverse wrap; }

상대적 단위 연산 일반적으론 절댓값을 나타내는 px 단위로 연산을 한다 하지만, 상대적 단위(%, em, vw 등)의 연산의 경우 CSS calc()로 연산해야 한다. calc()는 sass뿐만이 아니라 순수 css에서도 사용이 가능하다. width: 50% - 20px; // 단위 모순 에러(Incompatible units error) width: calc(50% - 20px); // 연산 가능 나누기 연산의 주의사항 CSS는 속성 값의 숫자를 분리하는 방법으로 "/" 를 허용하기 때문에 "/" 가 나누기 연산으로 사용되지 않을 수 있다. 예) font: 16px / 22px serif; 같은 경우 font-size: 16px와 line-height: 22px의 속성값 분리를 위해서 "/" 를 사용한..