[Sass] 3장 Nesting

1. Nesting (중첩) Sass의 중첩(Nesting)은 CSS 선택자를 더욱 직관적으로 작성할 수 있게 해주는 강력한 기능으로 부모 선택자 안에 자식 선택자를 중첩해 코드를 작성하면, 구조가 명확하고 유지보수가 쉬운 스타일 시트를 만들 수 있습니다. Go HTML CSS 2. Sass 중첩 코드 예시nav { ul { list-style: none; li { display: inline-block; a { text-decoration: none; color: red; &:hover { color: pink; } ..

• format_list_bulleted Front-End/SASS
• · 2025. 3. 27.
• textsms

[Sass] 2장 기본 문법 - Sass 변수 사용법

1. 변수 정의하기Sass에서 변수를 정의하려면 $ 기호로 시작되며, 예를 들어 색상이나 폰트 크기 등을 변수로 정의할 수 있습니다.$primary-color: #3498db;$font-size: 16px;2. 변수 사용하기 정의한 변수를 CSS 속성에 사용할 수 있습니다.body { color: $primary-color; font-size: $font-size;}3.변수 재사용변수를 재사용하여 코드의 일관성을 유지하고 유지보수를 쉽게 할수 있습니다.$padding: 10px;.box { padding: $padding;}button { padding: $padding;}  GitHub - Koras02/sass-bloging: https://thinky.tistory.com/catego..

• format_list_bulleted Front-End/SASS
• · 2025. 3. 25.
• textsms

[Sass] 1장 Sass란?

1. Sass란?Sass(Syntactically Awesome Styles Sheets)는 CSS의 전처리기(preprocessor)로, CSS를 더욱 쉽게 작성하고 관리할 수 있는 라이브러리입니다. Sass의 기능으로 CSS를 더욱 확장하고, 코드의 재사용성을 높여 유지보수를 더욱 용이하게 해주며 프로젝트 최적화를 위해 사용해볼만한 라이브러리 입니다. Sass의 특징으로는 다음과 같습니다. 변수 사용: 색상, 폰트, 크기 등을 변수로 정의해 재사용할 수 있음중첩(Nesting): CSS 선택자를 중첩해 구조를 더욱 명확하게 표현믹스인(Mixin): 반복되는 스타일을 재사용할 수 있도록 정의할 수 있음상속(Inhreitance): CSS 클래스 간의 상속을 통한 코드 중복을 줄일 수 있음함수: Sass..

• format_list_bulleted Front-End/SASS
• · 2025. 3. 9.
• textsms