YoonStudyNote

1. 인수(Arguments) Mixin은 함수(Functions)처럼 인수(Arguments)를 가질 수 있다. 하나의 Mixin으로 다양한 결과를 만들 수 있다. // SCSS @mixin 믹스인이름($매개변수) { 스타일; } @include 믹스인이름(인수); // Sass =믹스인이름($매개변수) 스타일 +믹스인이름(인수) 매개변수(Parameters)란 변수의 한 종류로, 제공되는 여러 데이터 중 하나를 가리키기 위해 사용된다. 제공되는 여러 데이터들을 전달인수(Arguments) 라고 부른다. 다음과 같이 인수전달이 된다. @mixin dash-line($width, $color) { border: $width dashed $color; } .box1 { @include dash-line(1..

이전 내용에서처럼 외부에서 값을 받아오는 일이 없으면 굳이 매개변수를 사용하지 않아도 된다. 또한 굳이 @mixin을 쓰지않아도 사용이 가능하다. // SCSS @mixin 믹스인이름 { 스타일; } // Sass =믹스인이름 스타일 // SCSS @mixin large-text { font-size: 22px; font-weight: bold; font-family: sans-serif; color: orange; } // Sass =large-text font-size: 22px font-weight: bold font-family: sans-serif color: orange 소스코드에서 볼 수 있듯이, SCSS는 중괄호로 범위를 지정하고 Sass는 들여쓰기를 잘 해야한다. 예시) @mixin la..

재활용(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) 변수는 사용 가능한 유효범위가 있다. 선언된 블록({ }) 내에서만 유..