목록CSS/SCSS (4)

어쩌다 알게 된 ƪ(•̃͡•̃͡ ƪ

Sass에서 반복문(@for)과 변수로 클래스/스타일 중복 제거하기

🔖 기본 sass 방법=> 중복으로 써야해서 코드가 길어짐button{ .&btn_time0{background-image:url(../../assets/img/btn_time0.png);} .&btn_time1{background-image:url(../../assets/img/btn_time1.png);} .&btn_time2{background-image:url(../../assets/img/btn_time2.png);} .&btn_time3{background-image:url(../../assets/img/btn_time3.png);}} 🔖 중복을 줄이기 위해 반복문(@for) 사용@for $i from 0 through 3{ &.btn_time#{$i}{ ..
CSS/SCSS 2025. 11. 26. 11:02
[SCSS] @import 'ConfigFile';는 _ConfigFile.scss 가 불러와진다?

내가 보는 소스의 파일명은  _ConfigFile.scss인데 @imort 'ConfigFile'을 불러오고 있다? 파일명이 다른데 어떻게 불러오는가..? 📚 결론 📚 => Sass에서는 _ConfigFile.scss처럼 밑줄(_)이 붙은 파일을 자동으로 찾아서 가져오도록 설계되어 있기 때문에, @import 'ConfigFile';을 작성하면 _ConfigFile.scss를 자동으로 불러오게 된다. Sass의 Partial 파일 규칙✔ _ConfigFile.scss와 같이 밑줄(_)이 붙은 파일은 Sass에서 직접 컴파일되지 않고, 다른 SCSS 파일에서 불러올 때만 사용✔ @import "ConfigFile";을 사용하면 Sass는 _ConfigFile.scss를 자동으로 찾아서 가져옴 파일명을 ..
CSS/SCSS 2025. 3. 29. 11:43
[SCSS] @use 'sass:map';

???끝없이 모르는게 나온댜...............혼미해  @use 'sass:map';- Sass(SCSS)에서 제공하는 내장 모듈을 불러오는 코드- 맵(map) 관련 유틸리티 함수를 활용 가능- 예전에는 바로 map.get()으로 사용할 수 있었지만, 최근부터는 @use 'sass:map'; 선언 후 사용 가능  📌 1. Sass의 map이란?- JavaScript 객체(Object)와 비슷한 데이터 구조- Key-Value 형태로 데이터를 저장하고, 특정 값을 쉽게 사용 가능 ✔ Sass map 예제 ( map.get($map, $key) )@use 'sass:map';$colors: ( primary: #007bff, border: #ccc,);body { background-color..
CSS/SCSS 2025. 3. 28. 20:30
[SCSS] SCSS란?

📌 SCSS란? - CSS를 더 편리하게 사용하기 위한 확장 문법- 변수, 중첩, 연산, 함수, 코드 재사용 같은 강력한 기능 제공- CSS로 변환(컴파일)된 후 브라우저에서 사용됨- React나 Vue 같은 프레임워크에서 자주 사용- SCSS가 기존 CSS와 호환성이 좋아서 대부분 SCSS 사용 * Sass(Syntactically Awesome Stylesheets)의 한 문법이며, CSS를 더 편리하게 작성할 수 있도록 도와주는 스타일 전처리기(Preprocessor)이다.SCSS(Sassy CSS)는 CSS와 문법이 거의 같으면서도 추가 기능이 많은 스타일 문법 * Sass- 들여쓰기 기반, {}와 ; 필요 없음 (옛날 문법)- 요즘엔 거의 SCSS로 사용  ✔ SCSS 예제// 변수 사용$pr..
CSS/SCSS 2025. 3. 28. 19:57
Prev 1 Next