sass چیست؟
اگر به تازگی وارد دنیای طراحی وب شدهاید مطمئنا نام Sass یا پیشپردازندهها را شنیدهاید.
اگر مطمئن نیستید که Sass چیست و نمیدانید که باید از آن استفاده کنید یا خیر، ما امروز قصد داریم به شما کمک کنیم.
Sass مخفف کلمات Syntactically Awesome Stylesheets است.
Sass را می توان به عنوان یک افزونه برای css در نظر گرفت که کار با استایل ها را برای ما بسیار ساده می کند.
به خصوص زمانی که فایل های css شما بسیار بزرگ و پیچیده باشند.
Sass مدیریت و نگهداری استایل های css را سادهتر میکند.
به لطف وجود متغیرها، mixins ها، nesting ها و وراثت در این پیش پردازنده، کد های نوشته شده کاملاً سازماندهی می شود.
پیشپردازنده CSS چیست؟
پیشپردازنده CSS در حقیقت یک زبان اسکریپتی است که با اجازه دادن به توسعهدهندگان جهت نوشتن کدها در یک زبان و کامپایل آن به صورت CSS باعث توسعه CSS میشود.
به احتمال بسیار زیاد Sass محبوبترین پیشپردازنده موجود باشد اما موارد دیگری نیز مانند Less و Stylus وجود دارند.
اگر در دنیای CSS تازهکار هستید پیشنهاد میشود که فعلا به سراغ پیشپردازندهها نروید.
چنین موضوعی برای پلاگینها و فریمورکها نیز صادق است.
با این وجود که آن ها باعث میشوند تا سرعت و کارایی بالایی داشته باشید اما مهمتر از آن این است که درک بسیار خوبی از موارد پایهای و کلی CSS پیدا نمایید. همواره سعی کنید که قبل از میانبر زدن اصل قضیه را به خوبی درک کنید.
Sass چیست؟
یک پیشپردازنده است که CSS را قادر میسازد تا از مواردی مانند متغیرها، تودرتونویسی، inline import و موارد مختلف دیگری استفاده کند.
در حقیقت Sass مانند یک اکستنشن برای CSS عمل میکند.
Sass کمک میکند که همه چیز را سازماندهی شده نگه داریم و فایلهای استایلشیت را با سرعت بیشتری ایجاد کنیم.
Sass با تمام نسخههای CSS سازگاری دارد.
برای نصب Sass راههای مختلفی وجود دارد که در قسمت مستندات خود وبسایت بیان شده است.
چرا بهتر است از Sass استفاده کنیم؟
اگر شما با دوستان خود که در زمینه front-end کار میکنند، صحبت کرده باشید ممکن است آنها به شما گفته باشند html و css زبان هایی با نقطه ضعف های بزرگی هستند. دلیل آن هم این است که کدهای آنها از پیش تعریف شده است و بارها تکرار میشود و شما مجبورید کد های تکراری بنویسید.
اگر شما با یک زبان برنامه نویسی واقعی کار کرده باشید حتما اطلاع دارید که در این زبان ها از موارد کاربردی همچون تعریف متغیر ها و توابع استفاده می شود. که می تواند در کد نویسی و سازماندهی کد ها به ما کمک بسیاری بکند. اینجاست که Sass می تواند بیشتر مشکلات و نقطه ضعف های css را برطرف کند.
در واقع Sass مکمل زبان css است. با استفاده از Sass می توان متغیر ها را تعریف کرد و حتی از مفاهیمی همچون وراثت در css استفاده نمود. این ویژگی ها می توانند برای یک طراح فوق العاده باشند.
چگونه از Sass استفاده کنیم
سینتکس
Sass دارای دو گزینه سینتکس است:
- SCSS (Sassy CSS): استفاده از فایل با فرمت .scss که سازگاری بالایی با سینتکس CSS دارد.
- دندانهدار (همان Sass): از فرمت .sass استفاده میکند و به صورت دندانهای است -برخلاف حالت }{-. این مورد نیز به با CSS سازگاری دارد و نوشتن آن سریعتر است.
نکته اینجاست که میشود هر دو سینتکس را با استفاده از دستور sass-convert به همدیگر تبدیل کرد.
متغیرها
درست مانند دیگر زبانهای برنامهنویسی Sass نیز به شما اجازه میدهد که بتوانید متغیرهایی را تعریف کرده و اطلاعاتی را در آنها قرار دهید.
برای مثال میتوانید مقدار یک رنگ را در یک متغیر قرار داده و در برنامه چندین بار از آن استفاده کنید.
این موضوع کمک میکند که بتوانید به سرعت تنها با تغییر یک قسمت (متغیر) رنگ المانهای مختلف را تغییر دهید.
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack; color: $primary-color;
}
کد CSS زیر تولید میشود:
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
تودرتویی در Sass
Sass به شما اجازه می دهد از قواعد css برای تو در تویی استفاده کنید تو در تویی یک روش فوق العاده برای سازماندهی و ساختار دهی کدهای css است و به شما اجازه می دهد از تکرارهای غیرضروری پرهیز کنید.
بگذارید در زیر نمونه ای از قدرت این ویژگی را به شما نشان دهم:
nav {
ul {
margin: 0; padding: 0;
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
خروجی 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;
}
Mixin
یکی از مزیتهای استفاده از پیشپردازنده وجود قابلیت ساده کردن کدهای پیچیده است.
منظورمان دقیقا استفاده کردن از Mixinها است.
برای مثال در حالتی که میخواهیم از پیشوندهای پشتیبانی مرورگر استفاده کنیم میتوانیم به سادگی به صورت زیر عمل نماییم:
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box {
@include border-radius(10px);
}
به @mixin در بالای کدها توجه کنید. border-radius نامی است که این mixin ما دارد و در داخل خود یک پارامتر دریافت میکند.
مقدار متغیر $radius در واقع همان پارامتری است که کاربر وارد میکند.
در نهایت با استفاده از @include میتوانید mixin نوشته شده را اعمال کنید.
خروجی CSS به صورت زیر خواهد بود:
.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
Partialها
Partialها فایل های کوچک Sass هستند که می توان آنها را در دیگر فایل های Sass استفاده کرد
این کار باعث می شود فایل های css شما حالت ماژولار داشته باشند و عیب یابی آنها ساده تر شود.
نام گذاری پارشل ها به صورت partial.scss_ است.
نتیجه
مباحثی که در این مقاله بیان شد یک مقدمه کوتاه از Sass بود.
Sass یک ابزار قدرتمند است که به ما اجازه می دهد کارهای فوق العاده ای را انجام دهیم.
پس اگر هنوز کار با آن را شروع نکرده اید اکنون زمان آن فرا رسیده است که از این ابزار قدرتمند استفاده کنید.
جهت مشاهده دوره های آموزشی بر روی این لینک کلیک نمایید.
جدیدترین اخبار مجموعه فراز نتورک را در این صفحه اجتماعی دنبال کنید.
نویسنده: حانیه گل لاله کرمانی
دیدگاهتان را بنویسید
برای نوشتن دیدگاه باید وارد بشوید.