본문 바로가기

scss3

[SCSS] 전역으로 SCSS 변수 파일 등록하기

안녕하세요. 야근 중입니다. 새로 들어간 프로젝트에서 마크업과 스타일 작업을 진행하고 있습니다. CSS는 CSS 전처리기인 SASS의 SCSS로 작성하고 있습니다. 많이 사용하는 색깔이나 크기 style들을 변수와 요소 스타일 설정으로 common.scss라는 파일에 모아두고 사용하고 있습니다. 매번, 여러 컴포넌트에서 계속 임포트를 해서 사용하려고 하니까, 개발하는데 너무 불편했습니다. 장기적으로 볼 때, 계속 중복되는 코드를 사용하는 것은 불편하다고 생각했습니다. // 👇 불편한 코드 @import '@/assets/scss/common.scss'; 그래서, 이 불편한 문제를 해결하기 위해서 공통으로 사용하는 스타일 값들을 전역 변수로 등록할 방법을 찾아다녔습니다. 정확하게 vue-cli 문서에서 그.. 2021. 7. 16.

[SCSS]초 간단 정리 scss 변수파일 만들고 사용하는 방법 개발자 퍼블리셔라면 필수로 알아야 하는 지식!

scss를 사용하면서, CSS로 트랜스컴파일하지 않고 scss파일들에서만 사용하는 변수를 저장하기 위한 전용파일을 만들고 사용하는 방법에 대해서 살펴보겠습니다. _variable.scss파일에 black 키워드를 가지는 변수를 만들고, 다른 scss파일에서 이 변수를 통해서 background-color를 검정색으로 적용해 보는 예시로 살펴보겠습니다. 결과는 아래 사진입니다. 그럼, 작업을 순서대로 살펴보겠습니다. 1. '_'가 들어간 scss파일은 css로 트랜스컴파일에 대상이 되지 않습니다. 예를 들어서 map_control.scss는 css로 트랜스컴파일되지 않습니다. css로 트랜스컴파일되지 않는 특성을 이용해서 어차피 scss 파일들만 사용하는 변수파일에 이름을 '_'를 넣어서 만들어 줄 수 있.. 2021. 4. 23.

SASS 사용 방법- 정말 편리하고 간편하게 css 개발 가능!

SASS도 '언어'입니다. CSS는 프로젝트의 규모가 커지고, html 요소와 그 요소들을 style해주는 css 코드는 많아 질수록 관리가 어려워지게 됩니다. sass는 큰 프로젝트일 경우에 유용합니다. SASS를 사용할 경우 이점. 계층적으로 코드를 작성할 수 있어서 코드를 보기가 편해집니다. css 속성의 변수 작성(mixin) 및 조건문 사용이 가능합니다. 성능적인 이점은 없습니다. 그보다, 필요 없습니다. SASS의 큰 특징이라면 브라우저는 표준 css만 읽을 수 있으므로, SASS에 문법에 맞는 코드를 작성하고 CSS로 트랜스컴파일링을 해야한다는 겁니다. 하는 방법은 밑에 설명에 나와 있습니다. SASS 적용 방법 1. npm 초기화 $ npm init -y 2. sass 라이브러리 설치 $ .. 2021. 4. 21.