متغییر ها در Sass

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

Sass:

$font-stack: Helvetica, sans-serif

$primary-color: #333

body

font: 100% $font-stack

color: $primary-color

پس از پردازش Sass متغییر های $font-stack و $primary-color پردازش گردیده و به کد های Css تبدیل می نماید.

body {

font: 100% Helvetica, sans-serif;

color: #333;

}

چینش کدها درSass
یکی‌از خصوصیت هایی که سبب ساز می‌شود یوزرها بخواهند، بجای تایپ کردن Css کدهای استایل دهی را با زبانی مانند Sass بنویسند آسانی چینش کد ها در Sass میباشد. هنگامیکه کد های Html وب سایت را می نویسید. یک ساختار درختی از کد ها ساخت‌و‌ساز می‌کنید. در css نمی اقتدار این ساختار درختی را تشکیل داد. Sass به شما اذن می دهد که ساختار درختی پوشه Html را در استایل دهی نیز بکار ببرید. بدین ترتیب تایپ کردن کدهای استایل دهی بسیار بی آلایش گردد. یک نمونه بی آلایش از کد نویسی با محافظت ساختار درختی در Sass را در نمونه پایین مشاهده می‌کنید.


SASS :

nav

ul

margin: 0

padding: 0

list-style: none

li

display: inline-block

a

display: block

padding: 6px 12px

text-decoration: none

همانگونه که مشاهده می‌کنید تگ های ul,li,a در پایین شاخصه تگ nav قرار دارا هستند. این کدها یاری می نمایند که استایل خوانایی بیشتری داشته باشد. ترجمه این پوشه به Css به‌این شکل خواهد بود.

nav ul {

margin: 0;

padding: 0;

list-style: none;

}

nav li {

display: inline-block;

}

nav a {

display: block;

padding: 6px 12px;

text-decoration: none;

}

ساخت استایل های ماژولار در Sass
در طراحی سایت امروزه ما با نرم‌افزار های مدیر محتوا ساخت سایت را اعمال می دهیم، که سبب ساز می شود تمامی چیز بصورت مستقل و ماژولار پیاده سازی گردد. در Sass شما می‌توانید تکه ای از کدها را در فولدر دیگری قرار داده و آنان را با کد @import فراخوانی فرمائید. در Css کد @import یک درخواست Http ارسال می نماید. البته در Sass کدهای پوشه وارداتی، به فولدر الصاق می‌شوند و بصورت یک پوشه Css در اینترنت به اکران درمی آیند. نمونه تحت پوشه Rest.Scss را وارد پوشه base.Scss کرده ایم:

// _reset.sass

html,

body,

ul,

ol

margin: 0

padding: 0

// base.sass

@import reset

body

font: 100% Helvetica, sans-serif

background-color: #efefef

همان گونه که مشاهده میکنید در Sass نیازی به گزینش فرمت فولدر ورودی وجود ندارد خویش Sass برای ترجمه و یا این که عدم ترجمه پوشه وارداتی می‌تواند تصمیم گیری نماید. سود کد های بالا یک فولدر Css بصورت تحت خواهد بود.

html, body, ul, ol {

margin: 0;

padding: 0;

}

body {

font: 100% Helvetica, sans-serif;

background-color: #efefef;

}