본문 바로가기
728x90
반응형

CSS127

[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.
[SASS/SCSS]작성법 1 - 변수 사용하기 SASS - CSS 전처리기로, 중첩이나 조건문,반복문 등 다양한 기능을 통해 편리하게 작성 후 컴파일을 통해 CSS로 변환해 사용합니다. SASS와 SCSS는 거의 같지만 SCSS는 CSS와 거의 가까운 문법으로 SASS의 기능을 제공합니다. - 변수 선언 및 사용하기 $sass-color : red; 이와 같이 '$'를 붙여 변수를 선언합니다. 그 후 코드에 h1 { color: $sass-color; } 와 같이 '$'를 붙여 변수명을 이용해 사용합니다. 실제 적용되는 코드는 h1 { color : red; } 로 적용됩니다. 변수 선언의 위치에 따라 사용할 수 있는 범위가 지정됩니다. {}안에 선언되면 {}안에서만 사용됩니다.(지역변수 - 해당 지역에서만 사용가능) 그렇기 때문에 보통 맨위에 {}.. 2019. 5. 7.
728x90
반응형

티스토리툴바