SASS

CSS도 계층적으로! SASS

    ● SASS(SCSS): CSS의 확장언어

        ○ CSS보다 조금 더 높은 자유도를 개발자들에게 부여함

        ○ 자유도가 높다는건 지켜야할 문법들이 많다는 것이므로 주의해야함

        ○ 변수, 반복문, 가정문도 사용할 수 있음

    ● 브라우저가 읽을 수 있는 언어: HTML, CSS , JS

        ○ SASS를 CSS로 컴파일 할 수 있어야함

        ○ VSCode에서 live sass compiler 확장자 설치

        ○ 파일 > 기본 설정 > 설정> 설정 열기 > "liveSassCompile.settings.generateMap": false 입력해서 map파일 안생기게 하기

SASS에서 다루는 CSS-nesting구조

    ● html의 계층적인 구조에 맞게 코딩

SASS에서 다루는 CSS-기초문법

    ●한 줄 주석 // 여러 줄 주석 /**/

    ● & 연산자로 부모의 속성을 그대로 가지고 오며 새로운 속성 가능

SASS에서 다루는 변수

    ● 변수: 변하는 수(변하는 모든 것)

    ● $: 기호+ "작명" : "저장할 내용"; ($primary-color: #333;)

SASS에 내장되어 있는 색관련 함수

    ● darken :어둡게

    ● lighten: 밝게

    ● saturate: 더 선명하게(높은 채도)

    ● desaturate: 더 흐리게(낮은 채도)

    ● adjust-hue: 명도 변경

    ● rbga: alpha 값 변경

확장(extned)으로 CSS템플릿 구성하기

    ● extend: css스타일 확장

    ● @extend .클래스; 를 사용하면 공통적으로 적용되어야 하는 부분이 똑같이 적용됨

    ● %: 임시 클래스: css파일에서는 보이지 않지만 scss파일에서 보다 간편하게 확장가능

mixin을 통한 CSS 맞춤 템플릿

    ● @mixin으로 선언하고 @include로 받아줌

SASS에서 사용할 수 있는 연산자

    ● operator: 연산자

    ● +,-,*는 calc를 사용하지 않아도 계산가능

    ● /는 나누기가 아니가 아니라서 사용불가

    ● 나누기는 앞에 더하기를 사용해서 연산이라는것을 알려주기 혹은 괄호로 나눠주기

    ● scss math 이용하여 계산하

use를 통해 다른 파일 가져오기

    ● 다른 scss파일을 가져와서 쓸 수 있음

    ● scss파일 맨 앞에 _를 붙여주면 css파일이 생기지 않음

    ● as를 통해 파일이름 줄이기 가능 

SASS에서 사용할 수 있는 다른 기능

    ● 반복문: @for $변수 from 1 through 10 {} : 변수를 1부터 10까지 반복

    ● 배열: @each $color in $list {}: list 배열

    ● 조건문: @if $변수 == {} : 조건문 만들기