본문 바로가기
반응형

Style Sheets/Sass(SCSS)12

[SCSS] 변수(Variables)와 데이터 타입(Data Types) (ft. 주석) 주석 (Comment) CSS에서의 주석은 /* ... */ 로 해야 하는 반면에, Sass(SCSS)에서는 JavaScript처럼 두 가지 스타일의 주석을 사용한다. // 컴파일되지 않는 주석 /* 컴파일되는 주석 */ 여기서 또 Sass 와 SCSS에 다른 특징이 나오는데, 아무래도 SCSS가 CSS와 호환이 쉽게 나왔기 때문에 비슷한 측면이 있다. // Sass /* 컴파일되는 * 여러 줄 * 주석 */ // SCSS /* 컴파일되는 여러 줄 주석 */ Sass의 경우 여러 줄 주석을 사용할 때 각 줄 앞에 *을 붙여야 하고 더 나아가 라인까지 맞춰줘야 하는 반면에, SCSS의 경우에는 CSS처럼 사용하면 된다. 데이터 타입 (Data Types) 데이터 설명 예시 Numbers 숫자를 의미하며 단.. 2022. 6. 14.
[SCSS] SCSS 사용할 때 유용한 확장 프로그램 (ft. VSCode) VSCode 카테고리에 유용한 확장 프로그램 추천 게시글이 있으나 SCSS만 따로 정리하고자 새로 작성한다. (마지막 수정 일자 : 2022.06.13) 1. SCSS IntelliSense https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-scss SCSS IntelliSense - Visual Studio Marketplace Extension for Visual Studio Code - Advanced autocompletion and refactoring support for SCSS marketplace.visualstudio.com 꼭 필요하다 생각하는 확장 프로그램인데, 바로 "자동완성"을 도와주는 역할을 한다. 여기서 말하.. 2022. 6. 13.
[SCSS] 7-1 Architecture (7-1 패턴 / 폴더 구조) sass 프로젝트를 구성하는 인기가 많고 효과적인 모듈식 방법 중 하나가 7-1 패턴이다. 실제로 sass 가이드라인에서도 이 7-1 패턴을 다루고 있다. 7-1이 의미하는 게 뭐냐면 7개의 폴더와 하나의 파일을 의미한다. 즉, 7개의 폴더에 속한 파일들을 단 하나의 파일을 통해서 사용한다고 생각하면 된다. 그래도 역시 무슨 말인지 모르겠으니, 7-1 패턴의 구조를 알아보자. Project Structured in 7-1 Architecture pattern sass/ | |– abstracts/ | |– _variables.scss # Sass Variables | |– _mixins.scss # Sass Mixins | |– vendors/ | |– _bootstrap.scss # Bootstrap .. 2022. 6. 13.
반응형
TOP