معرفی زبان اسکریپتی Sass

معرفی زبان اسکریپتی Sass

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

SASS جایگزین CSS نمی باشد بلکه یک روش برای کوتاه تر نویسی CSS می باشد که در نهایت بعد از کامپایل شدن به همان CSS تبدیل می شود. SASS یک روش توسعه یافته از کدنویسی در CSS همراه با Syntax است. SASS در ابتدا توسط Hampton Catlin طراحی و سپس توسط Natalie Weizenbaum در سال 2006 توسعه داده شده است. پس از توسعه اولیه، Natalie Weizenbaum و Chris Eppstein با نسخه ابتدایی خود ادامه دادند و SASS را با SassScript، زبان اسکریپتی ساده که در فایل های Sass استفاده می شود، گسترش دادند.

Sass چیست؟

SASS یا Sheets Style Systematically Aawesome یک پیش پردازنده CSS است. SASS برای اضافه کردن قدرت و ظرافت به زبان اصلی استفاده می شود و یک گسترش از CSS است. SASS اضافه کردن متغیرها، قوانین توافقی، mixins، واردات درون خطی inline imports، ارث بری inheritance و غیره را با نحو کاملا سازگار باCSS برای شما تسهیل می کند.

SASS جایگزین CSS نمی باشد بلکه یک روش برای کوتاه تر نویسی CSS می باشد که در نهایت بعد از کامپایل شدن به همان CSS تبدیل می شود. SASS یک روش توسعه یافته از کدنویسی در CSS همراه با Syntax است. SASS در ابتدا توسط Hampton Catlin طراحی و سپس توسط Natalie Weizenbaum در سال 2006 توسعه داده شده است. پس از توسعه اولیه، Natalie Weizenbaum و Chris Eppstein با نسخه ابتدایی خود ادامه دادند و SASS را با SassScript، زبان اسکریپتی ساده که در فایل های Sass استفاده می شود، گسترش دادند.

Sass یک زبانه سبک است که در ابتدا توسط Hampton Catlin طراحی و توسط ناتالی ویزنباوم ساخته شده است. پس از نسخه های اولیه، Weizenbaum و Chris Eppstein به گسترش Sass با SassScript، یک زبان نویسی ساده که در پرونده های Sass استفاده می شود، ادامه داده اند.

Sass یک زبان برنامه نویسی پیش پردازنده است که به تفسیر یا جمع آوری به شیوه نامه های آبشار (CSS) می پردازد. SassScript به زبان خود برنامه نویسی است. ساس از دو نحو تشکیل شده است. اصطلاح اصلی با نام “نحو متخلخل” از نحوی شبیه به همل استفاده می شود. برای جدا کردن قوانین، از دندانه ای برای جدا کردن بلوک های کد و کاراکترهای جدید استفاده می کند. نحو جدیدتر “SCSS” (Sassy CSS) از قالب بندی بلوکی مانند CSS استفاده می کند. این از براکت ها برای مشخص کردن بلوک های کد و نقاط کوچک برای جدا کردن خطوط درون یک بلوک استفاده می کند. به ترتیب فایل های syntax و SCSS به ترتیب به پسوندهای .sass و .scss داده می شوند.

CSS3 از مجموعه ای از انتخاب کننده ها و شبه انتخابگرها تشکیل شده است که قوانین گروهی را برای آنها اعمال می کند. Sass (در زمینه بزرگتر هر دو نحو) CSS را با ارائه چندین مکانیسم موجود در زبانهای سنتی برنامه نویسی به خصوص زبانهای شی گرا گسترش می دهد، اما این در دسترس خود CSS3 نیست. هنگامی که SassScript تفسیر می شود، بلوک قوانین CSS را برای انتخاب های مختلف ایجاد می کند، همانطور که توسط پرونده Sass تعریف شده است. مترجم Sass SassScript را به CSS ترجمه می کند. از طرف دیگر، Sass می تواند پرونده .sass یا .scss را مانیتور کند و هر زمان که فایل .sass یا .scss ذخیره شود، آن را به پرونده خروجی cc ترجمه کنید.

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

پیش پردازنده CSS

پیش پردازنده CSS یک زبان برنامه نویسی است که با اجازه دادن به توسعه دهندگان می تواند کد را به یک زبان بنویسد و سپس آن را به CSS وارد کند، CSS را گسترش می دهد. Sass شاید محبوب ترین پیش پردازنده اطراف باشد، اما نمونه های رایج دیگر آن شامل Less و Stylus است.

CSS به تنهایی می تواند سرگرم کننده باشد، اما نگهداری از شیوه نامه ها بزرگتر، پیچیده تر و سخت تر می شوند. اینجاست که یک پیش پردازنده می تواند کمک کند. Sass به شما امکان می دهد از ویژگیهایی استفاده کنید که در CSS وجود ندارد اما مانند متغیرها، لانه کردن، میکسین ها، وراثت و سایر موارد خوب که نوشتن CSS را دوباره سرگرم می کند. پس از شروع کار با Sass، پرونده Sass پردازش شده شما را می گیرد و آن را به عنوان یک فایل CSS معمولی که می توانید در وب سایت خود استفاده کنید، ذخیره می کند.

سینتکس Sass

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

1. SCSS (Sassy CSS): استفاده از فایل با فرمت .scss که سازگاری بالایی با سینتکس CSS دارد.
2. دندانه‌دار (همان Sass): از فرمت .sass استفاده می‌کند و به صورت دندانه‌ای است -برخلاف حالت }{-. این مورد نیز به با CSS سازگاری دارد و نوشتن آن سریع‌تر است.

نکته اینجاست که می‌شود هر دو سینتکس را با استفاده از دستور sass-convert به همدیگر تبدیل کرد.

ویژگی های Sass

• کاملا سازگار با CSS است.
• نسبت به CSS پایدارتر، قدرتمندتر و زیباتر است.
• مبتنی برجاوا اسکریپت است و ازCSS  پشتیبانی می کند.
• Syntax خود را دارد و برای CSS قابل خواندن و ترکیب شدن می باشد.
• پیش پردازنده متن باز است که به CSS تفسیرمی شود.
• از توسعه زبان مانند متغیرها variables، nesting و mixins پشتیبانی می کند.
• توابع مفید بسیاری برای دستکاری رنگ و مقادیر دیگر را دراختیار شما قرار می دهد.
• ویژگی های بسیاری از قبیل دستورالعمل های کنترل کتابخانه ها را فراهم می کند.
• امکان ایجاد خروجی well-formatted و سفارشی را فراهم می کند.

کاربرد Sass

متغیرها

درست مانند دیگر زبان‌های برنامه‌نویسی 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;
}

Import کردن

اکنون ممکن است با خود بگویید “CSS دارایimport است، خیلی جالب نیست” و درست می گویید اما نسخه های CSS و Sass از نظر قابل توجهی متفاوت هستند. در CSS عادیimport ورقهای سبک دیگر را جذب می کند اما این کار را با درخواست HTTP دیگری انجام می دهد، کاری که معمولاً می خواهیم از آن جلوگیری کنیم. به همین دلیل ممکن است قبلاً ازimport استفاده نکرده باشید. از طرف دیگر، Sass یک پیش پردازنده (تأکید بر پیش) است که قبل از تهیه CSS وارد آن پرونده می شود.

نتیجه یک صفحه CSS است که با یک درخواست HTTP اداره می شود. این بدان معنی است که شما می توانید css خود را در بخش های کوچکتر و با حفظ بیشتری تقسیم کنید در حالی که فقط یک صفحه را به مرورگر ارائه می دهید. آیا نیاز به اصلاح متن روی دکمه دارید؟ دیگر صفحات سبک لاغری به دنبال سبک دکمه های مربوطه نیستند. کافی است دکمه خود را جزئی کنید و تغییرات را انجام دهید. لطفا به مثال زر توجه نمایید:

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

توابع رنگ

Sass توابع حزب CSS را به ارمغان می آورد. من می دانم که همه برنامه نویسان نیستند و مفهوم یک عملکرد ممکن است پشت سر شما باشد اما نگران نباشید، بسیاری از آنها ویژگیهای مفیدی را اضافه می کنند در حالی که خیلی پیچیده نیستند. در مورد رنگ ها، چندین نکته مفید برای دستکاری آنها وجود دارد اما سه مورد از مزایای بسیار جذاب و جذاب برای افراد تازه شروع شده است. بیایید ببینیم که چگونه از آنها استفاده می کنیم.

Mixins

نوشتن برخی موارد در CSS کمی خسته کننده است. Mixins گروه هایی از اعلامیه های CSS را ایجاد می کند که ما می توانیم در سایت خود از آنها استفاده مجدد کنیم. سبک های CSS3 که به پیشوندهای فروشنده نیاز دارند، نمونه ای کامل از زمان استفاده از میکسین است. به جای نوشتن همان خاصیت بارها و بارها میکسین را می نویسیم و در هر زمان که می خواهیم از آن استفاده کنیم با آن mixin تماس می گیریم. برای اعلام یک mixin از کلمه کلیدی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;
}

حتما بخوانید : فیلم آموزش Css و Css3 به زبان فارسی

 

توسعه

این ابزارها عالی بودند اما من بهترین ها را برای آخرین بار ذخیره کردم. extend یکی از مفیدترین ویژگی هایی است که به ما امکان می دهد مجموعه ای از خصوصیات CSS را از یک انتخاب دهنده به دیگری به اشتراک بگذاریم. به یک جفت دکمه فکر کنید، مانند یک دکمه قبول و کاهش در یک پنجره معین. از آنجا که هر دو دکمه هستند، احتمالاً آنها اکثر یک ظاهر طراحی شده را به اشتراک می گذارند اما دکمه نزولی دارای یک پس زمینه قرمز برای برجسته کردن است. با Sass سبک های پیش فرض را برای همه دکمه ها می نویسیم و سپس این سبک ها را به دکمه کاهش می دهیم تا جایی که پس زمینه قرمز را اضافه می کنیم.

از دیگر موارد کاربرد Sass می توان به موارد زیر اشاره کرد؟

• زبان پیش پردازشی است و دارای نحو خاص خود برای CSS است.
• آسان، کوتاه و تمیز در یک ساختار برنامه نویسی است.
• ویژگی های خاصی دارد که برای ایجاد صفحات سبک بسیار جذاب استفاده می شود و باعث می شود که کد بسیار کارآمدتر و راحت تر باشد.
• شامل تمام ویژگی های CSS همراه با برخی از ویژگی های پیشرفته است.
• ارائه سبک سند را بهتر از CSS مسطح ارائه می دهد.
• روش روش مجدد استفاده، اظهارات منطقی و برخی از عملکردهای ساخته شده مانند دستکاری رنگ، ریاضیات و لیست پارامترها را تسهیل می کند.
• طراحی واکنش گرا با سازماندهی بیشتر را فراهم می کند.
• نیازی به تکرار دوباره CSS مشابه در پروژه خود ندارید.

منبع : creativebloq

وبدئو آشنایی با برنامه نویسی sass

دانلود Sass

از لینک زیر می توانید Sass را برای ویندوز، مک و لینوکس دانلود و نصب نمایید.

دانلود Sass

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.