Sass چیست و چه کاربردهایی دارد؟

يكشنبه, ۳۰ تیر ۱۳۹۸، ۰۳:۵۵ ب.ظ

Sass مخفف کلمات Syntactically Awesome Stylesheets است. Sass را می توان به عنوان یک افزونه برای css در نظر گرفت که کار با استایل ها را برای ما بسیار ساده می کند. به خصوص زمانی که فایل های css شما بسیار بزرگ و پیچیده باشند. Sass مدیریت و نگهداری استایل های css را ساده‌تر می‌کند. به لطف وجود متغیرها، mixins ها، nesting ها و وراثت در این پیش پردازنده، کد های نوشته شده کاملاً سازماندهی می شود.

sass

این کار باعث می شود کار خود را سریعتر پیش ببریم. به خاطر داشته باشید زمانی که در Sass کدهای خود را مینویسیم، مرورگر ها نمی توانند این کدها را درک کنند و دلیل این عدم درک هم این است که کدهای نوشته شده به زبان css نیستند.

پس ما به یک کامپایلر نیاز داریم تا کد های نوشته شده در Sass را به css تبدیل کنیم. نرم افزار های زیادی برای این کار وجود دارند که بعضی از آنها عبارتند از :

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

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

اگر شما در css مبتدی هستید پیشنهاد می کنم فعلا از رفتن به سراغ پیش پردازنده ها صرف نظر کنید.

چیزی که برای ورود به این دنیای جذاب نیاز دارید این است که درک کاملی از موارد پایه ای و کدهای css داشته باشید. Sass یکی از محبوب‌ترین پیش پردازنده های css است اما Sass تنها پیش پردازنده موجود نیست. موارد دیگری نیز مانند Less و Stylus وجود دارند.

چرا بهتر است از Sass استفاده کنیم؟

اگر شما با دوستان خود که در زمینه front-end کار می‌کنند، صحبت کرده باشید ممکن است آنها به شما گفته باشند html و css زبان هایی با نقطه ضعف های بزرگی هستند. دلیل آن هم این است که کدهای آنها از پیش تعریف شده است و بارها تکرار می‌شود و شما مجبورید کد های تکراری بنویسید.

اگر شما با یک زبان برنامه نویسی واقعی کار کرده باشید حتما اطلاع دارید که در این زبان ها از موارد کاربردی همچون تعریف متغیر ها و توابع استفاده می شود. که می تواند در کد نویسی و سازماندهی کد ها به ما کمک بسیاری بکند. اینجاست که Sass می تواند بیشتر مشکلات و نقطه ضعف های css را برطرف کند.

در واقع Sass مکمل زبان css است. با استفاده از Sass می توان متغیر ها را تعریف کرد و حتی از مفاهیمی همچون وراثت در css استفاده نمود. این ویژگی ها می توانند برای یک طراح فوق العاده باشند.

چگونه از Sass استفاده کنیم؟

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

SCSS : استفاده از فایلی که دارای فرمت scss. است و با css هم بسیار سازگار است.
SASS : استفاده از فایلی که دارای فرمت sass. است. این مورد نیز با css سازگار است و سریع‌تر نوشته می‌شود.

در این مقاله از قاعده نوشتاری اول استفاده می کنیم.

متغیرها

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

در زیر متغیری به نام blue تعریف شده است. بعد از نام متغیر از علامت (:) استفاده کرده ایم. سپس بعد از علامت (:) هم میتوان مقدار متغیر را مشخص کرد. در انتها برای مشخص کردن خاتمه عبارت از علامت (;) استفاده کرده‌ایم.

$blue: #3498db;

اکنون بیایید ببینیم متغیر ها در عمل چگونه اند :

/*
// We define the variables.
*/
$blue: #3498db;
$red: #e74c3c;
$background: #34495e;
 
/*
// We apply the variables.
*/
body {
  background-color: $background;
}
 
h1 {
  color: $blue;
}
 
p {
  color: $red;
}

کدی که در بالا نوشته شده است به زبان Sass است که در css به شکل زیر کامپایل می شود :

body {
  background-color: #34495e;
}
 
h1 {
  color: #3498db;
}
 
p {
  color: #e74c3c;
}

روشی که در بالا به آن اشاره شد یکی از پایه ترین حالت هایی است که می توان از متغیرها در Sass استفاده نمود. شما می توانید کارهای بزرگ تر و پیچیده تری با استفاده از متغیرها انجام دهید. من از انجام این کارها صرف نظر می کنم زیرا که در این مقال نمی گنجد.

تودرتویی در Sass

Sass به شما اجازه می دهد از قواعد css برای تو در تویی استفاده کنید تو در تویی یک روش فوق العاده برای سازماندهی و ساختار دهی کدهای css است و به شما اجازه می دهد از تکرارهای غیرضروری پرهیز کنید. بگذارید در زیر نمونه ای از قدرت این ویژگی را به شما نشان دهم :

ul {
  list-style: none;
 
  li {
    padding: 10px;
    display: inline-block;
 
    a {
      text-decoration: none;
      font-size: 16px;
      color: #333;
    }
  }
}

پیشنهاد من به شما استفاده از حداکثر ۴ سطح تودرتویی است. این کار باعث می‌شود کد شما سادگی کد خود را همچنان حفظ کنید.

گسترش پذیری / وراثت

وراثت یکی از مفیدترین ویژگی های Sass است. با استفاده از گسترش پذیری می توانیم مجموعه ای از مشخصه های css را از یکی به دیگری منتقل کنیم. گسترش پذیری زمانی استفاده میشود که چندین عنصر دارای اشتراکاتی در مشخصه های css باشند. استفاده از گسترش پذیری به شدت در نوشتن کد های تکراری صرفه‌جویی می‌کند. در نمونه مثال زیر دو دکمه موردنظر فقط در مشخصه background-color تفاوت دارند :

$blue: #3498db;
$red: #e74c3c;
$white: #fff;
 
.btn {
  display: inline-block;
  padding: 6px 12px;
  font-size: 14px;
  text-align: center;
  border-radius: 4px;
  color: $white;
}
 
.btn-primary {
  @extend .btn;
  background-color: $blue;
}
 
.btn-secondary {
  @extend .btn;
  background-color: $red;
}

مثال بالا در css به شکل زیر کامپایل می‌شود :

.btn, .btn-primary, .btn-secondary {
  display: inline-block;
  padding: 6px 12px;
  font-size: 14px;
  text-align: center;
  border-radius: 4px;
  color: #fff;
}
 
.btn-primary {
  background-color: #3498db;
}
 
.btn-secondary {
  background-color: #e74c3c;
}

اکنون متوجه قدرت این ویژگی شدید؟ ویژگی جالبی که در مثال بالا وجود دارد این است که Sass انتخاب کننده ها را با هم ترکیب کرده است، در حالی که می‌توانست مشخصه ها را تکرار کند این کار حتی در اندازه حجم فایل کامپایل شده هم تاثیرگذار است.

Mixins

Mixins ها یکی دیگر از ویژگی‌های فوق‌العاده Sass هستند. به صورت پایه ای یک Mixins به شما اجازه می دهد تعاریفی از سی اس اس را که می خواهید از آنها در وبسایتتان استفاده مجدد انجام دهید، گروه‌بندی کنید. ما مقادیر را به صورت آرگومان ارسال می‌کنیم.

این کار باعث می‌شود Mixins ها قابلیت انعطاف بیشتری داشته باشند. Sass از دستور mixin@ برای تعریف Mixins ها استفاده کرده و از دستور include@ برای استفاده از آنها در برنامه بهره می‌برید. در نمونه مثال زیر یک Mixins ساده را برای مشخصه border-radius ایجاد کرده ایم که از آن برای دکمه ها استفاده می شود :

/*
// We declare the mixin.
*/
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}
 
/*
// We apply it on our button.
*/
.btn {
  @include border-radius(4px);
}

خروجی نمونه مثال بالا در css عبارت است از :

.btn {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
}

نمونه مثال بالا استفاده بهینه از یک Mixins را نشان می دهد.

Partialها

Partialها فایل های کوچک Sass هستند که می توان آنها را در دیگر فایل های Sass استفاده کرد این کار باعث می شود فایل های css شما حالت ماژولار داشته باشند و عیب یابی آنها ساده تر شود. نام گذاری پارشل ها به صورت partial.scss_ است.

نتیجه

مباحثی که در این مقاله بیان شد یک مقدمه کوتاه از Sass بود. Sass یک ابزار قدرتمند است که به ما اجازه می دهد کارهای فوق العاده ای را انجام دهیم. پس اگر هنوز کار با آن را شروع نکرده اید اکنون زمان آن فرا رسیده است که از این ابزار قدرتمند استفاده کنید.

دوره های آموزشی

جدیدترین و بروز ترین دوره های آموزش برنامه نویسی را میتوانید در این بخش دنبال کنید

بحث و گفتگو

سوالات خود در زمینه برنامه نویسی و طراحی سایت را در این بخش مطرح کنید

مقالات آموزشی لرن سورس

منبع: لرن سورس

۰ ۹۸/۰۴/۳۰

شهربانو دوستی

طراحی سایت | برنامه نویسی

آموزش طراحی سایت و برنامه نویسی