Sass(SCSS) CSS Preprocessor

SCSS 와 Sass의 차이점

중괄호가 있고 없고 세미클론 등 세세한 문법적 차이
SCSS 쓰는 것을 추천

SassMeister

Sass의 결과를 CSS로 변환해주는 웹사이트

SCSS 문법

중첩

중첩을 벗어나기 위해서는 @at-root
상위 선택자 === &
중첩된 속성

flex : {
grow : 1;
shrink : 0;
basis : auto;
}

변수

$h : 200px !global; 전역변수로 사용$h : 300px !default 값이 없을 경우에만 300px 적용
${} => "#{}" 템플릿 리터럴 사용 가능

데이터타입

• Numbers(px,fr 등 단위 포함된 숫자도 숫자형)
• Strings(따음표와 따음표가 안붙은 문자 모두 포함)
• Colors
• Booleans
• Null
• Lists : ()소괄호 사용하여 배열처리 , 쉼표, 띄어쓰기로 나열되 있으면 가능
• Maps : (key : value); 소괄호 사용 생략 불가능

산술 연산자

/ 결과값은 ()묶기,변수사용,다른연산자와 함꼐 사용 해야 연산이 적용됨
연산 단위가 다르다면 calc()함수로 연산해야함

비교 연산자

=== 밀고 ==만 사용가능

논리 연산자

and , or, not

느낀점

SCSS가 나오게 된 이유는 아마 중복을 최대한 제거하기위해서 나온것이라는 생각이 든다. 자바스크립트의 문법과 매우 유사해서 이해하는데 큰 어려움은 없었지만 부분적으로 자바스크립트와 다른 부분이 있어서 살짝 헷갈렸다.