달밤에 코딩하기/Sass & SCSS (25) 썸네일형 리스트형 #25 - 반복문 (@while) @while 조건이 false가 될 때 까지 내용을 반복한다. false가 되지 않으면 무한 루프에 빠질 수 있다. SCSS 기본 구조 @while 조건{ /* 반복 내용 */ } SCSS $i : 3; @while $i > 0{ .class-#{$i} { width : 10px * $i; } $i : $i - 1; } Compile 된 CSS .class-3{ width : 30px; } .class-2{ width : 20px; } .class-1{ width : 10px; } #24 - 반복문 (@each) @each list data와 Map data를 반복할 때 사용한다. #list / Map Data 설명 보기 #3 - Sass & SCSS 주석과 데이터의 종류 #3 - Sass & SCSS 주석과 데이터의 종류 주석 ( Comment ) Sass와 SCSS는 주석 사용법에서 차이가 있다. Sass 주석 /* 각 줄에 별표를 붙여야 하며 * 별의 라인을 맞춰주어야 * 정상 동작 합니다. */ SCSS 주석 //해당 주석은 컴파일 되지 않습니다. rosakim90.tistory.com List Data와 @each SCSS 기본 구조 @each $변수 in 데이터{ /* 반복 내용 */ } SCSS $color-list : red, orange, yellow, green; .class{ @each $co.. #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; } 바람직한 예 위의 케이스를 벗어나기 위해 '접두어-함수(.. 이전 1 2 3 4 다음
