آموزش Sass

با کمک sass میتوان کدهای CSS را طوری بنویسید که بتوان آنها را در پروژه های بعدی نیز استفاده کنید. به عبارت دیگر، به کمک sass نیازی به دوباره کاری نیست.

شما میتوانید CSS های خود را در فایل های مجزا بنویسید و همه را درون یک فایل اضافه کنید.

برای مثال شما میتوانید یک فایل برای normalize داشته باشید، یک فایل برای variables و غیره.

همچنین میتوانید هر بخش را بصورت ماژول درنظر بگیرید و CSS های مربوط به آن ماژول را در فایلی مستقل بنویسید. مثال navigation سایت را یک ماژول درنظر بگیرید و CSS های مربوط به آن را در فایل navigation.scss بنویسید.

import کردن فایل ها در sass

در sass نیز همانند CSS از دیرکتیو @import استفاده میشود.

دیرکتیو @import به شما این امکان را میدهد تا محتوای یک فایل را در فایل دیگر بیاورید.

دیرکتیو @import پرفورمنس پایینی دارد؛ زیرا هربار که آنرا صدا میزنید یک HTTP request اضافی ایجاد میکند. اما در sass، دیرکتیو @import یک فایل را درون CSS اضافه میکند و بنابراین هیچ درخواست HTTP اضافه ای در کار نخواهد بود.

 
@import filename;
 

لازم به ذکر است که شما نیاز ندارید پسوند فایل را مشخص کنید. sass بصورت خودکار میداند شما فایل .sass یا .scss وارد کرده اید. همچنین شما میتوانید فایل های CSS وارد کنید. دیرکتیو @import میتواند فایل ها، متغیرها یا میکسین های تعریف شده را درون فایل اصلی بیاورد و از آن استفاده کند.

محدودیتی در import کردن فایل ها وجود ندارد:

 
@import "variables";
@import "colors";
@import "reset";
 

partialها در sass

بصورت پیش فرض، sass تمام فایل ها .scss را مستقیما کامپایل میکند. اما زمانی که شما یک فایل import میکنید دیگر نیاز ندارید تا آن فایل مستقیما کامپایل شود.

sass برای این کار مکانیسمی دارد: اگر اسم فایل شما با underscore شروع شود، sass آن فایل را کامپایل نمیکند. در sass به فایل هایی که با underscore شروع میشوند Partial میگویند.

 
_filename;
 

هنگام import کردن یک فایل partial شما میتوانید underscore را حذف کنید. sass متوجه میشود که باید _filename.scss را import کند.