SCSS - 1편

이호현·2020년 7월 22일
0

SCSS

목록 보기
1/6

1. 주석

// 주석
/* 주석 */

2. import

import

외부에서 scss, sass파일을 불러와서 현재 파일에서 같이 사용

@import test.scss

다음과 같은 경우는 css파일형태로 불러옴

  • 확장자가 css일때
    ex) @import 'test.css';

  • 파일 이름이 http로 시작할 때
    ex) @import 'http://test.com/test';

  • url()을 사용할 때
    ex) @import url(test);

  • 미디어쿼리가 있을 때
    ex) @import 'test' screen;

여러 파일 import

','를 이용해 여러 파일 import 가능

@import 'test1', 'test2'

3. 중첩

중첩

부모 선택자의 속성 안에서 속성을 정의해서 간단하게 표현 가능

.test{
    width: 100%;
    div{
        padding: 20px;
        li{
            font-size: 20px;
        }
    }
}

위와 아래는 같은 내용

.test{
    width: 100%;
}
.test div{
    padding: 20px;
}
.test div li{
    font-size: 20px;
}

상위 선택자 참조

부모 선택자의 속성 안에서 속성을 정의해서 간단하게 표현 가능

.test{
    width: 100%;
    &.active{
        color: red;
    }
}

.list{
    li{
        &:last-child{
            color: red;
        }
    }
}

위와 아래는 같은 표현

.test{
    width: 100%;
}
.test.active{
    color: red;
}

.list li:last-child{
    color: red;
}

중첩 벗어나기(@at-root)

부모 선택자의 안에서 정의는 했지만 부모 선택자 밖에서도 사용하고 싶을 때 사용

.test{
    $w: 100px;
    @at-root box{
        width: $w;
    }
}

중첩 속성 정의

font나 margin같은 속성을 하나로 묶어서 정의할 수 있음

.test{
    font{
        weight: bold;
        size: 10px;
    }
    margin{
        top: 10px;
        bottom: 10px;
    }
    padding{
        left: 10px;
        right: 10px;
    }
}

위와 아래는 같은 표현

.test{
    font-weight: bold;
    font-size: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
}
profile
평생 개발자로 살고싶습니다

0개의 댓글