[type]
μ νκΈ°μμ μ리 νμμλ₯Ό νμ₯ ν λ μ리 νμμκ° μμ¬ ν΄λμ€λ₯Ό μ¬μ©νλ κ²½μ° μ νκΈ°κ° μλͺ»λ μμλ‘ μΈμλ©λλ€.
%button-styles {
color: red;
&:focus {
color: blue;
}
}
[type="button"] {
<strong i="8">@extend</strong> %button-styles;
}
[type="button"] {
color: red;
}
:focus[type="button"] {
color: blue;
}
[type="button"] {
color: red;
}
[type="button"]:focus {
color: blue;
}
λ²μ μ 보 :
$ node-sass --version
node-sass 4.9.0 (Wrapper) [JavaScript]
libsass 3.5.4 (Sass Compiler) [C/C++]
λν selector-unify
λ‘ λͺ κ°μ λλ²κ·Έ λ¬Έμ μ€ννμΌλ©° μμ μ νκΈ°λ₯Ό μ¬μ©νλ©΄ μμμ κ΄κ³μμ΄ μμλλ‘ ν΅ν©λμμ§λ§ μ ν μ νκΈ°λ κ·Έλ μ§ μμ κ²μΌλ‘ λνλ¬μ΅λλ€.
@debug(selector-unify('button', ':focus'));
// button:focus
@debug(selector-unify(':focus', 'button'));
// button:focus
@debug(selector-unify('[type="button"]', ':focus'));
// [type="button"]:focus
@debug(selector-unify(':focus', '[type="button"]'));
// :focus[type="button"]
μ 곡 ν μμλ μΆκ° μ λ³΄κ° μμΌλ©΄ μλ €μ£ΌμΈμ!
μ΄κ²μ λ§€μ° μ€μν λ²κ·Έμ
λλ€ . libsassλ₯Ό μ΅μ λ²μ μΌλ‘ μ
κ·Έλ μ΄λ ν λ μ μμ μ λ°κ²¬νμ΅λλ€ (μ΄μ λ²μ μλμ΄ λ²κ·Έκ° μμμ΅λλ€). μ΄λ‘ μΈν΄ μ¬μ©μ λͺ¨λ₯΄κ² μ¬μ΄νΈκ° μμ λ μ μμ΅λλ€. μ΄κ²μ μ€μ λ‘ κ°λ₯ν ν 빨리 μμ λμ΄μΌν©λλ€. μ¬κΈ°μμ λ€λ₯Έ λΌμ΄λΈλ¬λ¦¬λ₯Ό λΉ λ₯΄κ² νμΈν μ μμ΅λλ€.
https://www.sassmeister.com/
Ok μ΄μ λΈλ μΈ ννΈκ° λ°μνμ΅λλ€. μλμ μμ λ μ€μ λ‘ λ²κ·Έκ° μλλλ€ (λλ μ μ΄λ κ·Έ κ²½μ° μμλ μ€μνμ§ μμ΅λλ€).
κ·Έλ¬λ μλμ λ²κ·Έλ μ¬μ ν μ‘΄μ¬ν©λλ€.
λν λͺ κ°μ§ ν
μ€νΈλ₯Ό μννμΌλ©° κ·Έ μμ ν΄λμ€λ₯Ό νμ₯νκ³ μλͺ»λ μμλ‘ μΈμλλ λ λ§μ λ°©λ²μ΄ μμ΅λλ€.
Libsass :
%testextend {
background: red;
&.hoverclass {
background: blue;
}
}
%testextend {
background: red;
&:hover {
background: blue;
}
}
.wrapper {
&.inner {
<strong i="15">@extend</strong> %testextend;
}
}
μ°μΆ:
.wrapper.inner {
background: red;
}
.hoverclass.wrapper.inner {
background: blue;
}
.wrapper.inner {
background: red;
}
.wrapper.inner:hover {
background: blue;
}
보μλ€μνΌ ... hoverclassλ 첫 λ²μ§Έ ν΄λμ€λ‘ μΈμλ©λλ€.
μ¬μ€, λ΄ μμ κ° μΌλ° sass λΌμ΄λΈλ¬λ¦¬μ λ²κ·ΈλΌλ κ²μ λ°κ²¬νμ΅λλ€.
@bskibinski λλ΄μ΄ μλλλ€. μ€λμ λ§ κ·Έλλ‘ λ΄ μμΌμ΄κ³ , λ΄κ° νΌμκ° μλλΌκ³ λ§νλ κ²μ΄λΌ ν μ§λΌλ λκ΅°κ°κ° λ§μΉ¨λ΄ μ΄κ²μ λ΅μ₯νλ κ²μλ³΄κ³ μΌλ§λ 기뻀λμ§ λͺ¨λ¦ λλ€! μ΅κ³ μ μλ μΉ μμ μμΌ μ λ¬Ό. ππ
@AshleyKolodziej νν ν΄νΌ μΌμ΅ λ°μ΄! λ μ’κ² λ§λ€ μμμ΄μ λ€νμ λλ€;)
λν λ λ²μ§Έ λ²κ·Έ λ°κ²¬μ μ€μ λ‘ λ²κ·Έκ° μλμ§λ§ (κΈ΄ ν루) μ¬μ ν κ·Έλ μ΅λλ€!
μ΄ λ¬Έμ κ° κ³§ ν΄κ²°λκΈ°λ₯Ό λ°λλλ€! :)
κ°μ₯ μ μ©ν λκΈ
μ΄κ²μ λ§€μ° μ€μν λ²κ·Έμ λλ€ . libsassλ₯Ό μ΅μ λ²μ μΌλ‘ μ κ·Έλ μ΄λ ν λ μ μμ μ λ°κ²¬νμ΅λλ€ (μ΄μ λ²μ μλμ΄ λ²κ·Έκ° μμμ΅λλ€). μ΄λ‘ μΈν΄ μ¬μ©μ λͺ¨λ₯΄κ² μ¬μ΄νΈκ° μμ λ μ μμ΅λλ€. μ΄κ²μ μ€μ λ‘ κ°λ₯ν ν 빨리 μμ λμ΄μΌν©λλ€. μ¬κΈ°μμ λ€λ₯Έ λΌμ΄λΈλ¬λ¦¬λ₯Ό λΉ λ₯΄κ² νμΈν μ μμ΅λλ€.
https://www.sassmeister.com/
Ok μ΄μ λΈλ μΈ ννΈκ° λ°μνμ΅λλ€. μλμ μμ λ μ€μ λ‘ λ²κ·Έκ° μλλλ€ (λλ μ μ΄λ κ·Έ κ²½μ° μμλ μ€μνμ§ μμ΅λλ€).
κ·Έλ¬λ μλμ λ²κ·Έλ μ¬μ ν μ‘΄μ¬ν©λλ€.
λν λͺ κ°μ§ ν μ€νΈλ₯Ό μννμΌλ©° κ·Έ μμ ν΄λμ€λ₯Ό νμ₯νκ³ μλͺ»λ μμλ‘ μΈμλλ λ λ§μ λ°©λ²μ΄ μμ΅λλ€.Libsass :
μ°μΆ:
보μλ€μνΌ ... hoverclassλ 첫 λ²μ§Έ ν΄λμ€λ‘ μΈμλ©λλ€.μ¬μ€, λ΄ μμ κ° μΌλ° sass λΌμ΄λΈλ¬λ¦¬μ λ²κ·ΈλΌλ κ²μ λ°κ²¬νμ΅λλ€.