SCSS2 scss 문법 1. 선택자 중첩시의 모습 기존 css 문법 #a { color: red; } #a #b { color: blue; } #a #b #c { color: green; } scss 문법 #a { color:red; #b { color:blue; #c { color:green; } } } 선택자를 여러번 쓸 필요 없이 블록안에 넣어버린다. 2. 변수사용 $red-color:red; #red { color:$red-color; } 자주쓰는 값을 변수에 담아 관리할 수 있다. 3. 상속받기 .main_font{ font-size:10px; color:red; } div { @extend .main_font; width: 10px; } main_font라는 css 속성을 만들고 div에 @extend를 통해 상속받.. 2022. 1. 24. sass(scss) 세팅 평범하게 사용할 수 없었던 아래의 css 문법들을 평범한 css로 바꿔주는 전처리기가 sass입니다. .a { margin:0px; .b { padding:0px; } } $main-font: 18px; nav : $main-font; https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 노드를 설치후, 터미널에서 npm install sass -g 를 입력해 sass를 설치한다. 설치 끝 ※참고 vscode에선 live sass compiler라고 저장시 즉각적으로 컴파일해 화면에서 확인할 수 있습니다. 2022. 1. 14. 이전 1 다음
