آموزش استفاده از دستور debug در Sass

آموزش Sass – استفاده از دستور @debug

دستور @debug خطاها را شناسایی کرده و مقادیر دستورهای SassScript را در خروجی نمایش می دهد (standard error output stream) و در اشکال یابی و خطا زدایی کد به توسعه دهنده کمک می نماید.

دستور مزبور به ویژه برای debug کردن فایل های Sass که دستورات و عملیات پیچیده ی SassScript را شامل می شوند، به کار می آید. برای مثال:

@debug 10em + 12em;

خروجی زیر را تولید می کند:

Line 1 DEBUG: 22em

مثال کاربردی

در زیر فایل stylesheet که با پسوند .scss ذخیره شده و مشابه فایل css می باشد را مشاهده می کنید.

debug.scss
$font-sizes: 10px + 20px;
$style: (
   color: #bdc3c7
);
.container {
   @debug $style;
   @debug $font-sizes;
}

می توانید با فراخوانی دستور زیر به SASS دستور دهید که بر روی محتوای فایل مورد نظر نظارت داشته و هنگامی که تغییری در محتوای فایل SASS رخ داد، CSS متناظر را نیز بروز رسانی کند.

sass --watch C:\ruby\lib\sass\debug.scss:debug.css

با اجرای دستور بالا، فایلی به نام debug.css ایجاد می شود. حال هر زمان که فایل SCSS تغییر می کند، فایل debug.css نیز به صورت خودکار بروز آوری می شود.

خروجی

می توانید با طی کردن مراحل زیر، خروجی را مشاهده نمایید:

• کد مورد نظر را در debug.scss ذخیره نمایید.
• اکنون دستور sass --watch C:\ruby\lib\sass\debug.scss:debug.css را در پنجره ی فرمان اجرا نمایید.