728x90 반응형 CSS/SASS17 [SCSS]작성법 9 - 다른 선택자에 적용한 속성 그대로가져와 적용하기 (@ extend) 2019/05/07 - [퍼블리싱/SASS] - [SCSS]작성법 8 - 다른 .scss파일 가져오기 (@ import) 아래와 같이 panel클래스에 적용한 css코드가 있다. .panel{ background-color: red; height: 70px; border: 2px solid green; } /* big-panel이라는 클래스에 .panel과 똑같은 코드를 적용하기 위해서 @extend를 이용하여 불러온다. */ .big-panel{ @extend .panel; width: 150px; font-size: 2em; } 아래와 같이 적용된다. .big-panel{ background-color: red; height: 70px; border: 2px solid green; width: 150.. 2019. 5. 7. [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. 이전 1 2 3 4 5 다음 728x90 반응형