프론트엔드 정복하기

SCSS V2가 릴리즈되면서 사용법이 매우 편리해졌다. (이전에는 sass-loader를 추가하는 등 복잡했음) 1) node-sass를 설치해주고, npm i node-sass 2) .scss 확장자를 가진 파일을 만들어 주고 AnyName.scss 3) AnyName.js파일에 AnyName.scss 파일을 import 해준다. import './AnyName.scss'

SCSS 중첩(Nesting) (LESS의 내포 규칙과 많이 비슷하다.) 중괄호 안에 해당 요소의 자식 요소들의 스타일을 작성하면 된다. LESS 기법에서 접두어만 @에서 $로 바꾸면 된다. 기존 CSS SCSS div { width: 500px; color : #000000; } div h3{ width: 500px; color : #f96d9c; } div h3 a { color : #000000; } div h1{ width : 300px; color : #ff0000; } $color-black : #000000; $color-pink : #f96d9c; $color-red : #ff0000; $width-default : 500px; div { width : $width-default; colo..

LESS 내포 규칙(Nested Rules) 중복되는 부모 태그, 클래스를 생략해주는 기법 => CSS 전체 구조도를 파악하는 데도 도움이 된다. 기존 CSS LESS div { width: 500px; color : #000000; } div h3{ width: 500px; color : #f96d9c; } div h3 a { color : #000000; } div h1{ width : 300px; color : #ff0000; } @color-black : #000000; @color-pink : #f96d9c; @color-red : #ff0000; @width-default : 500px; div { width : @width-default; color : @color-black; h3 { wi..

SASS, SCSS, LESS 비교 SASS, SCSS VS LESS SASS, SCSS LESS 구축환경 Ruby 환경 JS 문법을 취하고 Node.js 기반 접두어 달러 $ @ 변수 예시 $test @test 대입 예시 $test : 10px @test : 10px SASS VS SCSS *Sass는 css를 확장한 메타언어이고, 이는 SASS, SCSS라는 2가지 기법을 가지고 있다. SASS기법이 먼저 나오고 SCSS기법이 연이어 나왔는데, SCSS기법을 더 많이 쓰는 추세라고 한다. SASS SCSS like 툴 ruby like (Ruby를 설치해야 SASS를 사용할 수 있다.) css like 괄호, 세미콜론 사용 중괄호, 세미콜론 사용 x => 대신 indent를 활용 CSS와 거의 비슷 ..