& 선택자 1. & 선택자 - CSS에서 부모 요소를 나타내는 선택자 - 주로 Sass(SCSS)와 같은 CSS전처리기에서 사용 - 중첩된 선택자를 나타내는데 사용됨 2. 예시 See the Pen Untitled by NewBean0312 (@newbean0312) on CodePen.
sass
@function 1. @function - 사용자 정의 함수를 만들어 스타일 시트에서 재사용 가능한 코드를 작성하는데 사용 - 스타일 속성을 계산하거나 값을 조작할 수 있으며, 더욱 유연한 스타일링 가능 2. 사용법 See the Pen Tistory_Front-End Study_Sass_@function_2. 사용방법 by NewBean0312 (@newbean0312) on CodePen.
@mixin 1. @mixin - 재사용 가능한 코드 블록을 정의하는 데 사용되는 기능 - 스타일 규칙을 그룹화하고 필요할 때 재사용할 수 있음 2. 형식 - 스타일 규칙은 중괄호('{ }')안에 작성되며, CSS 속성과 값을 포함할 수 있음 @mixin 믹스인 이름 { // 스타일 규칙 } See the Pen Tistory_Front-End Study_Sass_@mixin_2. 형식 by NewBean0312 (@newbean0312) on CodePen. See the Pen Tistory_Front-End Study_Sass_@mixin_2. 형식 2 by NewBean0312 (@newbean0312) on CodePen.
Variables (변수) 1. Variables (변수) - 재사용 가능한 값을 저장하고, 참조하기 위해 사용 - 변수를 사용하면, 동일한 값이 반복되는 것을 방지하고, 유지보수성을 향상시킬 수 있음 2. 정의 방법 - '$' 기호를 사용하여, 변수명을 지정하고 값을 할당 See the Pen Untitled by NewBean0312 (@newbean0312) on CodePen.
Sass 7-1 패턴 1. Sass 7-1 패턴 - Sass 가이드라인에서 제시한 모듈화 방식 ※ 파일명에 _가 붙는 경우, @import 되어 사용될 것으로 파 sass/ | |- abstracts/ ||- _variables.scss# Sass 변수 ||- _functions.scss# Sass 함수 ||- _mixins.scss# Sass 믹스인 ||- _placeholders.scss# Sass 플레이스홀더 | |- base/ ||- _reset.scss# 리셋/정규화 ||- _typography.scss# 타이포그래피 규칙 | -# 기타. | |- components/ ||- _buttons.scss# 버튼 ||- _carousel.scss# 캐러셀 ||- _cover.scss# 커버 ||- _..
Sass 1. Sass(Syntactically Awesome Style Sheets) - 웹 개발에서 사용되는 CSS 전처리기(Preprocessor) - CSS의 기능을 확장하고, 개발자가 더 효율적으로 스타일을 작성할 수 있도록 도와줌 2. Sass의 특징 - 기존의 CSS 구문을 확장하여 변수, 중첩 규칙, 믹스인(mixin), 상속 등의 기능을 제공 - 시타일 시트 작성을 간소화 - 코드의 재사용성과 유지보수성을 향상 - 복잡한 스타일 구조를 간결하게 표현하여, 프로젝트의 개발 속도를 향상 3. Sass의 문법 - Sass는 두가지 문법을 제공 - SCSS (Sassy CSS) - 기본의 CSS와 비슷한 문법을 사용하며, 확장된 기능을 적용할 수 있음 - 중괄호('{ }')와 세미클론(';')을..
