SCSS 기법(중첩, 믹스인, 선택자상속, 조건문)

SCSS 중첩(Nesting)

(LESS의 내포 규칙과 많이 비슷하다.)

중괄호 안에 해당 요소의 자식 요소들의 스타일을 작성하면 된다.

LESS 기법에서 접두어만 @에서 $로 바꾸면 된다.

 

기존 CSS	SCSS
div {     width: 500px;     color : #000000; } div h3{     width: 500px;     color : #f96d9c; } div h3 a {     color : #000000; } div h1{     width : 300px;     color : #ff0000; }	$color-black : #000000; $color-pink : #f96d9c; $color-red : #ff0000; $width-default : 500px; div {     width : $width-default;     color : $color-black;     h3 {         width : $width-default;         color : $color-pink;         a {             color : $color-black;         }     }     h1 {         width : 300px;         color : $color-red;     }     }

 

**부모 참조 선택자 &

1) 부모 참조 선택자와 다른 선택자를 결합해서 사용한다!

(곧, 아래에서 &란 이전까지 중첩된 모든 상위 부모 선택자를 나타낸다.)

&:active, :empty, :first-child

&::after, ::selection, ::first-letter

&#movie, &.active, &[type=radio]

&-sidebar, --default:hover

 

 

2) &를 부모가 아니고 하위 선택자(자식)으로 위치시킬 수도 있다.

.page &  (: page 클래스 선택자의 자식)

 

예제)

#main {
  color: black;
  a {
    font-weight: bold;
    text-decoration: none;
    &:hover { text-decoration: underline; }
    body.firefox & { font-weight: normal; }
  }
}

designmeme.github.io/ko/blog/sass-css-extensions-nesting-and-spacial-selectors/

SCSS Minxin

@mixin이라는 키워드를 사용해 믹스인을 정의하고, 이를 포함시키기 위해서는 @include 키워드를 사용한다.

  cf) LESS는 @mixin, @include 키워드를 사용하지 않고, 단순히 점(.)을 붙여 사용한다. (클래스와 비슷)

@mixin box ($color:blue){ //@mixin 키워드를 이용해 정의
    border : 1px solid $color;
    background-color : #fdd;
}
#box a{
  @include box //@include 키워드를 이용해 믹스인을 포함시킴
}

 

 

SCSS 선택자 상속

@extend 지시어를 사용하면 => 해당 요소의 스타일을 그대로 가져와 복사하게 된다.

	컴파일 후 결과값
.box {     border : 1px solid blue;     background-color : #fdd; } .completeBox {     @extend .box;     border-width : 3px; }	.box {   border: 1px solid blue;   background-color: #fdd; } .completeBox {   border: 1px solid blue;   background-color: #fdd;   border-width: 3px; }

 

SCSS 조건문

SCSS는 조건문(@if, @else)과 반복문(@each, @while)을 제공한다.

 

예제)

$type :  dog;
a{
  @if $type == dog {
    color : white;
    padding : 5px;
  } @else if $type == cat{
    color : black;
    padding : 3px;
  } @else if $type == frog {
    color : green;
    padding : 10px;
  } @else {
    color : red;
  }
}

 

실행 결과)

a {
  color: white;
  padding: 5px;
}

 

 

참고사이트

goohwang.tistory.com/5