-
Less Mixins part #01CSS Preproseccor/Less 2019. 3. 30. 03:24
믹스인 (Mixins)
클래스 선택자와 id 선택자를 혼합할 수 있다.
- less
.logo, #title{ font-weight: 900; } .mixin-class{ .logo(); } .mixin-id{ #title(); }
- css
.logo, #title{ font-weight: 900; } .mixin-class{ font-weight: 900; } .mixin-id{ font-weight: 900; }
- 믹스인 호출을 할 때 [.logo(), #title()] 괄호는 선택사항이지만, 더 이상 사용되지 않을 예정이다.*
.logo(); .logo; // 정상 작동.
믹스인을 출력하지 않음 (Not Outputting the Mixin)
직접 만든 믹스인을 컴파일할 CSS 파일 내부에 포함시키고 싶지 않을 때, 뒤에 괄호를 붙여라.
- less
/* 괄호가 없다. */ .my-mixin { color: black; } /* 믹스인 이름 뒤에 괄호를 붙였다. CSS 파일로 컴파일 시 CSS 파일 내부에 포함되지 않는다. */ .my-other-mixin() { background: white; } .class { .my-mixin(); .my-other-mixin(); }
- css
.my-mixin { color: black; } .class { color: black; background: white; }
믹스인 선택자 (Selectors in Mixins)
믹스인에는 여러 선택자를 포함시킬 수 있다.
- less
/* CSS로 컴파일 시 CSS 파일 내부에 포함되지 않는다. */ .my-hover-mixin() { &:hover { border: 1px solid red; } } button { /* 믹스인 이름 뒤에 괄호를 붙여 호출했다. 위에서 언급했던 옵션. */ .my-hover-mixin(); }
- css
button:hover { border: 1px solid red; }
네임스페이스 (Namespaces)
- less
#outer() { .inner { color: red; } } /* '>'이것과 공백은 선택 사항 * 네임스페이스 */ .c { #outer > .inner(); }
- 모두 똑같이 동작*
#outer > .inner(); #outer > .inner; #outer .inner(); #outer .inner; #outer.inner(); #outer.inner;
보호된 네임스페이스 (Guarded Namespaces)
네임스페이스에 가드가 있는 경우, 가드 조건이 true 일 경우에만 믹스인을 사용할 수 있다. 네임스페이스 가드는 믹스인에 대한 가드와 정확히 같은 방식으로 평가되므로, 아래의 믹스인은 동일하게 작동한다.
#namespace when (@mode = huge) { .mixin() { /* */ } } #namespace { .mixin() when (@mode = huge) { /* */ } }
!important 키워드 (The !important keyword)
- less
.foo (@bg: white, @color: red) { background: @bg; // white color: @color; // red } .unimportant { .foo(); } .important { .foo() !important; }
- css
.unimportant { background: white; color: red; } .important { background: white !important; color: red !important; }
'CSS Preproseccor > Less' 카테고리의 다른 글
Less Variables (0) 2019.03.28 CSS Preprocessor [Less] (0) 2019.03.28 댓글
- less