조건문 if 함수 삼항연산자와 유사 if(조건, 참표현식1, 거짓표현식2) // @if @if (조건) { /* 조건이 참일 때 구문 : 조건의 ()는 생략가능하다. */ } // @if @else @if (조건) { /* 조건이 참일 때 구문 */ } @else { /* 조건이 거짓일 때 구문 */ } // @if @else if @if (조건1) { /* 조건1이 참일 때 구문 */ } @else if (조건2) { /* 조건2가 참일 때 구문 */ } @else { /* 모두 거짓일 때 구문 */ } 반복문 @for 스타일을 반복적으로 출력할 때 // through : 시작에서 종료까지 반복 // 종료 만큼 반복 @for $변수 from 시작 through 종료 { // 반복 내용 } // to: ..

함수 mixin과 유사하지만 반환되는 내용이 다름. mixin은 지정된 style 반환, 함수는 연산된computed 값을 반환 별도의 지시어 없이 사용하기 때문에 내장함수와 충돌하지 않도록 함수명 설정할 것 @function 함수이름($매개변수) { @return 값 } 내장함수 // 내가 정의한 함수 @function extract-red($color) { // 내장 함수 @return rgb(red($color), 0, 0); } div { color: extract-red(#D55A93); } https://sass-lang.com/documentation/modules Sass: Built-In Modules Compatibility: Dart Sass since 1.23.0 LibSass ✗ ..

산술연산 나누기 조건 3가지 값 또는 그 일부가 변수인 경우 값이 ()로 묶여있는 경우 다른 연산자와 함께 사용되는 경우 mixin SCSS SASS 선언 @mixin 믹스인이름{ 스타일; } =믹스인이름 스타일 사용 @include 믹스인이름; +믹스인이름 선택자 이용하기 인수 argument 기본 인수 사용 인수 default value @mixin 믹스인이름($매개변수: 기본값) { 스타일; } 인수 응용 키워드 인수 keyword argument 입력순서 불필요, 미작성 인수 적용을 위해 기본값(null) 설정 추천 @mixin 믹스인이름($매개변수A: 기본값, $매개변수B: 기본값) { 스타일; } @include 믹스인이름($매개변수B: 인수); 가변인수 variable arguments @m..

중첩 1. 규칙 중첩 2. 속성 중첩 특수선택자 부모 참조 선택자 & @at-root 중첩 벗어나기 변수 $변수명:데이터 식별자 (변수명) 규칙: 영문,한글 모두 가능 * kebab-case (mostly use) * snake_case 데이터의 종류 데이터 설명(특이사항) 예시 Numbers 숫자: 숫자에 단위가 있거나 생략가능 1,20px, 2em, .5 Strings 문자 : 따옴표가 있거나 생략 bold, relateive, “dotum”, Colors 색상표현 red, #ff0000, rgba(255,0,50,0.5) Booleans 논리 true,false Nulls 아무것도 없음 null이 사용되면 컴파일하지 않음 null Lists 공백이나 , 로 구분되는 목록: (), 생략가능 (appl..

Sass(Syntactically Awesome Style Sheets) Scss(sassy css) : css의 확장언어 SCSS와 Sass는 불필요한 선택자의 과용과 연산 기능의 한계, 구문의 부재들 프로젝트가 복잡해지면서 Css의 가독성과 재사용성이 떨어지는 단점을 보완하고, 유지보수가 쉬워지도록 만들어준다. SASS의 추가기능 1. 변수의 사용 2. 조건문과 반복문 3. Import 4. Nesting 5. Mixin 6. Extend/Inheritance ​ SASS 특징 1. CSS의 모든 문법을 지원하는 CSS 완전 호환성 2. 변수, 중첩, 믹스인 등 사용으로 언어 확장 3. 색상 등 값을 처리하는 다수의 유용한 함수 4. 라이브러리를 위한 제어 지시문과 같은 고급 기능 5. 형식을 잘 갖..