Warning: strpos(): Empty needle in /home/akairan/domains/akairan.com/public_html/tecnoloji/includes/content.php on line 553

Warning: strpos(): Empty needle in /home/akairan/domains/akairan.com/public_html/tecnoloji/includes/content.php on line 553

Warning: strpos(): Empty needle in /home/akairan/domains/akairan.com/public_html/tecnoloji/includes/content.php on line 553

Warning: strpos(): Empty needle in /home/akairan/domains/akairan.com/public_html/tecnoloji/includes/content.php on line 553

Warning: strpos(): Empty needle in /home/akairan/domains/akairan.com/public_html/tecnoloji/includes/content.php on line 553
<div><div>

آکاایران: Sass چیست و چرا باید از آن استفاده کنیم؟ این سوالات اصلی هستند که قصد داریم امروز به آن‌ها در این مطلب پاسخ دهیم. اما قبل از اینکه وارد جزئیات ماجرا شویم، خوب است که بدانید در وبسایت راکت «آموزش کامل sass» به صورت رایگان در اختیار کاربران قرار دارد که می‌توانند از آن نیز استفاده کنند. 

Sass چیست؟

Sass چیست؟sass چیست

آکاایران: Sass چیست؟

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

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

پیش‌پردازنده CSS چیست؟

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

اگر در دنیای CSS تازه‌کار هستید پیشنهاد می‌شود که فعلا به سراغ پیش‌پردازنده‌ها نروید. چنین موضوعی برای پلاگین‌ها و فریمورک‌ها نیز صادق است. با این وجود که آن ها باعث می‌شوند تا سرعت و کارایی بالایی داشته باشید اما مهمتر از آن این است که درک بسیار خوبی از موارد پایه‌ای و کلی CSS پیدا نمایید. همواره سعی کنید که قبل از میانبر زدن اصل قضیه را به خوبی درک کنید.

Sass چیست؟

Sass (Syntactically Awesome Style Sheets) یک پیش‌پردازنده است که CSS را قادر می‌سازد تا از مواردی مانند متغیرها، تودرتونویسی، inline import و موارد مختلف دیگری استفاده کند. در حقیقت Sass مانند یک اکستنشن برای CSS عمل می‌کند. Sass کمک می‌کند که همه چیز را سازمان‌دهی شده نگه داریم و فایل‌های استایل‌شیت را با سرعت بیشتری ایجاد کنیم.

Sass با تمام نسخه‌های CSS سازگاری دارد. برای نصب Sass راه‌های مختلفی وجود دارد که در قسمت مستندات خود وبسایت بیان شده است. 

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

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

سینتکس

Sass دارای دو گزینه سینتکس است:

  1. SCSS (Sassy CSS): استفاده از فایل با فرمت .scss که سازگاری بالایی با سینتکس CSS دارد.
  2. دندانه‌دار (همان 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;
}

تودرتو نویسی

تودرتو نویسی یک شمشیر دو لبه است. در حالی که این ویژگی‌ می‌تواند روش بسیار خوبی برای کاهش کدها باشد اما اگر به صورت درست استفاده نشود باعث از آسیب رسیدن به CSS می‌شود. ایده این است که بتوانید سلکتورهای CSS را به صورتی بنویسید که شباهت بسیاری به سیستم سلسله مراتبی HTML پیدا کند. 

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

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;
}

Partialها

Partialها فایل کوچک Sass هستند که قابلیت import شدن در دیگر فایل‌های Sass را مهیا می‌کنند. با استفاده از این حالت شما می‌توانید فایل‌های CSS ماژولاری داشته باشید که نگه‌داری و دیباگ‌ کردن آن‌ها ساده‌تر است. یک Partial به این صورت نام گذاری می‌شود: _partial.scss

Import

با استفاده از دستور @import می‌توانید Partialهایی که در بالا گفته شد را به کدها اضافه کنیم. این کار با استفاده از یک Http Request انجام می‌شود. 

// _reset.scss

html,
body,
ul,
ol {
   margin: 0;
  padding: 0;
}

// basefile.scss

@import "reset";

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

در نهایت خروجی CSS:

html, body, ul, ol {
  margin: 0;
  padding: 0;
}

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

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;
}

توسعه/ارث‌بری

از دستورالعمل @extend تنها یک بار در فایل Sass استفاده می‌شود. بعد از دیدن ویژگی فوق العاده آن متوجه چرایی آن می‌شوید.

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

عملگر

داشتن قابلیت انجام عملیات‌ها مطمئنا می‌تواند قابلیت‌های بسیار بیشتر دیگری را به شما بدهد. برای مثال می‌توانید مقادیر پیکسل را به درصد تبدیل کنید. شما در این حالت به توابع استاندارد ریاضی مانند جمع، تفریق، ضر و تقسیم دسترسی دارید. البته باید گفت که این توابع قابلیت ترکیب شدن با همدیگر و ایجاد محاسبات پیچیده‌تر را نیز دارند. 

در کنار این موارد Sass توابع داخلی دیگری را نیز دارد که در کار با اعداد به شما کمک می‌کند.

این‌ها کلیاتی از دنیای Sass بود. برای آشنایی بیشتر با Sass می‌توانید دوره رایگان «آموزش کامل sass» در وبسایت راکت را مشاهده کنید.

منبع

.

منبع : roocket.ir

  • فال
  • بازار
  • تست هوش آنلاین
تبلیغات