jonbeo 님의 블로그

SCSS는 CSS를 더 모듈화하고 재사용 가능하게 만들어주는 CSS 전처리기입니다.그중 @mixin은 반복되는 스타일을 묶어서 재사용할 수 있도록 해주는 기능입니다.즉, 자주 사용하는 CSS를 일일이 복붙하지 않고 한 번에 불러와 사용할 수 있습니다! 🔁🧪 1. 기본 문법@mixin 이름 { 스타일속성: 값;} 사용할 때는 @include 키워드를 사용합니다:@include 이름; 💡 2. 간단 예제📌 예제: 공통 버튼 스타일 만들기@mixin button-style { padding: 10px 20px; border-radius: 8px; font-weight: bold; cursor: pointer;} 사용 예:.btn-primary { @include button-style; b..

안녕하세요 😊이번 글에서는 실무에서 가장 많이 쓰는 SCSS 핵심 문법 6가지를 한 번에 정리해보겠습니다.예제 위주로 설명드리니, 그대로 복붙해서 사용하셔도 됩니다!1) 변수(Variables) – 테마/반복 값 관리에 필수$primary: #1abc9c;$radius: 12px;.button { background: $primary; border-radius: $radius;}색상, 간격, 라운드 값 등 재사용 값을 한 곳에서 관리할 수 있어 유지보수가 쉬워집니다.2) 중첩(Nesting) – 구조가 보이는 SCSS.card { padding: 16px; .title { font-weight: 700; } .desc { color: #666; } &:hover { box-shadow: 0..