Libsass: Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€Ρ‹ Ρ‚ΠΈΠΏΠΎΠ² всСгда Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΠ΅Ρ‡Π°Ρ‚Π°Ρ‚ΡŒΡΡ ΠΏΠ΅Ρ€Π΅Π΄ псСвдо-классами

Π‘ΠΎΠ·Π΄Π°Π½Π½Ρ‹ΠΉ Π½Π° 30 июн. 2018  Β·  3ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ  Β·  Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: sass/libsass

ΠŸΡ€ΠΈ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠΈ заполнитСля ΠΈΠ· сСлСктора [type] , Ссли Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ псСвдоклассы, сСлСкторы ΠΏΠ΅Ρ‡Π°Ρ‚Π°ΡŽΡ‚ΡΡ Π² Π½Π΅ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠΌ порядкС.

input.scss

%button-styles {
  color: red;

  &:focus {
    color: blue;
  }
}

[type="button"] {
  <strong i="8">@extend</strong> %button-styles;
}

ЀактичСскиС Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Ρ‹

libsass 3.5.4

[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"]

Π”Π°ΠΉΡ‚Π΅ ΠΌΠ½Π΅ Π·Π½Π°Ρ‚ΡŒ, Ссли я ΠΌΠΎΠ³Ρƒ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ!

Bug - @extends Bug - Confirmed Dev - Test Written

Π‘Π°ΠΌΡ‹ΠΉ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π­Ρ‚ΠΎ довольно ΡΠ΅Ρ€ΡŒΠ΅Π·Π½Π°Ρ ошибка , ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ я ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠΈΠ» Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΡ€ΠΈ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠΈ 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.

ВсС 3 ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π­Ρ‚ΠΎ довольно ΡΠ΅Ρ€ΡŒΠ΅Π·Π½Π°Ρ ошибка , ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ я ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠΈΠ» Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΡ€ΠΈ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠΈ 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 Π₯Π°Ρ…Π°, с Π΄Π½Π΅ΠΌ ​​торта! Π Π°Π΄, Ρ‡Ρ‚ΠΎ смог ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ это Π»ΡƒΡ‡ΡˆΠ΅;)

ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΌΠΎΠΉ Π²Ρ‚ΠΎΡ€ΠΎΠΉ ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠ΅Π½Π½Ρ‹ΠΉ Π±Π°Π³ Π½Π° самом Π΄Π΅Π»Π΅ Π½Π΅ являСтся ошибкой (Π΄ΠΎΠ»Π³ΠΈΠΉ дСнь), Π½ΠΎ ваш всС Π΅Ρ‰Π΅ Ρ‚Π°ΠΊΠΎΠ²!
Π‘ΡƒΠ΄Π΅ΠΌ Π½Π°Π΄Π΅ΡΡ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ это скоро Π±ΡƒΠ΄Π΅Ρ‚ исправлСно! :)

Π‘Ρ‹Π»Π° Π»ΠΈ эта страница ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ?
0 / 5 - 0 Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³ΠΈ