css의 단점
css는 복잡한 언어는 아니지만 작업이 커지고 코드가 많아질수록 불편함이 생기게 된다. 예를 들어 선택자의 과용과 연산 기능의 한계, 구문의 부재 등 프로젝트가 커지면 코드 중복이 많아지고 복잡해지어 유지보가 어려워지게 된다.
1. 선택자을 만들때 매번 불필요한 선택자를 적어야 한다. 2. function 같은게 없으니, 규모가 큰 프로젝트의 경우 자동화하기 어렵고 모든 것을 수동을 변경해야 한다. 3. 중복되는 코드가 많아 코드 줄수 가 길어져 유지보수에 마이너스적인 요소가 된다.
Sass란?
두가지 의미가 담겨있다. (코드를 css로 해석하는 역활을 하는 전처리기 / 문법으로서 의미 )
Sass문법을 기반으로 코드를 작성하면, sass전처리기의 도움을 받아 css파일을 만들어낼 수 있다는 것 (이 작업을 컴파일 이라고 한다.)
SCSS란?
scss는 Sass의 3버전에서 등장한 언어이다.
자바나 php 버전이 있듯이 Sass도 시간이 지나면서 버전업되며 불편한점이 개선되었고, 기존의 문법 방식이 너무 불편하고 익숙치 않아 퍼블리셔에게 익숙한 css의 비슷한 구문을 가지고 있으며, css와 완전히 호환되도록 새로운 구문을 도입한 css의 상위 호환 스타일시트이다.
SCSS 문법을 기반으로 코드를 작성하면 Sass 전처리기의 도움을 받아 컴파일러가 이를 css로 빌드할수있다.
중첩 (&)
중첩 안에서 & 키워드는 상위 선택자를 참조하는 코드이다.
중첩에서 벗어나고 싶을때 (@at-root)
중첩에서 벗어나고 싶을때 사용한다. 중첩 안에서 생성하되 중첩 밖에서 사용해야 경우에 유용하다.
변수 ($)
$변수이름 : 속성값;
$color-primary: #e96900; $url-images: "/assets/images/"; $w: 200px;
변수 유효범위는 선언된 블록 내에서만 유효범위를 가진다.
!global / !default
!global : 변수의 유효범위를 전역으로 설정할 수 있다.
!default : 초기값을 설정할 수 있다.(기존 변수가 있는 경우 현재 설정하는 변수의 값을 사용하지 않겠다는 의미도 있다.)
믹스인(mixin) 문법
재사용 가능한 기능을 만드는 방식이다.
Sass의 경우 = 로 선언하고 +로 적용한다.
SCSS의 경우 #mixin으로 선언하고 @include로 적용한다.