SASS

Sass - js 방식을 css에서 사용해보고자 나왔다.
프로젝트 규모가 커지면서 지속적으로 발생하는 코드의 유지보수를 용이하게 하기위해 생겨났다

즉, css의 한계를 보완하기위해서 css 전처리기를 사용한다.

※css 전처리기(css preprocessor)

1. SASS

2. LESS

3. STYLUS

scss는 sass의 세번째 버전에서 추가되었고 sass의 모든 기능을 지원하면서 css구문과 호환되도록 만들어졌다.

예시코드

// SASS

.wrapper
    width: 100px
    height: 200px
    .content
        color: white
        float: left

 

// SCSS

.wrapper{
        width: 100px;
        height: 200px;

            .content{
                color: white;
                float: left;
        }
}

그 외

$ 변수를 사용해서 공통된 속성을 재사용할 수 있다.

예시)

$white-color: #fff;

@mixin → 함수를 정의할 때, 공통된 속성을 묶음으로 재사용할 수 있다.

예시)

@mixin btn-style{

        width: 100px;

         height: 100px;

         background-color: white;

}
.signup-btn{

         @include btn-style;

}

@import 파일을 여러개로 분류해 가져올 수 있다. 코드의 재활용, 유지보수에 도움이 된다.