본문 바로가기

전체 글332

SCSS - 함수 함수(Functions) 자신의 함수를 정의하여 사용할 수 있음. 함수와 Mixin은 거의 유사하지만 반환되는 내용이 다름. Mixin은 지정한 스타일을 반환하는 반면 함수는 보통 연상된 특정 값을 @return 지시어를 통해 반환됨. 함수는 @include 같은 별도의 지시어 없이 사용하기 때문에 내가 지정한 함수와 내장 함수의 이름이 충동할 수 있음. 내가 지정한 함수에는 별도의 접두어를 붙여주는 것이 좋음.(ex. red() -> extract-red()) - 조건과 반복(control Directives / Expressions) if(함수) 조건의 값(true, false)에 따라 두 개의 표현식 중 하나만 반환. @if(지시어) @if 지시어는 조건에 따른 분기 처리가 가능하며 if 문과 유사.. 2021. 8. 2.
SCSS - 확장 확장(Extend) 특정 선택자가 다른 선택자의 모든 스타일을 가져야하는 경우. 선택자의 확장 기능을 사용할 수 있음. *확장을 추천하지 않는 이유 - [참고]https://sass-guidelin.es/ko/#extend @extend 는 다음과 같은 문제를 고려해야 함. 1. 내 현재 선택자(위 예제의 .btn-danger)가 어디에 첨부될 것인가? 2. 원치 않는 부작용이 초래될 수도 있는가? 3. 이 한 번의 확장으로 얼마나 큰 CSS가 생성되는가? 결과적으로 확장기능은 무해하거나 혹은 유익할 수도 있지만 그만큼 부작용을 가지고 있을 수 있음. 따라서 확장은 사용을 권장하지 않으며 Mixin 을 대체 기능으로 사용하길 권함. 2021. 8. 2.
SCSS - 재활용 재활용(Mixins) 스타일 시트 전체에서 재사용 할 CSS 선언 그룹을 정의하는 기능. 선언하기(@mixin), 포함하기(@include). - 인수(Arguments) Mixin은 함수(Function)처럼 인수(Arguments)를 가질 수 있음. - 인수의 기본값 설정 - 키워드 인수(Keyword Arguments) - 가변 인수(Variable Arguments) 가변인수는 매개변수 뒤에 ...을 붙임. 가변인수를 전달할 값으로 사용하기. - Content 선언된 Mixin에 @content 이 포함되어 있다면 해당 부분에 원하는 스타일 블록을 전달할 수 있음. @content 부분에 추가적인 특정 CSS 속성들을 더 넣을 수 있음. 2021. 8. 2.
SCSS - 연산 연산(Operations) 산술 연산자 : +, -, *, /, %. 비교 연산자 : ==, !=, , =. 논리 연산자 : and, or, not. - 숫자(Numbers) 상대적 단위 연산 px 이 아닌 상대적 단위(%, em, vw 등)의 연산의 경우 CSS calc()로 연상해야 함. - 문자(Strings) 문자 연산에는 +가 사용됨. 문자 연산의 결과는 첫 번째 피연산자가 기준. 첫 번째 피연산자에 따옴표가 붙어있다면 결과는 따옴표로 붙어있지 않다면 결과도 따옴표 처리 안함. - 색상(colors) 색상도 연산 가능. Alpha 값을 연산하기 위한 색상 함수를 사용할 수 있음. opacify(), transparentize() - 논리(Boolean) @if 조건문에서 사용됨. 2021. 8. 2.
SCSS - 파일 분할(Partials) 파일 분할(Partials) 규모가 커진 파일들을 header나 side-menu 같이 각 기능과 부분으로 나눠 유지보수가 쉽도록 관리. 파일 이름 앞에 _를 붙여(_header.scss) @import 로 가져오면 컴파일 시 ~.css 파일로 컴파일 하지 않음. *Webpack, Parcel, Gulp 같은 빌드툴에서는 Partials 기능을 사용할 필요 없이 설정된 값에 따라 빌드됨. _를 사용하도록 권장. 2021. 8. 2.
SCSS - 가져오기(import) 가져오기(Import) @import 로 외부에서 가져온 Sass 파일은 모두 단일 CSS 출력 파일로 병합됨. 가져온 파일에 정의된 모든 변수 또는 Mixins 등을 주 파일에서 사용할 수 있음. *CSS @import 규칙으로 컴파일 되는 경우 - 파일 확장자가 .css 일 때 - 파일 이름이 http:// 로 시작하는 경우 - url()이 붙었을 경우 - 미디어 쿼리가 있는 경우 - 여러 파일 가져오기 @import 로 여러 파일 가져오기 가능. , 로 구분. 2021. 8. 2.

티스토리툴바