دوره جامع و پروژه‌محور طراحی وب با تمرکز روی JavaScript، Ajax و API! با طراحی ریسپانسیو و پروژه‌های حرفه‌ای مثل دیجی‌کالا و شمرون کباب مهارتت رو حرفه‌ای کن!
مشاهده بیشتر
با دوره رایگان "ساخت فریمورک CSS با Sass" حرفه‌ای شو! دیگه وقتشه کدهای شلوغ و تکراری رو کنار بذاری و فریمورک CSS اختصاصی خودتو بسازی. تو این دوره، از صفر تا صد Sass رو یاد می‌گیری و یاد می‌گیری چطور پروژه‌هات رو سریع‌تر و شگفت‌انگیزتر کنی!
مشاهده بیشترمشخصات مقاله
-
775
-
0.0
-
2159
-
0
-
0
آموزش استفاده از دستور debug در Sass
آموزش Sass – استفاده از دستور @debug
دستور @debug خطاها را شناسایی کرده و مقادیر دستورهای SassScript را در خروجی نمایش می دهد (standard error output stream) و در اشکال یابی و خطا زدایی کد به توسعه دهنده کمک می نماید.
دستور مزبور به ویژه برای debug کردن فایل های Sass که دستورات و عملیات پیچیده ی SassScript را شامل می شوند، به کار می آید. برای مثال:
1 | @debug 10em + 12em;<button></button> |
خروجی زیر را تولید می کند:
1 | Line 1 DEBUG: 22em<button></button> |
در زیر فایل stylesheet که با پسوند .scss ذخیره شده و مشابه فایل css می باشد را مشاهده می کنید.
1 2 3 4 5 6 7 8 9 10 | debug.scss$font-sizes: 10px + 20px;$style: ( color: #bdc3c7);.container { @debug $style; @debug $font-sizes;}<button></button> |
می توانید با فراخوانی دستور زیر به SASS دستور دهید که بر روی محتوای فایل مورد نظر نظارت داشته و هنگامی که تغییری در محتوای فایل SASS رخ داد، CSS متناظر را نیز بروز رسانی کند.
1 | sass --watch C:\ruby\lib\sass\debug.scss:debug.css<button></button> |
با اجرای دستور بالا، فایلی به نام debug.css ایجاد می شود. حال هر زمان که فایل SCSS تغییر می کند، فایل debug.css نیز به صورت خودکار بروز آوری می شود.
خروجی
می توانید با طی کردن مراحل زیر، خروجی را مشاهده نمایید:
- کد مورد نظر را در debug.scss ذخیره نمایید.
- اکنون دستور sass --watch C:\ruby\lib\sass\debug.scss:debug.css را در پنجره ی فرمان اجرا نمایید.
