3. SCSS 기본 문법

1. scss 는 css의 귀속을 표현 할 때 {} 안에 새로운 스타일을 작성한다.

 

아래의 html을 꾸며중 스타일시트를 작성해 보자.

 

- html 구조

<div class="container">

    <div class="box">

        <div class="item">

        </div>

    </div>

</div>

 

- scss

.container {

    width: 1024px;

    margin-left: auto;

    margin-right: auto;

    .box {

        width: 100%;

        display: flex;

        flex-wrap: wrap;

        .item {

            width: 25%;

        }

    }

}

 

- css compile 결과

.container {

    width: 1024px;

    margin-left: auto;

    margin-right: auto;

}

.container .box {

    width: 100%;

    display: flex;

    flex-wrap: wrap;

}

.container .box .item {

    width: 25%;

}

 

2. &[선택자]

 

- 하나의 html dom에 여러개의 스타일 시트를 사용하는 경우가 많이 있다.

 

아래의 html dom을 살펴 보면 item 이 여러개이고, 그중 활성화된 item을 border를 넣어 강조해 보도록 작성해 보면 다음과 같이 작성해 볼 수 있다.

 

- html 구조

<div class="container">

    <div class="box">

        <div class="item active">

        </div>

        <div class="item">

        </div>

    </div>

</div>

 

- scss

.container {

    width: 1024px;

    margin-left: auto;

    margin-right: auto;

    .box {

        width: 100%;

        display: flex;

        flex-wrap: wrap;

        .item {

            width: 25%;

            &.active {

                border: 1px solid red;

            }

        }

    }

}

 

- css compile 결과

.container {

    width: 1024px;

    margin-left: auto;

    margin-right: auto;

}

.container .box {

    width: 100%;

    display: flex;

    flex-wrap: wrap;

}

.container .box .item {

    width: 25%;

}

.container .box .item.active {

    border: 1px solid red;

}

 

3. & 사용시 주의 사항

&를 사용 할 때  &와 선택자 사이에 공백이 들어가게 되면 ::after, ::before 와 같은 가상 선택자에서는 선택자와 가상 선택자 사이에 공백이 생겨도 해당 class의 가상선택자로 인식되지만(특정 브라우저에서는 인식 안됨)

. 이나 # 과 같은 선택자를 사용하여 다중 선택자를 사용할 때 공백이 있으면 다중 class가 아니라 1번과 같이 귀속되어 자식 선택자로 변하게 된다.

따라서 & 와 선택자 사이에 공백은 가급적 없이 작성하고 공백을 넣어도 되는 경우는 > + ~ 등에 넣는것이 좋다.

 

예1) 

- scss

.content {

    .box {

        background-color: red;

    }

}

 

- 결과

.content .box {

    background-color: red;

}

 

- html dom 구조

<div class="content">

    <div class="box"></div>

</div>

 

 

예2)

- scss

.content {

    &.box {

        background-color: red;

    }

}

 

- 결과

.content.box {

    background-color: red;

}

 

- html dom 구조

<div class="content box">

</div>

 

참고 :

& > 선택자 : 직계 자손 선택자(현재 레벨 바로 아래 레벨의 선택자)

& + 선택자 : 현제 선택자(html상 현재 레벨에 존재하는 html dom 과 동일 레벨의 바로 다름 선택자)

& ~ 선택자 : 이웃 선택자(현재 레벨과 동일한 모든 선택자)

 

*** 위 세가지의 경우 & 생략 가능