지난 글에서 SCSS의 기본적인 문법과 확장, 믹스인, 함수를 작성하는 방법에 대해 정리해 보았다. 이번에는 SASS가 제공하는 기본 함수들을 정리했다. SASS의 기본 함수들은 크게 다음과 같이 나뉜다.
SCSS는 기존 CSS 문법에 SASS문법을 섞은 것이며, SASS 컴파일러로 그대로 컴파일 될 수 있다. 이 글에서는 SCSS 문법을 기준으로 SASS의 각 기능을 사용하는 방법에 대해 설명하도록 하겠다. 기본문법 – 셀렉터 지정 및 속성 작성 SCSS의 기본문법은 기본적으로 CSS 기본 문법을 그대로 적용하고, 여기에 SASS 식의 치환가능한 요소들을 추가할 수 있다. 기본룰은 다음과 같다. 기본틀은 CSS 문법과 동일하다. 셀렉터를 쓰고 { .. } 블럭안에 속성:속성값; 의 형태로 속성들을 정의할 수 있다. nested block을 적용할 수 있다. //을 이용해서 라인단위로 주석처리를 할… 더 보기 »SCSS/SASS 문법 정리
모든 문법 작성은 SCSS 기준으로 작성한다.
중괄호 속에 하위 요소에 대한 스타일을 지정하는 형태로 네스팅한다.
#main p {
color: #00ff00;
width: 79%;
.redbox {
background-color: #ff0000;
color: #000000;
}
}
// complied:
#main p {
color: #00ff00;
width: 79%;
}
#main p .redbox {
background-color: #ff0000;
color: #000000;
}
블럭 내에서 &를 사용하면, 블럭의 주인 즉 현재 스코프의 부모 요소를 참조하게 된다.
#main {
color: black;
a {
font-weight: bold;
&:hover { // >> a:hover
color: red;
}
}
}