CSS - SCSS

작업 환경 구성

(VS code)

1. Npm init -y
2. Npm i-D parcel-bundler
3. Package.json -> script 수정 ("dev" : "parcel index.html", "build": "parcel build index.html")
4.  SCSS 연결 npm i -d sass

---

SCSS문법을, CSS로 변환하여 보여줌 

SASS: ^1.36.0 -> 연결 성공

SCSS => CSS 변환 확인 사이트

https://www.sassmeister.com/

SassMeister | The Sass Playground!

자식 요소: >

상위 선택자 참조: &

변 수

나누기(몫) 연산시 표시 방법 및 단위가 다른 두 값의 계산방법

SCSS에서 나누기(몫)을 할 때,

1. 괄호 사용 ex) margin: (30px / 2) / margin: (10px + 12px) / 2;
2. 변수 사용 ex) margin: $size / 2;

단위가 다른 두 값을 계산하는 방법

    calc() 함수 이용  ex) width: calc(100% - 200px);

 

재활용(mixin)

 

@mixin 변수명 => 사용할 때에는 @include 변수명

 

반복문

함수

색상 관련 함수

가져오기

데이터 타입 종류

@content -> @include left top {bottom: 0; right:0; margin: auto;} 가 들어감