SCSS ch.1 SCSS (1) ~ (7)

1. 개요

SCSS를 배운다는 것은 SASS를 배우는 것과 똑같음
SCSS가 더욱 명시적이고 구분하기 쉬움

우리는 프로젝트를 더 강력한 문법을 가진 sass를 사용하여 개발
그러나, 사용자의 브라우저에서 동작할 수 있는 것은 표준의 css임
그래서, sass 무법을 css 문법으로 바꿔야 함(컴파일)

=> css 전처리도구(scss)

2. 프로젝트 생성

• scss 사용

$color: blue;

.container {
    h1{
        color: $color;
    }
}

=> 중첩기능 사용

3. 주석

원래 css에서 사용하던 주석 모양과 js 사용하는 주석 모양 모두 사용 가능

$color: blue;

.container {
    h1{
        color: $color;
        /* font-size: 20px; */
        // top: 30px;
    }
}

=> 그러나, js 주석 모양을 사용하면 컴파일 될 때 적용이 안 됨
=> 변환된 후에도 주석이 처리되어야 하면 css 주석 모양 사용

4. 중첩 with SassMeister

상위 선택자를 명시할 필요가 없음

.container {
	ul {
    	li {
        	font-size: 40px;
            .name {
                color: blue;
            }
            .age {
                color: red;
            }
        }
    }
}

5. 상위(부모) 선택자 참조

& 기호 사용

.btn {
	&.active {
    	color: red;
    }
}

.list {
	li {
    	&:last-child {
        	margin-left: 20px;
        }
    }
}

6. 중첩된 속성

선택자처럼 사용하되 뒷부분에 : 기호, 중괄호가 끝나는 부분에 ; 기호 필요

7. 변수

재활용(재할당)이 가능하고 효율적으로 관리하기 위해서 사용

변수 유효범위 주의

$size: 200px;

.container {
	top: $size;
    .item {
    	width: $size;
    }
}