YoonStudyNote

재활용(Mixins) Sass Mixins는 스타일 시트 전체에서 재사용 할 CSS 선언 그룹 을 정의하는 아주 훌륭한 기능이다. 약간의 Mixin(믹스인)으로 다양한 스타일을 만들어낼 수 있다. 우선, Mixin은 두 가지만 기억하면 된다. 선언하기(@mixin)와 포함하기(@include) 이다. 만들어서(선언), 사용(포함)하는 것이다! --> 즉, mixin로 공유할 정보를 입력하는것이고 include를 이용해서 mixin의 정보를 가져와서 사용하는것이다. @mixin 기본적인 Mixin 선언은 아주 간단하다. @mixin 지시어를 이용하여 스타일을 정의한다. 1. 매개변수로 값을 받아오기 // SCSS @mixin 믹스인이름 (매개변수) { 스타일; } // Sass =믹스인이름 스타일 @mix..

Sass의 @if 조건문에서 사용되는 논리(Boolean) 연산에는 ‘그리고’,’ 또는’, ‘부정’이 있다. 자바스크립트 문법에 익숙하다면 &&, ||, !와 같은 기능으로 생각하면 된다. and 그리고 or 또는 not 부정(반대) $width: 90px; div { @if not ($width > 100px) { height: 300px; } } div { height: 300px; }

색상도 연산할 수 있다. div { color: #123456 + #345678; // R: 12 + 34 = 46 // G: 34 + 56 = 8a // B: 56 + 78 = ce background: rgba(50, 100, 150, .5) + rgba(10, 20, 30, .5); // R: 50 + 10 = 60 // G: 100 + 20 = 120 // B: 150 + 30 = 180 // A: Alpha channels must be equal } div { color: #468ace; background: rgba(60, 120, 180, 0.5); }

문자 연산에는 +가 사용된다. 문자 연산의 결과는 첫 번째 피연산자를 기준으로 한다. 첫 번째 피연산자에 따옴표가 붙어있다면 연산 결과를 따옴표로 묶는다. 반대로 첫 번째 피연산자에 따옴표가 붙어있지 않다면 연산 결과도 따옴표를 처리하지 않는다. div::after { content: "Hello " + World; flex-flow: row + "-reverse" + " " + wrap } div::after { content: "Hello World"; flex-flow: row-reverse wrap; }

상대적 단위 연산 일반적으론 절댓값을 나타내는 px 단위로 연산을 한다 하지만, 상대적 단위(%, em, vw 등)의 연산의 경우 CSS calc()로 연산해야 한다. calc()는 sass뿐만이 아니라 순수 css에서도 사용이 가능하다. width: 50% - 20px; // 단위 모순 에러(Incompatible units error) width: calc(50% - 20px); // 연산 가능 나누기 연산의 주의사항 CSS는 속성 값의 숫자를 분리하는 방법으로 "/" 를 허용하기 때문에 "/" 가 나누기 연산으로 사용되지 않을 수 있다. 예) font: 16px / 22px serif; 같은 경우 font-size: 16px와 line-height: 22px의 속성값 분리를 위해서 "/" 를 사용한..

연산(Operations) Sass는 기본적인 연산 기능을 지원한다. 레이아웃 작업시 상황에 맞게 크기를 계산을 하거나 정해진 값을 나눠서 작성할 경우 유용하다. 다음은 Sass에서 사용 가능한 연산자 종류 이다. 산술 연산자 종류 설명 주의사항 + 더하기 - 빼기 * 곱하기 하나 이상의 값이 반드시 숫자(Number) --> 단위가 붙어있는 숫자끼리는 계산이 안됨 (예_ 10px * 10px 은 오류) (예_ 10px * 10 = 100px 오류아님) / 나누기 오른쪽 값이 반드시 숫자(Number) --> 단위가 붙어있는 숫자끼리는 계산이 안됨 (예_ 10px / 10px 은 오류) (예_ 10px / 10 = 1px 오류아님) % 나머지 비교 연산자 종류 설명 == 동등 != 부등 대소 / 보다 큰..

1. 가져오기(Import) @import로 외부에서 가져온 Sass 파일은 모두 단일 CSS 출력 파일로 병합된다. 또한, 가져온 파일에 정의된 모든 변수 또는 Mixins 등을 주 파일에서 사용할 수 있다. Sass @import는 기본적으로 Sass 파일을 가져오는데, CSS @import 규칙으로 컴파일되는 몇 가지 상황이 있다. 파일 확장자가 .css일 때 파일 이름이 http://로 시작하는 경우 url()이 붙었을 경우 미디어쿼리가 있는 경우 위의 경우 CSS @import 규칙대로 컴파일 된다. @import "hello.css"; @import "http://hello.com/hello"; @import url(hello); @import "hello" screen; 2. 여러 파일 가져..

1. 변수(Variables) 반복적으로 사용되는 값을 변수로 지정할 수 있다. 변수 이름 앞에는 항상 $를 붙인다. $변수이름: 속성값; $color-primary: #e96900; $url-images: "/assets/images/"; $w: 200px; .box { width: $w; margin-left: $w; background: $color-primary url($url-images + "bg.jpg"); } .box { width: 200px; margin-left: 200px; background: #e96900 url("/assets/images/bg.jpg"); } 2. 변수 유효범위(Variable Scope) 변수는 사용 가능한 유효범위가 있다. 선언된 블록({ }) 내에서만 유..

1. 중첩 Sass는 중첩 기능을 사용할 수 있다. 상위 선택자의 반복을 피하고 좀 더 편리하게 복잡한 구조를 작성할 수 있다. /* SCSS */ .section { width: 100%; .list { padding: 20px; li { float: left; } } } .section { width: 100%; } .section .list { padding: 20px; } .section .list li { float: left; } 2. Ampersand (상위 선택자 참조) 중첩 안에서 & 키워드는 상위(부모) 선택자를 참조하여 치환한다. .btn { position: absolute; &.active { color: red; } } .list { li { &:last-child { margi..

데이터 설명 예시 Numbers 숫자 1, .82, 20px, 2em... Strings 문자 bold, relative, "/images/a.png", "dotum" Colors 색상표현 red, #ffff00. rgba(255,0,0,.5) Booleans 논리 true, false Nulls 아무것도 없음 null Lists 공백이나 "," 로 구분된 값의 목록 (apple, orange, banana), apple orange Maps Lists와 유사하나 값이 key: Value 형태 (apple: 0, Orange: 0, Banana: b) 특이사항 Sass에서 사용하는 데이터 종류들의 몇 가지 특이사항을 소개한다. Numbers: 숫자에 단위가 있거나 없다. Strings: 문자에 따옴표가 ..