Mixins as Functions & Passing Rulesets to Mixins

함수로서의 믹스인 & 믹스인에 룰셋 전달하기

이번 시간에는 믹스인의 활용법에 대해 좀더 살펴보기로 합니다.

Mixins as Functions(믹스인으로부터 변수 또는 믹스인 반환하기)

믹스인에 정의된 변수와 믹스인은 호출자 범위에서 나타내고 사용할 수 있습니다.

단 한가지 예외는 호출자가 같은 이름으로 변수를 포함하고 있는 경우에는 복사되지 않습니다.

같은 이름의 경우 또 다른 믹스인 호출에 의해 정의된 변수를 포함하게 됩니다.

오직 호출 로컬 범위 내에 존재하는 변수만이 보호되어 있습니다.

부모 스코프에서 상속된 변수는 덮어쓰게 됩니다.

less

.caller {
	.mixin();
	width:  @width;
	height: @height;
}

컴파일된 css

.caller {
  width: 100%;
  height: 200px;
}

위와 같이 믹스인에 정의된 변수는 그 반환값으로서 역할을 할 수 있습니다.

그리고 사용자는 거​​의 함수처럼 사용할 수있는 믹스인을 만들 수 있습니다.

less

.average(@x, @y) {
	@average: ((@x + @y) / 2);
}

div {
	.average(16px, 50px); // 믹스인 호출
	padding: @average;    // 믹스인의 반환값을 사용
}

컴파일된 css

div {
  padding: 33px;
}

호출 스코프 내에서 직접 정의된 변수는 전역 범위의 변수로 오버라이드되지 않고 호출 부모 범위에 정의된 변수를 덮어 쓰게 됩니다.

less

.mixin() {
	@size: in-mixin; // 호출자 안에서 재정의됨
	@definedOnlyInMixin: in-mixin;
}

.class {
	margin: @size @definedOnlyInMixin;
	.mixin();
}

@size: globaly-defined-value; // 호출자의 부모 영역 - 보호되지 않음

.global-var {
	content: '@{size}';
}

컴파일된 css

.class {
  margin: in-mixin in-mixin;
}
.global-var {
  content: 'globaly-defined-value';
}

마지막으로 믹스인 내부에 정의된 믹스인은 반환값으로 역할을 합니다.

less

.unlock(@value) { // 외부(부모) 믹스인
	.doSomething() { // 중첩된 믹스인
		declaration: @value;
	}
}

#namespace {
	.unlock(5); // unlock 믹스인에 5를 전달
	.doSomething(); // 중첩 믹스인을 여기서 사용 가능하다
}

컴파일된 css

#namespace {
  declaration: 5;
}

Passing Rulesets to Mixins(믹스인에 룰셋 전달하기)

사용자의 룰셋은 다른 구조에 그것을 포함할 수 있으며 룰셋의 모든 속성을 다른 구조에 복사할 수 있습니다.

또한 믹스인의 인수로 사용하고 다른 변수로 그것에 전달할 수 있습니다.

less

// 분리된 룰셋을 선언
@detached-ruleset: {
	background: red;
	padding: 10px;
};

// 분리된 룰셋 사용하기
.top {
	@detached-ruleset(); // () 괄호 필수
}

컴파일된 css

.top {
  background: red;
  padding: 10px;
}

위와 같이 분리된 룰셋 뒤에 괄호()는 필수입니다.

괄호없이 @detached-ruleset; 호출하면 동작하지 않습니다.

사용자는 어떤 미디어 쿼리 또는 미지원되는 브라우저 클래스 이름에서 코드의 일부를 래핑,추상화하여 믹스인을 정의하려는 경우에 유용합니다.

룰셋은 콘텐츠를 감쌀 수 있기 위해서 믹스인에 전달될 수 있습니다.

less

.desktop-and-old-ie(@rules) {
	@media screen and (min-width: 1200px) {
		@rules();
	}
	html.lt-ie9 & { // 미지원 브라우저
		@rules();
	}
}

header {
	background-color: blue;

	.desktop-and-old-ie({
		background-color: red;
	});
}

컴파일된 css

header {
  background-color: blue;
}
@media screen and (min-width: 1200px) {
  header {
    background-color: red;
  }
}
html.lt-ie9 header {
  background-color: red;
}

위와 같이 desktop-and-old-ie 믹스인은 미디어쿼리, 루트클래스를 정의해서 믹스인을 코드의 일부 조각으로 감쌀 수 있습니다.

룰셋은 현재 변수에 할당하거나 믹스인에 전달되어서 전체 세트를 포함 할 수 있습니다.

less

@my-ruleset-01: {
	.my-selector {
		background-color: black;
	}
};

.demo-01 {
	@my-ruleset-01();
}

컴파일된 css

.demo-01 .my-selector {
  background-color: black;
}

사용자는 미디어쿼리 버블링을 활용할 수도 있습니다. 예를 들어 :

less

@my-ruleset-02: {
	line-height: 1.5;
	.my-selector {
		@media tv {
			background-color: black;
		}
	}
};

@media (orientation:portrait) { // 위 룰셋에 정의된 미디어 쿼리에 버블링되어 합쳐진다.
	padding: 10px;
	@my-ruleset-02();
}

컴파일된 css

@media (orientation: portrait) {
  padding: 10px;
  line-height: 1.5;
}
@media (orientation: portrait) and tv {
  .my-selector {
    background-color: black;
  }
}

룰셋에 믹스인을 선언하여 사용하는 경우에 믹스인 호출과 룰셋호출을 다음과 같이 사용합니다.

less

// 믹스인과 룰셋 사용하기
@detached-ruleset: {
	.mixin() {
		color:blue;
		@aa : red;
	}
};
// 분리된 룰셋 호출하기
.caller {
	@detached-ruleset();
	.mixin();
}

컴파일된 css

.caller {
  color: blue;
}

그리고 룰셋 내부에 정의된 변수는 반환되지 않습니다. 즉, 지역변수처럼 비공개 영역입니다.

less

@detached-ruleset: {
	@color:blue; // 이 변수는 비공개
};
.caller {
	color: @color; // 문법 에러
}

Scoping(범위 지정)

Definition and Caller Scope Visibility(정의와 호출 범위 가시성)

분리된 룰셋은 호출자의 변수와 믹스인을 바라봅니다. 다음과 같이 :

\

less

@detached-ruleset: {
	caller-variable: @caller-variable; // 변수가 이곳에 정의되어 있지 않음
	.caller-mixin(); // 믹스인이 이곳이 정의되어 있지 않음
};

.selector {
	// 룰셋 사용하기
	@detached-ruleset();

	// 룰셋 내에서 필요한 변수와 믹스인을 정의함
	@caller-variable: value;
	.caller-mixin() {
		variable: declaration;
	}
}

컴파일된 css

.selector {
  caller-variable: value;
  variable: declaration;
}

정의된 곳으로부터 접근 가능한 변수와 믹스인은 호출자 안에서 이용할 수 있는 것을 끌어들인다.

less

// 전역변수
@variable: global;
@detached-ruleset: {
	// 호출자 내에 정의된 변수가 사용될 것이다.
	content: '@{variable}';
};

.selector {
	@detached-ruleset();
	@variable: variable defined in caller; // 호출자 내의 지역변수
}

컴파일된 css

.selector {
  content: 'variable defined in caller';
}

Referencing Won't Modify Detached Ruleset Scope(참조는 분리된 룰셋 스코프를 변경하지 않음)

룰셋은 다음과 같이 참조될 뿐 새로운 스코프에 접근할 수 없습니다.

less

@detached-1: {
	scope-detached: @one @two;
};
.one {
	@one: visible;
	.two {
		@detached-2: @detached-1; // 룰셋을 복사하여 이름 다시짓기
		@two: visible;
	}
}

.use-place {
	@two : unreferenced;
	.one > .two();
	@detached-2();
}

컴파일된 css

.use-place {
  scope-detached: visible visible;
}

Jaehee's WebClub