![]()
📌 Sass(Scss)의 nesting기능 기존 css로 작업할때 html구조가 복잡해지거나 많으면 모든 선택자를 중복해서 입력해야 하는 경우가 있는데, Sass(Scss)의 nesting(중첩)기능을 이용하면 css를 구조화시킬 수 있어 효율적으로 작성할 수 있다. 👆 nesting 문법 선택자 안에 또 다른 선택자를 넣으면 된다. 🔗 Sass 공식페이지에 보면 예시와 함께 더 자세히 나와있다. https://sass-lang.com/documentation/style-rules/ Sass: Style Rules Style rules are the foundation of Sass, just like they are for CSS. And they work the same way: you choose ..
![]()
📌 Sass(Scss)의 import 기능 원하는 scss 파일을 따로 분리해서 외부 파일로 만든 다음, 불러오기(import)를 할 수 있는 기능이다. 🛠️ 사용방법 1. 분리하고 싶은 scss파일 생성 scss폴더 안에 "새 파일"을 생성하고, 파일명 앞에 언더바(_)를 넣어서 scss파일을 만든 후 내용을 작성하면 된다. 폴더명 앞에 붙은 언더바(_)가 부분파일 형식이라는 뜻 예: reset이라는 css를 따로 분리하고 싶다. -> "_reset.scss" 라는 폴더 생성한다. 2. 불러 올 파일에 @import "불러올 파일명"; 입력 style.scss에 _reset.scss파일을 불러오고 싶으면 @import "reset"; 라고 입력하면 된다. 이 때 언더바(_)나 확장자명(.scss)를 따..
![]()
📌 Sass란? CSS의 단점을 보완하기 위해 만든 CSS 전처리기이다. 효율적으로 CSS를 관리하고 모듈화할 수 있으며 여러가지 조건문, 반복문같은 기능들을 활용할 수 있어서 편리하다. Sass vs Scss 차이점 - Sass : 중괄호 { } 없이도 입력 가능하기 때문에 오류가 나기 쉬움. - Scss : Sass를 보완하기 위해 중괄호{ }를 쓰는 것. Scss에서 중괄호{}가 없는 것이 Sass이다. 중괄호{}를 없애 용량을 줄일 수 있지만 실수로 인해 컴파일 에러가 날 수 있기 때문에 SCSS를 주로 사용한다. Scss사용은? 그냥 Sass를 설치하고 확장자를 Scss로 쓰면 된다. 📌 프로젝트 파일에 Scss만들기 1. style.scss파일을 생성 나는"study-scss"라는 프로젝트 폴..
![]()
🛠️ 설치방법 설치방법은 Buby버전, Node버전, Dart버전이 있는데 Dart버전이 가장 최신이라 이 방법을 권장한다고 한다. 1. Node.js 설치하기 Dart Sass로 설치하기 위해 Node.js가 먼저 설치되어야 한다. (node.js를 설치하는 이유 : npm이라는 패키지 관리자 툴을 사용할 수 있다고 한다...) https://nodejs.org/ko Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 링크를 누르니 알아서 내 운영체제에 맞는 버전을 보여준다. 왼쪽의 LTS는 안정적인 버전이고 오른쪽은 최신버전이다. LTS 버전을 다운받고 설치하면 된다. 📌 설치가 잘 되었는..
