[CSS] CSS, SCSS, SASS 차이점

CSS, SCSS, SASS 란?

CSS : Cascading Style Sheets - 종속형 시트
SCSS : Sassy Cascading Style Sheets - 문법적으로 짱 멋진(Sassy) CSS
SASS : Syntactically Awesome Style Sheets - 문법적으로 어썸한 스타일시트

---

SCSS(SASS) 필요성

CSS 단점

1. 선택자(Selector)을 만들때 매번 불필요한 부모요소 선택자를 적어야 한다.
2. 규모가 큰 프로제트의 경우 자동화하기 어렵고 모든 것을 수정으로 변경해야 한다.

/* .CSS */
.contents {
	padding : 10px;
}
.contents .boxArea{
    border:1px solid #ddd;
    color:#ccc;
}
.contents .boxArea .box {
    margin:4px;
    background:#f7f7f7;
}

 

SCSS 장점

1. 선택자의 중첩(Nesting)을 통해 반복되는 부모요소 선택자 사용을 줄일 수 있다.
2. 변수(Variable)을 사용해서 CSS 속성값을 통일해서 관리할 수 있다.
3. 프로그래밍 언어에서 사용하는 조건문, 반복문을 통해서 동적으로 CSS 관리가 가능하다.
4. Import, Mixin, Extend/Inheritance와 같은 기능을 사용할 수 있다.

/* .SCSS */
.contents {
	padding : 10px;
    .boxArea{
    	border:1px solid #ddd;
        color:#ccc;
      	.box {
        	margin:4px;
            background:#f7f7f7;
        }
    } 
}

반복되는 부모 요소를 한번만 쓰기 때문에 유지보수에 용이한 부분이 있고 구조를 파악하기가 쉽다.

---

SCSS, SASS의 차이점 및 문법

파일 확장자
SCSS는 .scss
SASS는 .sass

 

{ } (중괄호)  ; (세미콜론)

• SCSS는 중괄호{}와 세미콜론;을 사용한다.
• SASS는 중괄호와 세미콜론을 사용하지 않는다.

Mixins

• SCSS는 @mixin과 @include를 사용한다.
• SASS는 = 와 + 기호를 사용한다.

---

SCSS 문법

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { 
    display: inline-block; 
  }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

 

SASS 문법

nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px
    text-decoration: none

---

SCSS, SASS가 적용되는 원리

SCSS, SASS를 CSS pre-processor(전처리기)라고도 하는데 스크립팅 언어이기 때문에 
SCSS, SASS로 작성된 파일들은 곧바로 웹에 적용될 수는 없습니다. 
웹은 기본적으로 CSS파일로 동작하므로 별도의 컴파일 과정을 거친 다음 CSS파일로 변환하여 사용하게 됩니다.