Sass/@ rules

من موسوعة حسوب
< Sass
مراجعة 04:57، 10 أبريل 2018 بواسطة عبد اللطيف ايمش (نقاش | مساهمات) (إضافة الصفحة)
(فرق) → مراجعة أقدم | المراجعة الحالية (فرق) | مراجعة أحدث ← (فرق)
اذهب إلى التنقل اذهب إلى البحث

تدعم Sass جميع قواعد @ الخاصة بلغة CSS، فضلًا عن أخرى خاصة بلغة Sass تسمى المُوجّهات (directives). لهذه القواعد تأثيرات مختلفة في Sass، وقد فصّلناها في الأسفل. انظر أيضًا موجّهات التحكم (control directives) وموجّهات المخاليط (mixin directives).

‎@import

توسّع Sass استخدامات القاعدة ‎@import الخاصة بلغة CSS للسماح لها باستيراد ملفات SCSS و Sass. ستُدمج جميع ملفات SCSS و Sass المُستورَدة معًا في ملف CSS واحدٍ. وإضافةً إلى ذلك، فالمتغيرات أو المخاليط (mixins) المُعرّفة في الملفات المستوردة يمكن استخدامها في الملف الرئيسي.

تبحث Sass عن ملفات Sass أخرى في المجلّد الحالي، وفي مجلّد ملفات Sass في التقنيات Rack و Rails و Merb. يمكن تعيين مجلدات بحث إضافية باستخدام الخيار ‎:load_paths أو الخيار ‎--load-path في سطر الأوامر.

تأخذ القاعدة ‎@import اسمَ الملف المراد استيراده. افتراضيًا، تبحث عن ملف Sass لأجل استيراده مباشرةً، ولكن هناك بعض الظروف التي ستجعلها تُصرَّف إلى القاعدة ‎@import الخاصّة بلغة CSS، وهي:

  • إن كان امتداد اسم الملف هو ‎.css.
  • إن بدأ اسم الملف بالبروتوكول http:‎//‎.
  • إن كان اسم الملف مكتوبًا بالصياغة url(‎)‎.
  • إن كان للقاعدة ‎@import أيّ استعلامات وسائط (media queries).

إذا لم يُستوفى أيٌّ من الشروط المذكورة أعلاه وكان امتداد الملف هو ‎.scss أو ‎.sass، فحينها سيُستورد ملف Sass أو SCSS المُعيّن. وإذا لم يكن هناك أي امتداد، فستحاول Sass العثور على ملف بهذا الاسم وامتداده ‎.scss أو ‎.sass لتستورده.

على سبيل المثال:

@import "foo.scss";

أو:

@import "foo";

كلاهما سيستوردان الملف foo.scss، في حين أنّ:

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

ستُصرّف إلى:

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

من الممكن أيضًا استيراد أكثر من ملف واحدٍ في قاعدة ‎@import واحدة. على سبيل المثال:

@import "rounded-corners", "text-shadow";

ستستورد الملفّين rounded-corners و text-shadow. يجوز أن تحتوي التعليمة import على استيفاء ‎(#{})‎، ولكن مع بعض القيود. فلا يمكن استيراد ملف Sass ديناميكيًا باستعمال المتغيرات. الاستيفاء لا يصلح إلا في استيرادات CSS. وعلى هذا النحو، فهي لا تعمل إلّا مع استيرادات url(‎)‎. على سبيل المثال:

$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}");

ستُصرّف إلى:

@import url("http://fonts.googleapis.com/css?family=Droid+Sans");

المجزوءات (Partials)

إن كنت تريد استيراد ملف SCSS أو Sass دون تصريفه إلى ملف CSS، فأضف شرطة سفلية إلى بداية اسم الملف. هذا سيخبر Sass أن لا تترجمه إلى ملف CSS عادي. يمكنك بعد ذلك استيراد تلك الملفات من دون استخدام الشرطة السفلية.

على سبيل المثال، إن كان لديك ملف ‎_colors.scss فلن يُنشَأ ملفٌ باسم ‎_colors.css ويمكنك كتابة:

@import "colors";

وسيُستورد الملف ‎_colors.scss.

تذكر أنّه لا يجوز استخدام ملف مجزوء (partial) وآخر غير مجزوء لهما نفس الاسم في نفس المجلّد. على سبيل المثال، لا يجوز أن يوجد الملف ‎_colors.scss في نفس المجلد مع colors.scss.

قواعد ‎@import المتشعّبة

على الرغم من أنه في أكثر الأحيان سيكون وضع ‎@import في المستوى الأعلى من الملف أفْيَد، لكن من الممكن إدراجها ضمن قواعد CSS وقواعد ‎@media. مثل قاعدة ‎@import في المستوى الأساسي (base-level @import)، وهذا يشمل محتويات الملف المُستورّد بواسطة ‎@import. ومع ذلك، ستتشعّبُ القواعد المستوردة في نفس مكان قاعدة ‎@import الأصلية.

على سبيل المثال، إن احتوى الملف example.scss على:

.example {
  color: red;
}

فإذًا:

#main {
  @import "example";
}

ستُصرّف إلى:

#main .example {
  color: red;
}

إنّ المُوجّهات (Directives) التي لا يُسمح باستخدامها إلا في المستوى الأساسي للملف، مثل ‎@mixin أو ‎@charset، لا يجوز استخدامها في الملفات المستوردة عبر ‎@import في سياق متشعب.

كما لا يجوز أن تتشعّب ‎@import داخل المخاليط (mixins) أو مُوجّهات المراقبة (control directives).

الموجّه ‎@media

تتصرّف موجّهات ‎@media في Sass مثلما تفعل في لغة CSS، مع قدرة إضافيةٍ واحدةٍ، وهي أنه يمكن أن تتشعّب داخل قواعد CSS. إن ظهر أحد موجّهات ‎@media ضمن قاعدةٍ من قواعد CSS، فستُعمّم صعودًا إلى أن تصل إلى أعلى مستوى في ملف الأنماط، وستضع جميع المٌحدّدات الموجودة في طريقها داخل القاعدة. وهذا سيُسهّل إضافة أنماطِ وسائط معيّنة دون الحاجة إلى تكرار المحددات أو كسر تسلسل ملف الأنماط. على سبيل المثال:

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}

ستُصرّف إلى:

.sidebar {
  width: 300px; }
  @media screen and (orientation: landscape) {
    .sidebar {
      width: 500px; } }

ويمكن أيضًا أن تتشعّب استعلامات ‎@media ‏(‎@media queries) داخل بعضها البعض. وحينها ستُجمع  الاستعلامات باستخدام المعامل and. على سبيل المثال:

@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
    }
  }
}

ستُصرّف إلى:

@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px; } }

وأخيرًا، يمكن أن تحتوي استعلامات ‎@media على تعبيرات SassScript (بما في ذلك المتغيرات والدوال والعوامل) بدلًا من أسماء وقيم الميزات (features). على سبيل المثال:

$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;

@media #{$media} and ($feature: $value) {
  .sidebar {
    width: 500px;
  }
}

ستُصرّف إلى:

@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .sidebar {
    width: 500px; } }

‎@extend

في بعض الحالات قد تحتاج إلى أن يكون لأحد الأصناف جميع أنماط صنفٍ آخرٍ إضافةٍ إلى أنماطه الخاصة. الطريقة الأكثر شيوعًا لفعل ذلك هي باستخدام الصنف العام والصنف الأكثر تحديدًا في شيفرة HTML. على سبيل المثال، لنفترض أنّ لدينا تصميمًا مُخصّصًا للأخطاء العادية وآخر للأخطاء الخطيرة. لفعل ذلك يمكننا أن نكتب في ملف HTML ما يلي:

<div class="error seriousError">
تنبيه، لقد تمت قرصنتك
</div>

ونكتب التنسيق هكذا:

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  border-width: 3px;
}

لسوء الحظ، فإنّ هذا يعني أنّ علينا أن نتذكر دائمًا استخدام المحدّد ‎.error مع ‎.seriousError. وهذا سيكون عبئًا على الصّيانة ويؤديَ إلى عيوب برمجية يصعب رصدها، ويمكن أن تؤثر سلبًا على مقروئية ملف HTML. سيُجنّبنا الموجّه ‎@extend هذه المشاكل بإخبار Sass بأنّ أحد المُحدّديْن سيرث أنماط الآخر. على سبيل المثال:

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

ستُصرّف إلى:

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd;
}

.seriousError {
  border-width: 3px;
}

وهذا يعني أنّ جميع الأنماط المعرّفة في المحدّد ‎.error ستُطبّق أيضًا على المحدّد ‎.seriousError بالإضافة إلى تلك الخاصة به، وفي الواقع، كل عناصر الصنف ‎.seriousError هي أيضًا عناصر من ‎.error. القواعد الأخرى التي تستخدم ‎.error ستُطبّق كذلك على ‎.seriousError. على سبيل المثال، إن خصّصنا أنماطًا للأخطاء الناجمة عن القراصنة:

.error.intrusion {
  background-image: url("/image/hacked.png");
}

فستكون الصورة الخلفية للعنصر <div class="seriousError intrusion"‎> هي hacked.png كذلك.

كيف تعمل القاعدة ‎@extend

تعمل القاعدة ‎@extend عبر إدراج المُحدّد المُمتد (على سبيل المثال ‎.seriousError) في كل مكانٍ في ملف الأنماط يظهر فيه المحدّد الذي مُدِّد (مثل ‎.error). وبالتالي فالمثال:

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.error.intrusion {
  background-image: url("/image/hacked.png");
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

سيُصرّف إلى:

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; }

.error.intrusion, .seriousError.intrusion {
  background-image: url("/image/hacked.png"); }

.seriousError {
  border-width: 3px; }

عند دمج المُحدّدات، فإنّ القاعدة ‎@extend ذكية بما فيه الكفاية لتتجنّب التكرار غير الضروري، فالتعبير ‎.seriousError.seriousError سيُترجم إلى ‎.seriousError. وإضافة إلى ذلك، لن تنتج مُحدّدات لا يمكن أن تُطابق أيَّ شيء، مثل ‎#main#footer.

توسعة المحدّدات المُركّبة

بالإضافة إلى مُحدِّدات الأصناف (Class selectors). يمكن توسعة أيِّ محدّد فيه عنصر واحد فقط، مثل ‎.special.cool أو a:hover أو ‎.user[href^="http://"]‎. على سبيل المثال:

.hoverlink {
  @extend a:hover;
}

كما هو الحال مع الأصناف، هذا يعني أنّ جميع الأنماط المُعرّفة لأجل a:hover ستُطبّق أيضًا على المحدّد ‎.hoverlink. على سبيل المثال:

.hoverlink {
  @extend a:hover;
}
a:hover {
  text-decoration: underline;
}

ستُصرّف إلى:

a:hover, .hoverlink {
  text-decoration: underline; }

كما هو الحال مع المُحدّد ‎.error.intrusion أعلاه، كلّ قاعدةٍ تستخدم a:hover ستعمل أيضًا على ‎.hoverlink حتى لو كان لها مُحددّات أخرى. على سبيل المثال:

.hoverlink {
  @extend a:hover;
}
.comment a.user:hover {
  font-weight: bold;
}

ستُصرّف إلى:

.comment a.user:hover, .comment .user.hoverlink {
  font-weight: bold; }

التوسعة المتعددة (Multiple Extends)

يمكن لمُحدّدٍ واحدٍ أن يُمدِّد عدة محدّدات. وهذا يعني أنه سيرث أنماط جميع المحدّدات التي مُدِّدت. على سبيل المثال:

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.attention {
  font-size: 3em;
  background-color: #ff0;
}
.seriousError {
  @extend .error;
  @extend .attention;
  border-width: 3px;
}

ستُصرّف إلى:

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; }

.attention, .seriousError {
  font-size: 3em;
  background-color: #ff0; }

.seriousError {
  border-width: 3px; }

في الواقع، كل عنصرٍ من الصنف ‎.seriousError سيكون أيضًا من الصنفين ‎.error و ‎.attention. وهكذا، ستكون الأولوية للأنماط المُعرفة آخرًا في الملف، أي أنّ لون الخلفية للمحدّد ‎.seriousError سيكون هو اللون ‎#ff0 وليس ‎#fdd، لأنّ ‎.attention معرفة بعد ‎.error.

يمكن أيضًا كتابة التوسعة المتعددة باستخدام قائمةٍ من المُحدّدات مفصولةٍ بفواصل. على سبيل المثال ‎@extend .error, .attention مَثَلُها كَمَثَلِ ‎.error; @extend .attention.

التوسعات المتسلسلة (Chaining Extends)

من الممكن توسعة مُحدّد مُمدّد من قبل. على سبيل المثال:

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
.criticalError {
  @extend .seriousError;
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%;
}

الآن، فأيّ شيءٍ له الصنف ‎.seriousError سيكون لديه أيضًا الصنف ‎.error وكل شيء له الصنف ‎.criticalError سيكون لديه أيضًا الصنفان ‎.seriousError و ‎.error، المثال أعلاه سيُصرّف إلى:

.error, .seriousError, .criticalError {
  border: 1px #f00;
  background-color: #fdd; }

.seriousError, .criticalError {
  border-width: 3px; }

.criticalError {
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%; }

المحدّدات المتتابعة (Selector Sequences)

لا يمكن حاليًا توسعة المحدّدات المتتابعة، مثل ‎.foo .bar أو ‎.foo + .bar. بيْد أنّه من الممكن أن تستخدم المحدداتُ المتشعبةُ القاعدةَ ‎@extend. على سبيل المثال:

#fake-links .link {
  @extend a;
}

a {
  color: blue;
  &:hover {
    text-decoration: underline;
  }
}

ستُصرّف إلى:

a, #fake-links .link {
  color: blue; }
  a:hover, #fake-links .link:hover {
    text-decoration: underline; }

دمج المحدّدات المتتابعة (Merging Selector Sequences)

أحيانًا تُوسّع المحدّدات المتتابعة محدّدًا يظهرُ في محدِّدٍ متتابع آخر. في هذه الحالة، وجب دمج المُحدّدين المتتابعين. على سبيل المثال:

#admin .tabbar a {
  font-weight: bold;
}
#demo .overview .fakelink {
  @extend a;
}

صحيحٌ أنّه من الممكن تقنيًا توليد كل المحددات التي يمكن أن تُطابق كلا المحدّدين المتتابعين، إلا أنّ ذلك سيجعل ملف الأنماط كبيرًا جدًّا. المثال أعلاه سيتطلب عشر محدّدات. ولكنّ Sass ستكتفي بتوليد المحدّدات التي يُحتمل أن تكون مفيدةً. عندما لا يكون بين المحدّدين المتتابعين المراد دمجهما أيُّ محدّدات مشتركةٍ، فسيُنشأ مُحدّدان جديدان: أحدهما يتضمّن المحدّد المتتابع الأول قبل الثاني، والآخر يتضمّن المحدّد المتتابع الثاني قبل الأوّل. على سبيل المثال:

#admin .tabbar a {
  font-weight: bold;
}
#demo .overview .fakelink {
  @extend a;
}

ستُصرّف إلى:

#admin .tabbar a,
#admin .tabbar #demo .overview .fakelink,
#demo .overview #admin .tabbar .fakelink {
  font-weight: bold; }

أمّا إن اشترك المحدّدان المتتابعان في بعض المحددات، فستُدمج تلك المحددات معًا مع تعديل الاختلافات (إن وُجدت). في هذا المثال، كلا المحدّدين المتتابعين يحتويان على المُعرّف ‎#admin، وبالتالي فإنّ المحددات الناتجة  ستدمج هذين المعرّفين:

#admin .tabbar a {
  font-weight: bold;
}
#admin .overview .fakelink {
  @extend a;
}

ستُصرّف إلى:

#admin .tabbar a,
#admin .tabbar .overview .fakelink,
#admin .overview .tabbar .fakelink {
  font-weight: bold; }

المحدّدات المُعدّة للتوسعة (‎@extend-Only Selectors)

في بعض الأحيان، قد تحتاج إلى كتابة أنماط لأجل أصناف معدّة للتوسعة وحسب، ولا تريد استخدامها مباشرةً في شيفرة HTML. هذا مفيدٌ بشكل خاص عندما تريد إنشاء مكتبةٍ لأجل Sass، حيث ستُوفّر أنماط ليُمدّدها المُستخدمون إن شاؤوا.

إن استخدمت أصنافًا عاديةً لأجل ذلك، فسينتهي بك الأمر بإنشاء ملف CSS كبير، مع إمكانية التداخل مع الأصناف الأخرى المستخدمة في شيفرة HTML. لهذا السبب تدعم Sass المُحددات النائبة (placeholder selector) (على سبيل المثال ‎%foo).

تبدو المحددات النائبة مثل محددات الأصناف والمعرّفات، باستثناء أنّ الرمزين # أو . يُستبدلان بالرمز ‎%. ويمكن استخدامها في أي مكان تُستخدم فيه الأصناف أو المعرّفات، كما تمنع مجموعات القواعد (rulesets) من أن تُدرج في ملف CSS. على سبيل المثال:

// لن تعرض هذه القاعدة بمفردها
#context a%extreme {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}

ومع ذلك، يمكن توسعة المحددات النائبة، تمامًا كمثل الأصناف والمُعرّفات (id). ستُنشأ المحددات الممدودة، بخلاف المحدد النائب الأساسي (base placeholder selector). على سبيل المثال:

.notice {
  @extend %extreme;
}

ستُصرّف إلى:

#context a.notice {
  color: blue;
  font-weight: bold;
  font-size: 2em; }

الراية ‎!optional

عند توسعة مُحددٍ، إن لم تعمل القاعدة ‎@extend فسيُطلق خطأٌ في العادة. على سبيل المثال، إن كتبت important {@extend .notice}‎، فسيحدث خطأٌ إن لم يكن هناك أيُّ محددٍ يحتوي ‎.notice. وسيحدث خطأ كذلك إن كان المحدد الوحيد الذي يحتوي ‎.notice هو h1.notice، لأنّ h1 تتداخل مع العنصر a، لذلك فلن يُنشأ أي محدّدٍ جديدٍ.

في بعض الأحيان، قد ترغب بالسماح للقاعدة ‎@extend بألا تنتج أيَّ محددات جديدةٍ. لفعل ذلك، يكفي أن تضيف الراية optional! بعد المُحدد. على سبيل المثال:

a.important {
  @extend .notice !optional;
}

استخدام ‎@extend داخل المُوجّهات

هناك بعض القيود على استخدام ‎@extend ضمن المُوجّهات من مثل ‎@media. فلغة Sass غير قادرة على جعل قواعد CSS الموجودة خارج الكتلة ‎@media تنطبق على المحددات الموجودة بداخلِها دون جعل ملف الأنماط يتضخّم نتيجة نسخ الأنماط الموجودة. وهذا يعني أنّه إن استخدمت ‎@extend داخل ‎@media (أو غيرها من مُوجّهات CSS)، فلن تمُدّ إلا المحددات التي تظهر داخل نفس كتلة الموجّه

على سبيل المثال، الشيفرة البرمجية التالية تعمل جيدًا:

@media print {
  .error {
    border: 1px #f00;
    background-color: #fdd;
  }
  .seriousError {
    @extend .error;
    border-width: 3px;
  }
}

ولكنّ هذا خطأ:

.error {
  border: 1px #f00;
  background-color: #fdd;
}

@media print {
  .seriousError {
    // INVALID EXTEND: .error is used outside of the "@media print" directive
    @extend .error;
    border-width: 3px;
  }
}

نأمل أن تُدعم ‎@extend افتراضيًا في المتصفحات مستقبلًا، وهو ما سيسمح باستخدامها في ‎ @media وغيرها من المُوجّهات.

‎الموجّه ‎@at-root

ينقل ‎الموجّه ‎@at-root قاعدةً أو أكثر إلى مستوى جذر المستند، ويمنعها من أن تتشعّب داخل المحددات الأم. ويمكن أن تستخدم إمّا مع محددٍ مضمّنٍ (inline selector) واحدٍ، مثل:

.parent {
  ...
  @at-root .child { ... }
}

والذي سيُنتج:

.parent { ... }
.child { ... }

أو يمكن استخدامها مع كتلة تحتوي عدة مُحدّدات، مثل:

.parent {
  ...
  @at-root {
    .child1 { ... }
    .child2 { ... }
  }
  .step-child { ... }
}

والتي ستُنتج ما يلي:

.parent { ... }
.child1 { ... }
.child2 { ... }
.parent .step-child { ... }

‎@at-root (without: …)‎ و ‎@at-root (with: ...)‎

افتراضيًا، تُستخدم ‎@at-root لإقصاء المُحدّدات وحسب. بيْد أنّه يمكن أيضًا استخدامها‎ للخروج من المُوجّهات المتشعّبة مثل ‎@media. على سبيل المثال:

@media print {
  .page {
    width: 8in;
    @at-root (without: media) {
      color: red;
    }
  }
}

ستُنتِج:

@media print {
  .page {
    width: 8in;
  }
}
.page {
  color: red;
}

يمكنك استخدام ‎@at-root (without: …)‎ للخروج من أيّ مُوجّه. كما يمكنك الخروج من عدة مُوجّهات مفصولة بمسافات بيضاء، فمثلًا ‎@at-root (without: media supports)‎ ستخرج المحدّد خارج الاستعلامَين ‎@media و ‎@supports.

يمكنك تمرير قيمتين خاصتين إلى ‎@at-root. وهما، "rule" التي تشير إلى قواعد CSS العادية. فالقاعدة ‎@at-root (without: rule)‎‎ مثلها كمثلِ ‎@at-root بدون أيِّ استعلام. أما ‎@at-root (without: all)‎‎ فتعني أنّ الأنماط يجب أن تُنقل خارج كل موجّهات وقواعد CSS.

إذا كنت ترغب في تحديد أيّ الموجّهات أو القواعد ينبغي أن تُشمل، بدلًا من تلك التي ينبغي أن تُستبعد، فيمكنك استخدام with بدلًا من without. على سبيل المثال، ستنقل ‎@at-root (with: rule)‎‎ المُحدّد خارج كل الموجّهات، ولكن ستحافظ على قواعد CSS.

‎@debug

يطبع المُوجّه ‎@debug قيمة تعبير من تعابير SassScript إلى مجرى الخطأ القياسي (standard error stream). وهو مفيدٌ لتنقيح ملفات Sass التي تتضمّن أكواد SassScript معقّدةً. على سبيل المثال:

@debug 10em + 12em;

المُخرجات ستكون:

Line 1 DEBUG: 22em

‎@warn

يطبع المُوجّه ‎‎@warn قيمة تعبير من تعابير SassScript إلى مجرى الخطأ القياسي. وهو مفيدٌ للمكتبات التي تحتاج إلى تحذير المستخدمين من إهمال بعض الخصائص في المكتبة (deprecations) أو التعافي من الأخطاء الصغيرة في استخدام المخاليط (mixins). هناك فرقان رئيسيان بين ‎‎@warn و ‎@debug:

  1. يمكنك تعطيل التحذيرات من سطر الأوامر بواسطة الخيار ‎--quiet أو الخيار ‎:quiet.
  2. سيُطبع أثرٌ لملف الأنماط (stylesheet trace) إلى جانب الرسالة حتّى يرى المستخدم الذي حُذِّر مكمن الخطأ.

مثال توضيحيّ:

@mixin adjust-location($x, $y) {
  @if unitless($x) {
    @warn "Assuming #{$x} to be in pixels";
    $x: 1px * $x;
  }
  @if unitless($y) {
    @warn "Assuming #{$y} to be in pixels";
    $y: 1px * $y;
  }
  position: relative; left: $x; top: $y;
}

‎@error

يرمي الموجّه ‎@error قيمةَ تعبيرٍ من تعابير SassScript باعتباره خطأً فادحًا (fatal error)، بما في ذلك أثر الخطأ (stack trace). هذا الموجّه مفيدٌ لأجل التحقق من وسائط (arguments) المخاليط (mixins) والدوال. على سبيل المثال:

@mixin adjust-location($x, $y) {
  @if unitless($x) {
    @error "$x may not be unitless, was #{$x}.";
  }
  @if unitless($y) {
    @error "$y may not be unitless, was #{$y}.";
  }
  position: relative; left: $x; top: $y;
}

لا توجد حاليًا أي وسيلة لمعالجة الأخطاء في Sass.

مصادر

مجلوبة من "https://wiki.hsoub.com/index.php?title=Sass/@_rules&oldid=6045"