آموزش Sass و ویژگی های آن

ویژگی sass که باید امتجان کنید :

متغیر های محلی و عمومی در sass

Sass به طراحان وب  اجازه می دهد متغیرهای محلی و عمومی را در کد خود تعریف کنند  و انها را در صورت نیاز override کنند. یکی از کاربردهای معمول متغیرهای عمومی در sass برای ذخیره کد رنگی است . بدین صورت که در بالای کدهای sass خود متغیری را تعریف می کنید و از این متغیر در کد های خود استفاده می کنید و حتی می توانید این رنگ را تغییر دهید . یا قسمت هایی از استایل ها که تکرار می شود را در متغیری عمومی ذخیره کنید و بعد ها از ان استفاده کنید .

 به مثال زیر توجه کنید :

//defining a global success color

$color_success: #090;

 

.state_success {

  color: lighten($color_success, 50%);

  background-color: $color_success;

}

که تکه کد sass بالا کد css زیر را تولید خواهد کرد :

.state_success {

  color: #9f9;

  background-color: #090;

}

متغیر $state-color یک متغیر عمومی است. به این دلیل که این متغیر خارج از محدوده سلکتورها تعریف شده است  و به همین دلیل این متغیرمی تواند در سلکتورهای مختلف استفاد شود . به این نکته توجه کنید که یک ثابت نیست و می تواند در بلوک های مختلف تغییر داده شود. به مثال زیر توجه کنید که چگونه متغیری هم نام متغیر عمومی در بالای sass تعریف می شود و مقدار جدیدی را به این متغیر محلی نسبت داده می شود و در این صورت مقدار متغیر محلی به متغیر عمومی ارجحیت خواهد داشت .

.state_success_particular {

  //overriding the global success color locally

  $color_success: #900;

  color: lighten($color_success, 50%);

  background-color: $color_success;

}

و کد css تولید شده از sass بالا به شکل زیر خواهد بود.

.state_success_particular {

  color: #f99;

  background-color: #900;

}

در مثال بالا می بینید که مقدار متغیر عمومی در بلوک به صورت محلی Override  شده است که این تغییرات فقط برروی این بلوک اعمال خواهد شد و بلوک های دیگر با مقدار متغیر عمومی تعریف شده  کار خواهند کرد.

عملیات import  در sass

در css ما گزینه ای به نام import داریم که این امکان را می دهد تا فایل  css را به بخش های کوچک تری تقسیم کنید و  در صورت نیاز آنها را در Css خود Import کنید . ولی برای import فایل css جدا باید درخواست http دیگری ساخته می شد. Sass هم عملیات Import  را دارد ولی با این تفاوت که برای importing نیازی به ساخت درخواست Http ندارد و همه فایل هایی که به داخل فایل اصلی Import شده است را به همراه فایل اصلی ترکیب می کند و در نهایت بعد از کامپایل یک فایل css را در مرورگر لود خواهد کرد .

به عنوان مثال در داخل فایل فایل base فایل reset را Import  می کنیم . دراین صورت محتوای این دو فایل با  بدون نیاز به درخواست http  بعد از کامپایل داخل یک فایل لود می شود :

/* base.scss */

 

@import 'reset';

 

body {

  font-size: 100% Helvetica, sans-serif;

  background-color: #efefef;

}

همانطور که توجه می کنید نیازی نیست  پسوند فایل scss را اضافه کنید .

 

عملیات   extend  یا وراثت در sass

Sass این امکان را به طراحان وب می دهد که بتوانند استایل های نوشته شده را برای سلکتور دیگری  را برای سلکتور مورد نظر خود اضافه کنند. دقیقا همان چیزی که به عنوان وراثت در برنامه نویسی وجود دارد. و حجم کدهای css را بسیار کم می کند .  برای این کار از دستور @extend selector-name استفاده  می کنند :

به مثال زیر توجه کنید :

.prominent{

  font-style: bold;

  font-size: 1.5rem;

{

 

.important}

  color: #900;

  @extend .prominent;

{

 

.notice}

  color: #090;

  @extend .prominent;

{

برای اینکه کلاس های Important  و notice  هم بتوانند از استایل مورد نظر prominent استفاده کنند در داخل بلوک های مورد نظر از دستور @extend استفاده کردیم :ه در نهایت فایل خروجی css بعد از کامپایل به شکل زیر خواهد بود :

.prominent, .important, .notice {

  font-style: bold;

  font-size: 1.5rem;

}

 

.important {

  color: #900;

}

 

.notice {

  color: #090;

}