استفاده از Sass برای ساده کردن کدهای css در طراحی صفحات وب

[fariba.k]

استفاده از Sass برای ساده کردن کدهای css در طراحی صفحات وب




Sass مخفف syntactically awesome stylesheet است که یک زبان اسکریپت نویسی است که بهcss تفسیر میشود و دارای دو syntax است . در syntax اول که قدیمی تر است و به عنوان sassشناخته شده است از فرورفتگی ها برای نشان دادن بلاک مخصوص خصوصیات سلکتور انتخاب شده استفاده می کنیم و برای نشان دادن خط جدید از ; استفاده نمی شود بلکه از خط جدید تنها برای نشان دادن خط جدید استفاده می شود .

Syntax بعدی نیز که به scss شناخته شده است نیز مانند همان css عادی است یعنی دقیقا آکولاد ها و ; به همان صورت که در css عادی است استفاده می شود.
Sass این امکان را به کاربران می دهد که بتوانند از ویژگی های تابع و … عملکرد و متغیر در کد هایcss استفاده کنیم. با این کار نوشتن کدهای css بسیار راحت تر و سریع تر می شود .

 

[fariba.k]

استفاده از متغیرها در sass


امکان تعریف متغیرها در sass یکی از ویژگی های بسیار خوب و کاربردی است که حجم کدهای cssرا کاهش می دهد. فرض کنید تکه کدی است که در قسمت های مختلفی از css شما تکرار می شود در این صورت می توانید آن را به صورت متغیری تعریف کنید و در جاهای مختلف تنها از نام آن متغیر استفاده کنید .
بدین صورت می توانید در صورت نیاز مقدار ان متغیر را نیز به راحتی تغییر دهید و تغییر و بروز رسانی کدها در این صورت بسیار راحت تر می شود. به عنوان مثال می توانید نام رنگی را که در قسمت های مختلفی از وب سایت خود استفاده می کنید را در داخل متغیر قرار دهید و به راحتی از این نام در قسمت های مختلف کدهای css خود استفاده کنید.
به مثال زیر توجه کنید :
مثال شماره یک از تعریف متغیر با سینتکس scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
font : 100% $font-stack;
color : $primary-color;
}

مثال بالا با استفاده از سینتکس sass
$font-stack: Helvetica, sans-serif
$primary-color: #333

body
font: 100% $font-stack
color: $primary-color

بعد از پردازش sass ، مقادیر تعریف شده برای متغیرها در css قرار می گیرد و در نهایت خروجیcss تولید می شود .
قبل از شروع به کار با sass باید syntax مورد نظر خود برای نوشتن کدها را انتخاب کنید. اگر می خواهید با sass syntax کدهای خود را بنویسید پس فایلی با این پسوند ایجاد کنید و کدهای خود را در داخل آن بنویسید و در صورتی هم که می خواهید کدهای خود را با scss syntax بنویسید پس فایل های خود را در داخل فایلی با همین پسوند بنویسید.
برای پیوست کردن فایل های خود به صفحه نیز باید از برنامه هایی استفاده کنید که فایل های شما را کامپایل و به فایل Css تبدیل کنند. می توانید از برنامه هایی مانند koala استفاده کنید.
مثال ساده دیگری در اینجا داریم که با استفاده ازsass می توانید کدهای خود را خلاصه تر و خوانا تر کنید :
فرض کنید کدهای Html زیر را داریم و می خواهیم به آنها استایل دهیم :

۱ ۲ ۳ ۴ ۵ ۶ ۷

<nav> <ul> <li></li> <li></li> <li></li> </ul> </nav>

با استفاده از سینتکس scss استایل ما به شکل زیر خواهد بود :
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}

li { display: inline-block; }
}
که این کد نهایتا بعد از کامپایل به شکل ساده زیر در می آید :

nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}

li { display: inline-block; }
}
استفاده از & در کدهای sass


اگر از این علامت در استایل استفاده کنیم به نزدیکترین سلکتور والدش اشاره می کند و استایل مورد نظر را برروی ان اعمال می کند :
#main {
color: black;
a {
font-weight: bold;
&:hover { color: red; }
}
}
در واقع استایل مورد نظر برای هاور را برروی تگ a اعمال می کند.

می توانیم از sass برای کوتاه کردن خاصیت های طولانی در css نیز استفاده کنیم به عنوان مثال خاصیت هایی مانند font-family، font-size ، و…
به مثال زیر توجه کنید :
.funky {
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}
و یا برای border :
.line {
border: {
style: solid;
top: {
width: 2px;
color: #555;
}
bottom: {
width: 3px;
color: #999;
}
}
}