달밤에 코딩하기 (74) 썸네일형 리스트형 #23 - 반복문 (@for) 반복문 - @for @for 반복문은 through / to / from 와 함께 사용한다. @for + from + through form부터 through 까지 반복한다. SCSS 기본 구조 @for $변수 from 시작 through 종료{ /* 반복 내용 */ } SCSS $i(=$index)는 숫자 증가/감소의 경우 관례적으로 사용된다. 즉, 아래 코드에서는 '1부터 5까지 증가하여 반복하라'를 실행하는 것이다. /* nth-child의 괄호는 문자 보간#{} 을 사용한다 */ @for $index from 1 through 5{ .class:nth-child(#{$index}){ width : 10px * $index; } } Compile 된 CSS .class:nth-child(1){ wi.. #22 - 조건문 - @if / @function / @mixin 활용 함수와 함께 조건문 사용하기 SCSS @function box-color($size){ @if ($size>100px and $size #21 - 조건문 (@if) 조건문 (@if) 사용 예시 1 SCSS 기본 구조 @if (조건) { 조건이 참일 때 동작 } SCSS $box-size : 500px; .class{ @if ($box-size == 500px) { background-color : red; } } Compile 된 CSS .class{ background-color : red; } 사용 예시 2 SCSS 기본 구조 @if (조건) { 조건이 참일 때 동작 } @else { 조건이 거짓일 때 동작 } SCSS $box-size : 500px; .class{ @if ($box-size > 800px) { background-color : red; } @else { background-color : yellow; } } Compile 된 CSS .clas.. #20 - 조건문(if) 조건문 (if) 기본 구조 SCSS if(조건, true표현식, false표현식); 사용 예시 SCSS $size : 200px; /* size 값이 100px 보다 크면 size 값을 입력*/ /* size 값이 100px 보다 작으면 값을 넣지 않음*/ .class1{ width : if($size>100px, $size, null); } /* size 값이 300px 보다 크면 size 값을 입력*/ /* size 값이 300px 보다 작으면 값을 넣지 않음*/ .class2{ width : if($size>300px, $size, null); } Compile 된 CSS /* size값인 200px이 100px보다 크기 때문에, true인 size 200px이 적용 됨 */ .class1{ wid.. #19 - 논리 / 비교 연산 논리 (Boolean) / 비교 연산 논리 / 비교 연산은 일반적으로 조건문(@if)과 함께 사용된다. 논리 / 비교 연산 종류 분류 기호 설명 비교 == 같음 != 같지 않음 보다 큼 = 보다 크거나 같음 논리 and 그리고 ( 두가지 조건 모두 충족 ) or 또는 ( 한가지 조건 충족 ) not 부정 ( 모두 불충족 ) # 조건문 - if https://rosakim90.tistory.com/entry/20-%EC%A1%B0%EA%B1%B4%EB%AC%B8if #20 - 조건문(if) 조건문 (if) 기본 구조 SCSS if(조건, true표현식, false표현식); 사용 예시 SCSS $size : 200px; /* size 값이 100px 보다 크면 size 값을 입력*/ /* size 값이 10.. #18 - 함수 (@function / @return) 함수 @function은 특정 값을 @return을 통해 반환하는 것이다. 기본 구조 SCSS /* 함수 정의 */ @function 함수이름($매개변수){ @return 값; } /* 함수 사용 */ 함수이름(인수) 함수이름() 함수 이름 주의사항 내장함수(기본적으로 프로그램에 내장되어있는 함수)가 있을 수 있음으로, 함수의 이름은 '접두어-함수()'형태를 가지는 것이 좋다. 바람직하지 않은 예 red는 #ff0000를 나타내는 내장함수이기 때문에, red로 함수를 지정하면 함수가 중복되게 된다. 따라서 아래 예시는 바람직하지 않다. SCSS @function red(){ @return #e34835; } .class{ color : red; } 바람직한 예 위의 케이스를 벗어나기 위해 '접두어-함수(.. #17 - SCSS 재사용 - 확장(@expand) 확장 특정 선택자의 스타일을 상속할 때 사용. Compile된 CSS가 커지거나 원치않는 부작용이 발생될 수 있으므로 Mixin을 사용하는 것이 좋다. 기본 구조 SCSS @extend 선택자; 사용 예시 SCSS .class1{ width : 100px; height : 200px; } .class2{ @extend .class1; color : red; } Compile 된 CSS .class1, .class2{ width : 100px; height : 200px; } .class2{ color : red; } #16 - SCSS 재사용 - 스타일 전달 (@content) 스타일 전달 (@content) Mixin 부분에 선언하여 스타일 블록을 전달한다. 기본 구조 SCSS @mixin 믹스인이름(){ 스타일; @content; } @include 믹스인이름(){ 스타일; } 사용 예시 SCSS @mixin test($c){ background-color : $c; @content; } .class1{ @include test(red){ background-size : 100%; }; } .class2{ @include test(red) } Compile 된 CSS .class1{ background-color : red; background-size : 100%; } .class2{ background-color : red; } 이전 1 2 3 4 5 6 7 ··· 10 다음
