Sass/@ rules

تدعم 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، فستُعمّم صعودًا إلى أن تصل إلى أعلى مستوى في ملف الأنماط، وستضع جميع المٌحدّدات الموجودة في طريقها داخل القاعدة. هذا سيُسهّل إضافة أنماطِ وسائط معيّنة (media-specific styles) دون الحاجة إلى تكرار المحدِّدات أو كسر تسلسل ملف الأنماط. انظر مثلًا الشيفرة التالية:

.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 مماثل تمامًا لاستعمال @extend .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 إلى مجرى الخطأ القياسي. هذا مفيدٌ للمكتبات التي تحتاج إلى تحذير المستخدمين من إهمال بعض الخصائص في المكتبة أو التعافي من الأخطاء الصغيرة في استخدام المخاليط (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.

مصادر

• قسم ‎@-Rules and Directives من توثيق Sass الرسمي.