👩💻/CSS, SCSS (19) 썸네일형 리스트형 SCSS 활용 팁 11. SCSS 반복문 활용으로 대규모 디자인 시스템 관리하기 작업 프로세스의 효율을 높이고 일관성있는 서비스를 제공하기 위해 디자인 시스템의 중요성이 점점 강조되고 있습니다. SCSS 반복문 (@for, @each, @while)을 활용하면 색상, 폰트 사이즈, 간격 등 다양한 스타일요소를 체계적으로 정의하고, 반복문으로 쉽게 생성할 수 있기 때문에 대규모 디자인 시스템을 효율적으로 관리할 수 있습니다. @for@for는 숫자를 기반으로 반복 실행되며, 시작값부터 끝값까지 증가 혹은 감소합니다./* SCSS */@for $i from 1 through 5 { // 1부터 5까지 반복 .margin-#{$i} { margin: #{$i}rem; }}/* CSS 출력결과 */.margin-1 { margin: 1rem;}.margin-2 { margin:.. SCSS 활용 팁 10. SCSS변수를 CSS변수와 연동하여 한번에 관리하기 SCSS의 변수는 강력하지만, 런타임 동작이나 동적 스타일링과 관련된 한계가 존재합니다. SCSS 변수와 CSS의 변수를 연동하면, SCSS에서 선언한 변수값을 CSS에도 할당하기때문에 SCSS 변수의 기능은 활용하고, CSS 변수로서 런타임 동작으로 확장시킬 수 있습니다.SCSS변수의 한계 SCSS변수는 막강한 기능을 가지고 있지만, 컴파일시에만 작동하며 일단 CSS로 컴파일되고 난 후에는 변수값을 동적으로 변경할 수 없는 한계를 가지고 있습니다. 이는 사용자 입력, 시스템 설정, 환경 변화에 따른 스타일을 동적으로 변경해야 하는 경우 불리합니다. 또한, 변수의 값이 컴파일 된 CSS코드에 직접적으로 출력되는 방식이므로, 여러번 반복하여 사용할 경우 CSS파일의 크기를 증가시킵니다.결론적으로 SCSS변.. SCSS 활용 팁 9. @import VS @use 차이점 알고 쓰기 SCSS에서 @import와 @use는 모두 다른 스타일시트를 가져오는데 사용되지만 용도와 동작 방식이 다릅니다. 요즘은 @use를 더 권장한다고 하는데요. @import와 @use의 차이점이 뭔지, @use를 권장하는 이유는 무엇인지 알아보겠습니다. @import 기존의 SCSS부터 스타일시트를 가져올 때 사용하던 방식입니다. @import로 스타일 시트를 가져오면 모든 변수, 믹스인, 함수를 전역으로 추가합니다. 또 같은 파일을 여러번 불러올 수 있어 성능 문제나 충돌을 일으킬 수 있습니다. @use@use는 모듈 시스템을 기반으로 스타일 시트를 가져오며 자체적인 로컬 스코프를 가집니다. 또 독자적인 네임스페이스를 사용하기 때문에 충돌을 방지할 수 있습니다. @import와는 달리 같은 파일을 여러번.. SCSS 활용 팁 8. 보간 기능을 사용하여 동적으로 경로 관리하기 SCSS의 변수 보간 기능을 사용하면 반복적인 경로를 동적으로 관리하여 유지보수성이 향상됩니다. 폴더의 위치가 변경되어도 변수의 값만 수정하면 전체 스타일 파일을 업데이트 할 수 있어 편리합니다. 보간 이란?변수 보간(Variable Interpolation)은 SCSS에서 문자열이나 값을 동적으로 조합하기 위해 사용하는 기능으로, SCSS에서 변수를 문자열 내부에 직접 포함하고 싶을때 사용하는 문법입니다.변수 보간의 기본 형태는 이렇습니다.#{$variable}// #은 보간의 시작을 의미// {} 안에 변수나 표현식 등을 포함// $variable은 SCSS의 변수 기본 변수와 보간 활용기본적인 변수 보간의 형태를 경로 관리에 활용한 예시입니다. 이렇게만 바꾸어도 여러개의 경로를 효과적으로 관리할 수.. SCSS 활용 팁 7. 스타일시트를 효율적으로 모듈화 하기 위한 7-1패턴 SCSS를 모듈화하면 규모가 큰 프로젝트에서도 관리의 효율성과 유지보수성을 확보할 수 있습니다. 7-1패턴SCSS 파일과 폴더를 체계적으로 관리하기 위한 패턴으로, 7개의 폴더와 하나의 파일로 구성됩니다. 확장 가능성과 재사용성을 극대화하기 위하여 만들어졌으며, 대규모 프로젝트에서 유용합니다. 다음과 같은 구조로 사용됩니다.src/ └── styles/ ├── abstracts/ │ ├── _variables.scss │ ├── _mixins.scss │ ├── _functions.scss ├── base/ │ ├── _reset.scss │ ├── _typography.scss ├── comp.. SCSS 활용 팁 6. 참조 선택자 "&"을 활용하여 BEM 방법론에 따라 클래스 네이밍하기 참조선택자(Parent Selector) & SCSS에서 &는 현재 선택자를 참조하는 기능입니다. /* SCSS */.button { color: white; &:hover { background-color: blue; // .button:hover } &--primary { background-color: green; // .button--primary }}/* CSS */.button { color: white;}.button:hover { background-color: blue;}.button--primary { background-color: green;}예시와 같이 중첩된 상태에서 현재 선택자를 대신해서 사용되며, 코드를 깔끔하게 재사용 할 수 있도록 도와줍니다. BE.. SCSS 활용 팁 5. 믹스인(mixin)으로 반응형 중단점 쉽게 관리하기 웹페이지를 반응형으로 디자인하는 이유는 사용자의 화면 크기와 방향, 해상도 등에 따라 디자인을 조정하여 최적의 사용자 경험을 제공하기 위해서일 것입니다. 이 때, 각 화면 크기에 맞는 적절한 레이아웃과 스타일을 제공하기 위해 스타일이 변화되는 기준점인 중단점(Breakpoint)을 지정하고 미디어쿼리를 사용하여 작업하게 되는데요. SCSS의 @mixin을 사용하면, 이 작업을 쉽고 편리하게 할 수 있습니다. 중단점 설정하기먼저, 중단점을 변수로 정의합니다. $breakpoints라는 맵을 생성하여 정의하였습니다. // 중단점 변수 설정$breakpoints: ( xs: 480px, sm: 768px, md: 1024px, lg: 1200px, xl: 1440px);이제 이를 사용하여 미디어쿼리를.. SCSS 활용 팁 4. @extend를 이용한 스타일 상속 중복된 스타일을 여러번 반복해서 써야하는 경우 유용하게 사용할 수 있는 @extend에 대해 알아보겠습니다.@extend@extend는 SCSS에서 스타일 코드의 재사용성을 높이기 위해 제공되는 기능 중 하나로, 스타일을 복사해서 사용하는 @mixin과 달리 선택자가 다른 선택자의 스타일을 상속받는 방식으로 동작합니다. /* SCSS */.button { padding: 10px 20px; font-size: 16px; background-color: blue; color: white;}.primary-button { @extend .button; background-color: darkblue;}/* css */.button, .primary-button { padding: 10px 20p.. 이전 1 2 3 다음
