반응형 Web/SASS(SCSS)5 SASS(SCSS) 재활용 하기 @mixins, @include sass에서 mixin은 스타일시트 전체에 걸쳐 스타일 블록을 정의하고 재사용하게 해 줍니다. 즉 반복되는 규칙을 따로 만들어서 사용하는 것입니다. 똑같은 규칙을 반복하여 작성하는 것보다는 mixin을 사용하여 한번만 스타일 그룹을 정의하고, 필요할 때 참조하여 사용합니다. scss파일 위쪽 부분에 @mixin지시자를 이용하여 mixin을 정의합니다. 정의된 스타일을 넣고자 하는 곳에 @include지시자를 이용하며 믹스인을 참조할 수 있습니다. @mixin을 사용하여 선언 : @mixin 이름 (arguments) { ... } @include를 이용하여 사용 : @include 이름 (arguments) /* scss */ @mixin title-style { // mixin 정의 margin: 30.. 2023. 1. 13. SASS(SCSS) @extend를 이용한 공통 스타일 적용하기 sass는 타 선택자의 css를 그대로 상속하여 공유가 가능합니다. 공통으로 사용하는 속성을 모아 일부분만 동일하게 가져가고 부분적으로 다른 스타일을 정의하는 경우가 있습니다. 이럴 경우 보통 공통 속성이 사용되는 클래스를 만들고, 다른 속성이 사용되는 클래스 하나를 더 만들어 css 스타일을 입히는 방법을 사용합니다. 하지만 scss에서는 @extend를 사용하면 편리합니다. 예를 들어 여러 가지 버튼을 만들 때 사용하면 쉽게 작업할 수 있습니다. /* scss */ .btn { // 기본 그레이 버튼 display: inline-block; padding: 10px 20px; color: #fff; background-color: silver; } .btn-green { // 그린 버튼 @extend.. 2023. 1. 9. SASS, SCSS 변수(variables) - scope, !global, !default sass에서 변수를 사용할 수 있는데 $ 표시를 앞에 붙이면 변수를 선언할 수 있습니다. 반복적으로 사용되는 값을 변수로 지정하여 사용하면 반복을 줄이고, 복잡한 계산도 가능하며 라이브러리 구성 등의 작업이 가능합니다. 즉 유지보수를 쉽게 만들어줍니다. 값이 여러번 반복되면 미리 변수로 만듭니다. 값을 기억하지 않고 변수명만을 가지고 스타일 가능합니다. 예를 들면 #272d4f 라는 컬러값은 기억하지 어렵지만 $blue : #272d4f 라고 선언하면 $blue만 기억하면 되므로 사용하기 쉽습니다. sass에서의 변수는 $ 를 사용하고 css규칙과 똑같이 정의하면 됩니다. 반복되는 값을 미리 변수로 정의하면 스타일링하기에 편합니다. /* use */ $변수이름 : 속성값; /* scss */ $base-.. 2023. 1. 3. SASS(SCSS) Nesting 기능과 사용법 Nesting은 중첩이라는 뜻입니다. SASS에서 부모선택자를 기준으로 자식 선택자를 사용하여 하나의 스타일 규칙을 다른 규칙 안에 중첩하는 기능을 말합니다. 즉 Nesting을 사용하면 부모 선택자의 반복을 피하고 자식(=후손) 셀렉터를 간단하게 작성할수 있습니다. Nesting을 사용하는 이유는 다음과 같습니다. css셀렉터는 많이 사용하다보면 소스가 복잡해지는데,그러다 보면 어떤 요소를 꾸미는지 제대로 파악하기 어렵게 됩니다. 예시) div.container h1.headTitle > span > a:hover 이때 중첩을 이용하면 가독성과 유지관리가 쉬워집니다. nesting 문법 다음 코드는 css로 작성했을 때와 scss로 작성했을 때입니다. scss는 셀렉터 대신에 nesting을 이용하여.. 2022. 12. 29. 이전 1 2 다음 반응형
