[Sass/SCSS] Sass/SCSS 파일 구조와 중첩(Nesting)
Scss를 작성하고자 할 때, 기본적인 파일 구조는 어떻게 되며, 사용 방법은 어떻게 되는지 알아보자. 💻 파일 구조 - index.html - style - style.css 메인으로 띄울 html 파일과 style 폴더를 만들어 그 안에 CSS 파일들을 생성할 것이다. 다만 이때 .css 대신 .scss 파일을 생성한다. SCSS는 처음에도 언급했듯이 브라우저가 컴파일 할 수 없다. 따라서 우리는 SCSS을 활용하여 파일을 작성하고 SCSS 컴파일러가 파일을 읽고 속성에 맞는 CSS로 매핑시켜 자동으로 CSS 파일을 생성해준다. 웹에는 그 후에 올라가게 되는 것이다. 즉 우리는 편하게 SCSS로 작성하기만 하면 컴퓨터가 자동으로 CSS 파일을 생성해준다는 것!! 🎯 중첩(Nesting) 💡 /**/ ..
[Sass/SCSS] Sass/SCSS란 무엇이고, 왜 사용하는가?
프론트엔드 직무를 희망한다면, CSS를 직접 다뤄 봤다면, CSS가 불편하다고 느낀 적이 있을 것이다. 요소 하나하나에 스타일링 코드들을 덧붙이다 보면 비어있던 파일은 어느새 눈덩이처럼 금방 불려져 감당할 수 없을 정도로 커져있던 적, 다들 있을 것이다. 이를 위한 구원자가 바로 Sass/SCSS이다. Sass/SCSS는 CSS에서 제공하지 않는 편리한 기능들을 제공해준다!! 이제 다시 정리해보자. 🎯 Sass/SCSS란? CSS로 컴파일되는 스타일 시트 확장 언어이며 CSS 전처리기 중 하나이다. 브라우저는 Sass/SCSS 파일을 컴파일하지 못하기 때문에 개발은 Sass/SCSS를 기반으로 작성하되, CSS로 import하여 활용한다. Sass 작성방식 Sass 방식과 SCSS 방식이 있는데, 이 두..
