반응형 싸스2 [SASS - SCSS] 1-4. 확장 - 상속 내용 정리 5. 확장 / 상속 SASS에서는 확장과 상속을 통해 편리하고 비슷한 코드를 통합해 줄 수 있습니다. CSS의 속성은 위에서 아래로 적용됩니다. 동일한 속성값을 여러 번 변경하더라도, 결과값은 가장 마지막에 있는 값으로 적용됩니다. 동일한 선택자의 속성값을 여러 번 변경하더라도 top-down 방식에 의해 가장 마지막에 있는 값의 영향을 받습니다. 그러므로 최종적으로 margin: 15px로 변경되는 것입니다. 확장과 상속을 이해하기 위해서는 SASS에 @extend 코드를 이용하면 됩니다. .message 선택자를 이용하여 작은 박스를 만들 수 있는 CSS 코드를 작성하고, 3개의 동일한 작은 박스 success, error, popup을 추가하였습니다. 바로 확장코드인 @extend .message .. SCSS-SASS 2021. 2. 18. [SASS - SCSS] 1-2. 변수와 중첩 내용 정리 1. 변수 SASS에서도 반복적으로 많이 사용되는 부분입니다. 예를 들어 font 모양이나 색상, 스타일 등을 변수로 지정해 놓고 반복적으로 사용되는 값을 변수로 변경해주면 간단하게 CSS를 제어할 수 있습니다. $font-stack: "Noto-sans", sans-serif; $base-color: red; body { font: 100% $font-stack; color: $base-color; } $font-stack에는 Noto-sans, sans-serif 글꼴 변수를 부여하고, $base-color에는 쉽게 red 색상으로 지정하였습니다. 위의 내용을 컴파일을 하면 아래와 같은 내용으로 css파일을 내용으로 컴파일이 됩니다. body{ font:100% "Noto-sans",sans-seri.. SCSS-SASS 2021. 2. 17. 이전 1 다음 💲 추천 글 반응형