scss 문법(version 1.0)

scss 문법

1. 기본 문법
   • 기본틀은 CSS 문법과 동일하다. 셀렉터를 쓰고 { .. } 블럭안에 속성:속성값; 의 형태로 속성들을 정의할 수 있다.
   • nested block을 적용할 수 있다.

  .input-value{
        width:200px;
        height:30px;
        line-height:normal;
        font-family: inherit; 
        border: 1px solid #999;
        border-radius: 0;
    }

2. 상위요소 참조
   • &을 사용하면 현재 블럭이 적용되는 셀렉터를 참조한다. 정확하게는 참조가 아닌 치환이다. 특히 현재 속성을 설정중인 셀렉터에 의사셀렉터를 적용할 때 유용하다.

 button{
        width:50%;
        &:hover{
            background-color: #2E2E2E;
        }
    }

3. 변수와 연산자

   • 색상이나 선 스타일, 폰트 패밀리등은 대체로 사이트 내에서 공통적으로 정의해놓은 값을 쓰는 경우가 많다. 이들을 매번 지정하지 않고 변수로 들어서 사용하면 변경 시점에 변수의 내용만 수정하여 모든 곳의 값을 공통적으로 바꿀 수 있을 것이다.

4. mixin

   • 공통적으로 많이 쓰이는 CSS 선언값들을 묶어서 믹스인으로 만들어 재사용이 가능하게끔 할 수 있다. 변수는 단일 값을 담을 수 있는 것에 비해, 믹스인은 여러 속성의 정의 및 셀렉터에 대한 속성 전체등 블럭 단위로 재사용할 수 있다.
   • 특별히 믹스인을 정의할 때에는 파라미터를 받을 수 있게끔 할 수 있기 때문에 단순 복붙이 아닌 파라미터 값에 따른 가변적 속성 집합을 만들어 유용하게 쓸 수 있다.

@mixin colors($color, $backgroundColor, $radius){
    color:$color;
    background-color:$backgroundColor;
    border-radius:$radius;
}
@include colors(#fff,#04c584,4px);

5. 분기분
   • 분기구문은 @if 절을 이용하여 작성한다.
   • @if 표현식 { ... }

    @if $justify{
        justify-content: $justify;
    }
    @if $align{
        align-items: $align;
    }