ΠΡΠΈ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠΈ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»Ρ ΠΈΠ· ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ° [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;
}
ΡΡΠ±ΠΈΠ½ΠΎΠ²ΡΠΉ ΡΠ°ΡΡ 3.5.6
[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/
Π₯ΠΎΡΠΎΡΠΎ, Ρ ΠΌΠ΅Π½Ρ Π²ΡΠ΅ΡΠ° Π±ΡΠ» ΠΌΠΎΠ·Π³ΠΎΠ²ΠΎΠΉ ΠΏΠ΅ΡΠ΄, ΠΌΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ Π½ΠΈΠΆΠ΅ Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ Π½Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΡΠΈΠ±ΠΊΠΎΠΉ (ΠΈΠ»ΠΈ, ΠΏΠΎ ΠΊΡΠ°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅ΡΠ΅, ΠΏΠΎΡΡΠ΄ΠΎΠΊ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅).
ΠΠΎ ΠΈΡΡ
ΠΎΠ΄Π½Π°Ρ ΠΎΡΠΈΠ±ΠΊΠ° Π²ΡΠ΅ Π΅ΡΠ΅ ΡΠΎΡ
ΡΠ°Π½ΡΠ΅ΡΡΡ.
Π― ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠΎΠ²Π΅Π» Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ΅ΡΡΠΎΠ², ΠΈ Π΅ΡΡΡ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠΏΠΎΡΠΎΠ±Ρ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΡ Ρ ΠΊΠ»Π°ΡΡΠ°ΠΌΠΈ Π²Π½ΡΡΡΠΈ Π½ΠΈΡ
, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠ΅ΡΠ°ΡΠ°ΡΡΡΡ Π² Π½Π΅ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅:
ΠΠΈΠ±ΡΠ°ΡΡ:
%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/
Π₯ΠΎΡΠΎΡΠΎ, Ρ ΠΌΠ΅Π½Ρ Π²ΡΠ΅ΡΠ° Π±ΡΠ» ΠΌΠΎΠ·Π³ΠΎΠ²ΠΎΠΉ ΠΏΠ΅ΡΠ΄, ΠΌΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ Π½ΠΈΠΆΠ΅ Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ Π½Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΡΠΈΠ±ΠΊΠΎΠΉ (ΠΈΠ»ΠΈ, ΠΏΠΎ ΠΊΡΠ°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅ΡΠ΅, ΠΏΠΎΡΡΠ΄ΠΎΠΊ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅).
ΠΠΎ ΠΈΡΡ ΠΎΠ΄Π½Π°Ρ ΠΎΡΠΈΠ±ΠΊΠ° Π²ΡΠ΅ Π΅ΡΠ΅ ΡΠΎΡ ΡΠ°Π½ΡΠ΅ΡΡΡ.
Π― ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠΎΠ²Π΅Π» Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ΅ΡΡΠΎΠ², ΠΈ Π΅ΡΡΡ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠΏΠΎΡΠΎΠ±Ρ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΡ Ρ ΠΊΠ»Π°ΡΡΠ°ΠΌΠΈ Π²Π½ΡΡΡΠΈ Π½ΠΈΡ , ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠ΅ΡΠ°ΡΠ°ΡΡΡΡ Π² Π½Π΅ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅:ΠΠΈΠ±ΡΠ°ΡΡ:
ΠΡΡ ΠΎΠ΄:
ΠΠ°ΠΊ Π²ΠΈΠ΄ΠΈΡΠ΅ ... hoverclass ΠΏΠ΅ΡΠ°ΡΠ°Π΅ΡΡΡ ΠΊΠ°ΠΊ ΠΏΠ΅ΡΠ²ΡΠΉ ΠΊΠ»Π°ΡΡ.ΠΠ° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅, Ρ ΠΎΠ±Π½Π°ΡΡΠΆΠΈΠ», ΡΡΠΎ ΠΌΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ ΡΠ°ΠΊΠΆΠ΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΡΠΈΠ±ΠΊΠΎΠΉ Π² ββΠΎΠ±ΡΡΠ½ΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ΅ sass.