[ CSS ] SCSS 사용하기

- 터미널 사용법은 생략하겠습니다. -

 

1. sass 설치하기

npm install sass -g

 

2. 설치 확인하기

npm show sass version

 

3. scss 파일이 있다면, 터미널 커맨드 창에서 sass [변환할 scss 파일명] [변환 될 css 파일명]을 입력

sass index.scss index.css

 

4. 3번으로 하면, 매 번 수동으로 입력을 해야하는데, 귀찮다.. 자동으로 저장되면 변환되게 해주는 건 없나?

- 이렇게 하면, index.scss 파일에서 수정하고 저장하면, 자동으로 index.css 파일이 변환된다.

sass --watch index.scss index.css

 

5. 폴더 단위로 자동으로 변환해볼까?

sass --watch [scss 파일이 있는 폴더명]:[변환 될 css를 담을 폴더명]

예 ) sass --watch scss:css

 

이렇게 하면, scss를 css로 편하게 변환시킬 수 있다.

 

scss를 사용하는 이유는,

css 같은 경우는, 부모 자식 관계를 사용하기 위해서는 밑에 코드처럼, 부모 클래스명 뒤에 자식 클래스명을 사용해야한다.

.parent{}

.parent .child{}

물론, 클래스명만 입력해도 그 클래스명을 가지고 있는 태그만을 참조할 수는 있다.

하지만, css가 복잡해지고, 가독성이 떨어질 수도 있다.

 

scss는 밑에 코드처럼 사용할 수 있다.

 

.parent{
	.child{
    	&:nth-child(1){}
    }
}

뭐 이런 형식으로 사용이 가능하기 때문에, 가독성면에선 scss가 아주 좋아보인다.

 

scss에 대해서 자세히 알고 싶다면, 검색을 활용해보자!

나도 아직은 scss나 sass에 대해서 정확히 활용을 100%는 하지 못하고 있다.

어느정도 공부가 되면, 글을 작성해서 올려보도록 하겠다.