본문 바로가기
728x90
반응형

CSS/SASS17

[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.
[SCSS]작성법 3 - mixin 이용하기 (@mixin @include) 2019/05/07 - [퍼블리싱/SASS] - [SCSS]작성법 2 - 선택자 중첩하여 작성하기 재사용 가능한 코드를 정의해 사용하는 방식으로 함수와 비슷합니다. - 정의 및 사용하기 아래와 같이 @mixin 키워드를 사용해 정의합니다. @mixin div-box-shadow ($x, $y, $blur, $c) { -webkit-box-shadow: $x, $y, $blur, $c; -moz-box-shadow: $x, $y, $blur, $c; -ms-box-shadow: $x, $y, $blur, $c; box-shadow: $x, $y, $blur, $c; } @include 키워드를 사용해 적용합니다. div { @include div-box-shadow(0px, 0px, 4px, #fff); .. 2019. 5. 7.
[SCSS]작성법 2 - 선택자 중첩하여 작성하기 2019/05/07 - [퍼블리싱/SASS] - [SCSS]작성법 1 - 변수 사용하기 보통 CSS를 작성할 때는 아래와 같이 작성합니다. nav { width:100%; height: 50px; } nav ul{ list-style: none; } nav ul li { display: inline-block; } SASS로 작성할 때는 아래와 같이 중첩해서 작성 할 수 있습니다 nav { width : 100%; height : 50px; ul { list-style : none; li{ display : inline-block; } } } 2019/05/07 - [퍼블리싱/SASS] - [SCSS]작성법 3 - mixin 이용하기 (@mixin @include) 2019. 5. 7.
728x90
반응형

티스토리툴바