SASS به ما کمک می کند تا فایل های پیچیده CSS را فشرده کنیم و به خوبی به آن ها ساختار دهیم. همچنین کمک می کند تا کد تکراری نزنیم و آن ها را حذف می کند البته اگر از SASS استفاده می کنید.

SASS چیست؟

SASS مخفف Syntactically Awesome Style Sheet است. زمانی که Stylesheet هایتان در حال پیچیده شدن و بزرگ تر شدن هستند،اینجا جایی است که SASS به کمکتان می آید و این مشکلات را حل می کند. SASS یک چارچوب (Framework) است که به توسعه دهندگان کمک می کند کد CSS شان را کاهش دهند.

چرا SASS؟

SASS به ما کمک می کند تا فایل های پیچیده CSS را فشرده کنیم و به خوبی به آن ها ساختار دهیم. همچنین کمک می کند تا کد تکراری نزنیم و آن ها را حذف می کند البته اگر از SASS استفاده می کنید.

موارد لازم برای آغاز SASS

ابتدا باید مقدمات کار با CSS را بدانید

دانش HTML را نیز داشته باشید

SASS عموما از دو نوع پشتیبانی می کند. آن ها SCSS و SASS هستند. تفاوت اصلی در براکت ها {} است و همچنین semicolon. جدول زیر را مشاهده کنید و تفاوت قواعد گرامری این دو نوع را مشاهده کنید.

برای اینکه کد های فشرده داشته باشید، از پیش پردازش کدهایتان مایل به استفاده هستید، SASS از ویژگی هایی که در پایین گفته می شود پشتیبانی می کند:

1.

اولین چیزی که در ذهنتان می آید این است که درباره متغیر ها در C# یا جاوا اسکریپت و یا هر زبان برنامه نویسی دیگری، شنیده بودم! به همین خاطر ما از متغیرها برای تخصیص مقادیر CSS ای استفاده می کنیم. به عنوان مثال شما می توانید مقادیر رنگ ها و رشته رنگ ها و اعداد را در متغیر هایتان بریزید.

شما می توانید با استفاده از نماد $ یک متغیر تعریف کنید.

مثال: $body-color: red;

2.

XML / HTML یک وراثت عالی در کد نویسی دارند، جایی که کد ها تو در تو می شوند و باعث می شود تا ظاهر بهتری کدهایتان بگیرند. همچنین نگهداری آن نیز ساده می شود.

مثال زیر را نگاه کنید:

3. زمانی که کد های CSS بزرگ تر می شود و زمانی که شما چیزی پیدا می کنید، با مشکلات زیادی مواجه می شوید. گاهی وقت ها، واقعا آزار دهنده می شوند و دست SASS درد نکنه که کار ما را ساده تر کرده است. شما به راحتی می توانید کدهایتان را ماژولار کنید و جایی که می خواهید از آن ها استفاده کنید.

فایل های ماژولار آیا کامپایل می شوند؟

خیر، به وسیله دیدن نماد "_" در جلوی نام فایل، کامپایلر از کامپایل آن ها منصرف می شود و آن ها را نادیده می گیرد و کد CSS تولید نمی کند.

Comment و import کردن:

SASS از توضیحات چند خطی بصورت (/* */) و تک خطی بصورت (//). زمانی که فایل کامپایل می شود یک نظر چند خطی می سازد سپس کد های کامپایل شده را در CSS قرار می دهد.

مثال – Import “_mainmenu”

Mixins

Mixin ها به شما اجازه می دهند تا قابلیت استفاده مجدد از پروژه را نیز داشته باشید. شما حتی می توانید مقادیر را به Mixin ها عبور دهد.

گسترش / وراثت

@extend به شما کمک می کند تا قابلیت استفاده مجدد از خواص CSS از انتخاب گر به یک انتخاب گر دیگر داشته باشید. همچنین کمک می کند که SASS باعث شود تا کد تکراری نزنید.

آموزش سی شارپ