본문 바로가기

::public/HTML & CSS(SCSS)40

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.
SCSS - 변수 변수(Variables) 반복적으로 사용되는 값을 변수로 지정 가능. 변수 이름 앞에는 항상 $를 붙임. $변수이름: 속성값; - 변수 재 할당(Variables Reassignment) - !global (전역 설정) !global 플래그를 사용하면 변수의 유효범위를 전역(Global)로 설정 할 수 있음. - !default (초기값 설정) !default 플래그는 할당되지 않은 변수의 초기값을 설정. 할당되어 있는 변수가 있다면 변수가 기존 할당 값을 사용함.(기존 변수가 있을 경우는 현재 설정 값은 사용하지 않겠다는 의미) - #{} (문자 보간) ${} 를 이용해서 코드의 어디든지 변수 값을 넣을 수 있음. *내장 함수 unquote() 는 문자에서 따옴표를 제거함. 2021. 7. 2.
SCSS - 중첩 상위 선택자의 반복을 피하고 좀 더 편리하게 복잡한 구조를 작성 가능. // 이렇게 작성시 .section { width: 100%; .list { padding: 20px; li { float: left; } } } // 이렇게 컴파일 됨 .section { width: 100%; } .section .list { padding: 20px; } .section .list li { float: left; } cs - Ampersand (상위 선택자 참조) 중첩 안에서 & 키워드는 상위(부모) 선택자를 참조하여 치환합니다. - @at_root (중첩 벗어나기) 중첩에서 벗어나고 싶을 때 @at-root 키워드를 사용. 중첩 안에서 생성하되 중첩 밖에서 사용해야 하는 경우에 유용. *특정 변수를 범위 밖에서.. 2021. 7. 2.
SCSS - 데이터 종류 Numbers : 숫자(1, .82, 20px, 2em...) Strings : 문자(bold, relative, "/images/a.png", "dotum") Colors : 색상 표현(red, blue, #FFFFFF, rgba(255, 0, 0, .5)) Booleans : 논리(true, false) Nulls : 아무것도 없음(null) Lists : 공백이나 , 로 구분된 값의 목록((apple, orange, banana), apple orange) Maps : Lists와 유사하나 값이 Key: Value 형태((apple: a, orange: o, banana: b)) 2021. 7. 2.

티스토리툴바