728x90 반응형 분류 전체보기298 [SCSS]작성법 7 - 반복문 사용하기 (@while) 2019/05/07 - [퍼블리싱/SASS] - [SCSS]작성법 6 - 배열을 이용해 맵핑하기 (@each) 아래와 같이 @while 키워드를 이용해 반복문을 정의합니다. $x: 1; @while $x < 6 { .text-#{$x} { font-size: $x*10px;} $x: $x + 1; } 위의 코드는 아래와 같은 의미를 가집니다. .text-1 {font-size 10px; } .text-2 {font-size 20px; } .text-3 {font-size 30px; } .text-4 {font-size 40px; } .text-5 {font-size 50px; } 2019/05/07 - [퍼블리싱/SASS] - [SCSS]작성법 8 - 다른 .sass파일 가져오기 (@ import) 2019. 5. 7. [SCSS]작성법 6 - 배열을 이용해 맵핑하기 (@each) 2019/05/07 - [퍼블리싱/SASS] - [SCSS]작성법 5 - 반복문 이용하기 (@for) 맵핑할 배열 선언 $colors: (color1: blue, color2: red, color3: green); @each 키워드를 이용해 맵핑하기 @each $key, $color in $colors { .#{$key}-text {color: $color;} } 아래와 같은 의미를 갖는다 . .color1-text { color : blue; } .color2-text { color : red; } .color3-text { color : green; } 2019/05/07 - [퍼블리싱/SASS] - [SCSS]작성법 7 - 반복문 사용하기 (@while) 2019. 5. 7. [SCSS]작성법 5 - 반복문 이용하기 (@for) 2019/05/07 - [퍼블리싱/SASS] - [SCSS]작성법 4 - 조건문 사용하기 (@if) @for 키워드를 사용한 반복문으로 코드를 작성합니다. @for $i from 1 through 5 { .text-#{$i} { font-size : $i*10px; } } 이 코드는 아래와 같습니다. .text-1 {font-size : 10px;} .text-2 {font-size : 20px;} .text-3 {font-size : 30px;} .text-4 {font-size : 40px;} .text-5 {font-size : 50px;} 2019/05/07 - [퍼블리싱/SASS] - [SCSS]작성법 6 - 배열을 이용해 맵핑하기 (@each) 2019. 5. 7. [SCSS]작성법 4 - 조건문 사용하기 (@if) 2019/05/07 - [퍼블리싱/SASS] - [SCSS]작성법 3 - mixin 이용하기 (@mixin @include) @if @else if @else 를 이용해 조건문을 사용합니다. 아래와 같이 정의합니다. @mixin text-effect($val) { @if $val == danger { color: red; } @else if $val == alert { color: yellow; } @else if $val == success { color: green; } @else { color: black; } } 아래와 같이 코드에 적용합니다. h2 { @include text-effect(alert); } alert 값에 해당하는 조건문이 적용되므로 다음과 같이 적용됩니다. h2{ color :.. 2019. 5. 7. 이전 1 ··· 58 59 60 61 62 63 64 ··· 75 다음 728x90 반응형