728x90 반응형 CSS127 [SCSS]작성법 8 - 다른 .scss파일 가져오기 (@ import) 2019/05/07 - [퍼블리싱/SASS] - [SCSS]작성법 7 - 반복문 사용하기 (@while) scss 파일은 _파일명.scss형식으로 되어있습니다. @import 키워드를 이용해 현재 scss파일에 다른 scss파일의 내용을 포함하도록 합니다. @import '파일명' ; _와 .scss확장자를 제외한 파일명만 적어 불러옵니다. 2019/05/07 - [퍼블리싱/SASS] - [SCSS]작성법 9 - 다른 선택자에 적용한 속성 그대로가져와 적용하기 (@ extend) 2019. 5. 7. [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. 이전 1 ··· 22 23 24 25 26 27 28 ··· 32 다음 728x90 반응형