SASS

sass가 css구린점을 보완하다보니까 css preprocessor를 만들 수 밖에 없고, 배경에는 노드가 있다

노드(서버언어)

자바스크립트는 하드디스크에 접근할 수 없고 브라우저 내부에서만 돌아가지만 노드는 아니다

노드는 자기 자신이 하드 디스크에 접근해서 파일을 읽어오고 파싱하고, 접어서 집어 넣을 수 있다

이유는 : 노드는 자체는 c++을 기반으로 만들어진 엔진이다.

<https://steemit.com/css/@march23hare/css>

<https://steemit.com/javascript/@march23hare/javascript>

css 여러개 쓸떄 방법

헤드태그에 링크 여러개 or css쪽에서 import

외부의 파일 오버헤드 필요(있는지 확인 및 시간필요) - 번들링으로 해결 : 이유 많은 파일들을 하나의 파일로 묶음 하나의 큰 파일로 만드는 과정 (오버헤드 줄이기)

1. 실습 환경 조성

2. ‘어떤 문법?’ - nesting

3. ‘어떻게 보완?’ - preprocessing

4. ‘어떤 문법?’ - variable

5. ‘어떤 문법?’ - partials, import

6. ‘어떤 문법?’ - mixins

7. ‘어떤 문법?’ - inheritance, extend

8. ‘어떤 문법?’ - operators

sass가 css의 preprocessor [인풋데이터를 아웃풋으로 만드는데, 이 프로그램은 이 아웃풋이 다른 프로그램의 인풋이 된다]

1.  

npm init -y

npm i -g node-sass

npm i -D node-sass

sass파일 css파일로 만드는 과정

node-sass sass-overview.scss sass-overview.css 노드 사스 명령어 쓰는듯

1.  

sass에서 변수선언

‘$’ 문자로 시작되는 식별자로 선언.

‘=’ 문자로 값 할당.

변수 이름을 사용한 위치에 변수 값이 치환되어 CSS 코드로 출력

1.  

node-sass ./scss -o /css

파일이름 앞에다가 _ (파셔스 기능) partilas

1.  

여러 룰-셋에 걸쳐 공용으로 사용될 프로퍼티들을 별도의 상속 룰-셋으로 정의.

‘@extend’ 디렉티브를 통해 상속 룰-셋을 사용.

상속 룰-셋의 셀렉터가 ‘%’로 시작되면 추상 룰-셋이 되어 그 자체로는 CSS로 출력 되지 않는다.

% <- placeholdr 역할

1. 연산자

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

부모 참조 셀렉터 & 중첩된 구조에서 의미가 존재

t>td>x,x,x 가있고 ,&가 없으면 두번쨰 x, &있으면 두번째 td

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

변수

‘$’ 문자로 시작되는 식별자로 선언.

‘:’ 문자로 값 할당.

변수 이름을 사용한 위치에 변수 값이 치환되어 CSS 코드로 출력.

룰-셋 블록 내에 선언 시 지역변수.

지역변수 뒤에 ‘!global’ 선언 시 전역변수.

변수 이름 내의 ‘-’ 와 ‘_’ 문자를 구분하지 않음. var_name var-value 구분 xx

‘!default’ 로 기본값 지정 가능.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ