YoonStudyNote

@while @while은 조건이 false로 평가될 때까지 내용을 반복한다. while 문과 유사하게 잘못된 조건으로 인해 컴파일 중 무한 루프에 빠질 수 있다. 코드 길이가 단축된다는 장점이 있지만, 제대로 사용하지 않는다면 권장하지 않는다. @while 조건 { // 반복 내용 } $i: 6; @while $i > 0 { .item-#{$i} { width: 2px * $i; } $i: $i - 2; } .item-6 { width: 12px; } .item-4 { width: 8px; } .item-2 { width: 4px; } 주로 for 나 for-each를 사용하는걸 권장한다.

1. @each @each는 List와 Map 데이터를 반복할 때 사용한다. cf. List는 자바스크립트의 배열과 Map은 자바스크립트의 객체와 유사하다. for in 문과 유사하다. @each $변수 in 데이터 { // 반복 내용 } List 데이터를 반복해 보겠다. // List Data $fruits: (apple, orange, banana, mango); .fruits { @each $fruit in $fruits { li.#{$fruit} { background: url("/images/#{$fruit}.png"); } } } .fruits li.apple { background: url("/images/apple.png"); } .fruits li.orange { background: u..

@for @for는 스타일을 반복적으로 출력한다. Javascript for 문과 유사하다. @for는 through를 사용하는 형식과 to를 사용하는 형식으로 나뉜다. 두 형식은 종료 조건이 해석되는 방식이 다르다. // through // 종료 만큼 반복 @for $변수 from 시작 through 종료 { // 반복 내용 } // to // 종료 직전까지 반복 @for $변수 from 시작 to 종료 { // 반복 내용 } 차이점을 이해하기 위해 다음 예제를 살펴보자. 변수는 관례상 $i를 사용한다. * through와 to의 차이점 // 1부터 3번 반복 @for $i from 1 through 3 { .through:nth-child(#{$i}) { width : 20px * $i } } // ..

1. @if (지시어) @if 지시어는 조건에 따른 분기 처리가 가능하며, if 문(if statements)과 유사하다. 같이 사용할 수 있는 지시어는 @else, if가 있다. 추가 지시어를 사용하면 좀 더 복잡한 조건문을 작성할 수 있다. // @if @if (조건) { /* 조건이 참일 때 구문 */ } // @if @else @if (조건) { /* 조건이 참일 때 구문 */ } @else { /* 조건이 거짓일 때 구문 */ } // @if @else if @if (조건1) { /* 조건1이 참일 때 구문 */ } @else if (조건2) { /* 조건2가 참일 때 구문 */ } @else { /* 모두 거짓일 때 구문 */ } 조건에 ( )는 생략이 가능하기 때문에, ( ) 없이 작성하는 ..

1. 함수 이름 중복 위와 같이 함수는 @include 같은 별도의 지시어 없이 사용하기 때문에 내가 지정한 함수와 내장 함수(Built-in Functions)의 이름이 충돌할 수 있다. 따라서 내가 지정한 함수에는 별도의 접두어를 붙여주는 것이 좋다. 내장 함수란, 응용 프로그램에 내장되어 있으며 최종 사용자가 액세스 할 수 있는 기능이다. 예를 들어, 대부분의 스프레드 시트 응용 프로그램은 행이나 열의 모든 셀을 추가하는 내장 SUM 함수를 지원한다. 예를 들어, 색의 빨강 성분을 가져오는 내장 함수로 이미 red()가 있다. 같은 이름을 사용하여 함수를 정의하면 이름이 충돌하기 때문에 별도의 접두어를 붙여 extract-red() 같은 이름을 만들 수 있다. // 내가 정의한 함수 @functio..

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