آموزش Sass

آموزش طراحی وب سایت با استفاده از 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 کند.

نوشتن دیدگاه

جستجو در سایت

  • مقدمه +

    sass یک پیش پردازنده برای CSS است که از تکرار کدهای CSS جلوگیری میکند.

    Read More

  • نصب Sass +

    sass پیش پردازنده CSS است که میتوان استایل شیت را شخصی سازی و مدیریت کند و میتواند بر روی تمامی

    Read More

  • Sass - متغیرها +

    به کمک متغیر میتوان اطلاعات را ذخیره و استفاده کرد.

    Read More

  • Sass - قوانین تو در تو - Nested Rules +

    sass به شما این امکان را میدهد تا از ویژگی های یک کلاس در یک کلاس دیگر استفاده کنید.

    Read More

  • Sass - Importe - Partials +

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

    Read More

  • Sass - Mixins - Include +

    شما با دیرکتیو @mixin میتوانید کدهای CSS خود را در هرجای وب سایت استفاده کنید. شما با دیرکتیو @include میتوانید

    Read More

  • Sass - extend +

    با استفاده از دیرکتیو @extend میتوان پراپرتی های CSS را با دیگر سلکتورها به اشتراک گذاشت.

    Read More

  • 1

افراد آنلاین

ما 491 مهمان و بدون عضو آنلاین داریم