콛 다이어리

사용하는 방법프로젝트 디렉터리에 'node-sass' 설치 scss는 자체로는 웹에서 작동하지 않음(css의 전처리기라서)node-sass패키지로 css로 컴파일 후 css가 웹에서 동작변수, 연산자, 함수, extend, import등을 사용할 수 있어(css에서)코드의 재사용성 및 가독성이 높아지고, 유지보수가 용이 명령어:npm인 경우npm install -g node-sass yarn인 경우$ yarn add node-sass

@mixin해당 스타일 시트 내부에서 얼마든지 재사용이 가능내부에서 '&'나 또 다른 셀렉터를 포함할 수 있음 @include@mixin을 사용하기 위해 선언하는 구문셀렉터 지정 후, 내부에 @include로 @mixin을 불러오면 됨@include뒤 '( )'는 생략 가능 @mixins재사용이 가능한 스타일을 정의하는데 사용@mixin과 @include를 합쳐서 부름재사용이 가능한 스타일을 정의하는데 사용 /* html */ /* scss */@mixin test {             color: red;             margin: 0; } div {          @ include test;} 믹스인 응용하기  (IE 지원 X)line-clamp: 몇 줄 뒤에 컨텐츠를 자를지box-or..

SCSS = SASS = "사스"css 의 전처리기css로 변경 후 실행브라우저는 scss를 알 수 없음인간만을 위한 css속성(margin, padding.. ) 값을 js 변수처럼 활용   네스팅(nesting): 안에 넣고 또 넣고 ~ ... 코알라(사스 생성 프로그램) 설치방법Koala 검색 후 다운로드→ 설정 클릭→ Autoprefix 체크→ Output Style은 Compact → Okay 코알라 사용하는 방법설정 → Default Options의 Auto Prefix 체크 → Output Style에서 Compact 선택 →  VSC에서 scss파일 생성 (확장자를 .scss로 하면 됨) → 코알라 실행 후, 막 생성한 파일을 불러옴 → 우측 초록색 compile 버튼 클릭 코알라 주의사..