پرینت

وقتی Sass به کمک CSS می آید

ساس (Syntactically Awesome Stylesheets) یک زبان اسکریپتی برای سبک دهی می باشد.
این زبان توسط Hampton Catlin طراحی و توسط Nathan Weizenbaum توسعه یافت که در نهایت با کمک Chris Eppstein یک زبان اسکریپتی با فایل های .Sass شد.
در واقع Sass یک ابر زبان (Metalanguage) می باشد که به سی اس اس تفسیر می شود.

یادگیری Sass نیازمند دانش سی اس اس می باشد.

Sass - ساس

تعریف متغیر
یکی از امکانات بسیار جالب Sass اینکه می توانید ابتدا متغییر تعریف کنید و سپس از آن متغییر در استایل هاتون استفاده کنید.
برای تعریف یک متغییر در Sass از $ استفاده می نمایید.
برای مثال:
$margin1: 1px 2px 4px 0px;
حالا هر جا که در بین استایل ها از $margin1 استفاده کنید معادل مقدار بالاست.
مانند تصویر زیر:

Sass Variable

تو در تویی
برای مثال اگر بخواهید یک آیتم که داخل یک آیتم دیگری هست با استایل مقدار دهی کنید لازم نیست مجددا برای آن یک کلاس بنویسید.
می توان داخل همان کلاس به صورت تو در تویی (Nesting) کلاس دیگری نوشت.

Sass Nesting

میکس
میکس هم تقریبا شبیه تعریف متغییر است با این تفاوت که می توان قسمتی از کد را روی قسمت دیگر از کد CSS میکس کرد.
مانند یک دی جی که یک تیکه از آهنگ را می تواند در آهنگ های دیگری میکس کند.
این قابلیت خیلی در کد نویسی تمیز به طراحان وب یاری خواهند رساند.
هیچ محدویتی در include میکس ها وجود ندارد و می توان میکس های مختلف و خردی تعریف کرد و زمان include در کلاس مورد نظر از چند میکس استفاده کرد.

Sass Mix
آرگومان
همینطور در میکس کردن می توانید از آرگومان ها استفاده نمایید.
یعنی قسمتی از کد میکس می شود و قسمت دیگر برای مقدار دهی های متفاوت تنظیم می شود.
در تصویر زیر مقدار margin-left را آرگومان می گذاریم تا بر حسب شرایط در زمان میکس استایل متفاوت باشد.

Sass Array
وراثت
در سی اس اس 3 از DOM پشتیبانی میشه اما خبری از وراثت (Selector inheritance) نیست.
یعنی می توان از مقادیر یک کلاس در کلاس دیگر نیز استفاده کرد.
تنها کافیست از @extend + نام کلاس مورد نظر استفاده نمایید.

Sass Dom

مولف: میثم ضابط - خرداد 91

ارسال دیدگاه
SecImgSes



طراحی سایت ضابط ۱۳۸۴ - ۱۳۹۷