عند تمديد عنصر نائب من محدد [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/
حسنًا ، لقد كان لدي فكرة رائعة بالأمس ، المثال أدناه ليس خطأ في الواقع (أو على الأقل الترتيب لا يهم في هذه الحالة).
لكن الخطأ الأصلي لا يزال قائما.
لقد أجريت أيضًا بعض الاختبارات ، وهناك المزيد من الطرق لتوسيع الفصول بداخلها ، كما تتم طباعتها بترتيب خاطئ:
ليبساس:
%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 العادية.