SCSS(SASS)를 사용하는 이유
- 선택자를 만드는 관점에서 볼 때 불필요한 부모 요소 선택자를 매번 적어야하는 점. 규모가 커지는 프로젝트의 경우에도 일원화된 자동화가 어렵고 수동으로 모든것들을 수정변경해야함
SCSS(SASS)를 사용하면
- 선택자의 중첩(Nesting)을 통해 반복되는 부모 요소 사용을 현저하게 줄일 수 있다.
- 변수를 사용해서 CSS 속성과 값을 일원화된 관리가 가능하다.
- 프로그래밍 언어에서 사용하는 조건문과 반복문을 사용해서 동적인 CSS관리가 가능하다.
- SCSS(SASS)는 CSS로 컴파일 거쳐야하는 번거로움이 있다.
SCSS와 SASS의 차이점
- SASS가 먼저 생겼고 나중에 SCSS가 생김. 그리고 SASS와 SCSS는 서로 완벽하게 호환된다.
- 중괄호와 세미콜론의 유무에 따른 사용방식이 아주 조금 다르다.
- SASS는 중괄호와 세미콜론을 사용하지 않고, SCSS는 중괄호와 세미콜론을 사용합니다. 그래서 SCSS가 CSS와 같은 방식이라 사용하고 이해하기 더 쉽다.
- 파일확장자는 .sass, .scss이다.
- 재사용 기능을 만드는 방식은 믹스인(Mixins)에서 거의 유일한 차이가 난다.
컴파일(Compile)과 CSS 전처리기(Preprocessor)란?
- .sass파일과 .scss.파일은 브라우저가 인식하지 못한다. 브라우저가 인식하는 파일은 .css이다.
- 그래서 .sass파일과 .scss.파일을 .css변환 곧, 컴파일 해야한다.
- 최종적으로 .css파일을 만들어서 html파일에 링크해서 사용해야 html을 꾸밀수 있다.
- CSS 전처리기 : CSS파일을 만들기 전에 미리 처리한다는 의미이다.
visual studio code에서 Live Sass Compiler 세팅
설치 후, settings.json에 붙여넣기
"liveSassCompile.settings.formats":[
// This is Default.
{
"format": "expanded",
"extensionName": ".css",
"savePath": null
}
]
- Watch Sass눌르면 css파일 자동 생성 (자동 컴파일)
예시로 하나 만들어보기!
<body>
<h1>Live Sass Compiler <span>Setting</span></h1>
</body>body {
font-size: 18px;
color: #000;
line-height: 1.6em;
}
h1 {
font-size: 60px;
font-weight: normal;
text-transform: uppercase;
text-align: center;
span {
color: crimson;
&:hover {
color: royalblue;
}
}
}- 중첩을 이용해서 구현 가능
- & : 자기 자신을 의미함 (span에 hover했을 때)
jo_garden