본문 바로가기
반응형

IT 이야기/CSS3 SCSS LESS2

SASS SCSS :hover 예제와 not working 사례 원인과 해법 SASS SCSS :hover 예제와 not working 사례 원인과 해법 서론 웹 개발에서 CSS는 핵심적인 역할을 담당합니다. 하지만 코드의 재사용성과 유지보수의 어려움 때문에 SASS(SCSS)가 등장하게 되었습니다. SASS(SCSS)는 CSS 전처리기로, 변수, 함수, 중첩 등의 기능을 제공하여 개발자들이 보다 효율적으로 스타일링을 할 수 있게 도와줍니다. 이러한 기능 중 하나인 :hover를 사용하는 예제와 함께, 해당 기능이 제대로 작동하지 않는 사례들을 살펴보고 그 원인과 해법에 대해 알아보겠습니다. SASS SCSS :hover 예제 // 변수 정의 $primary-color: #3498db; // 버튼 스타일링 .button { padding: 10px 20px; background-.. 2023. 8. 3.
[CSS] LESS Mixins, 함수와 연산, 변수, Nesting [CSS] LESS, 너는 뭐가 다른 거야?! 소개 LESS는 CSS의 확장 버전으로, 변수, 함수, 연산, 중첩, 스코프 등의 기능을 추가하여 CSS에 Script의 능력을 덧붙여 확장한 언어입니다. CSS Preprocessor(전처리기)로서, CSS를 변수나 Nested Rules을 이용하여 쉽고 빠르고 체계적으로 프로그래밍할 수 있게 만든 것입니다. CSS의 기존 문법을 그대로 사용하기 때문에 익히기 쉬운 장점이 있으며, 하위 호환성이 뛰어나다는 특징이 있습니다. 이번 포스팅에서는 LESS의 주요 기능인 변수, Mixins, Nesting, 함수와 연산에 대해 자세히 살펴보겠습니다. LESS 변수 LESS에서는 변수를 사용하여 여러 번 반복되는 값을 재사용할 수 있습니다. 변수를 사용하면 값이 변.. 2020. 10. 15.
반응형