معرفی Sass آموزش نصب،بررسی مزایای استفاده از Sass در CSS

Sass یا Syntactically Awesome Style Sheets یک زبان پیش پردازنده جهت تولید ، توسعه ومدیریت کد های CSS است.

با استفاده از این پیش پردازنده در بخش استایل دهی المان ها ما این امکان را داریم تا از عملگر ها(Operators) یا متغیرها (Variables) استفاده کنیم .

دستورات را به صورت تو در تو(Nesting) بنویسیم و کدها را گروه بندی(Mixins)کنیم.

همچنین توانایی وارد کردن قطعه کدها (Partial Imports) و استفاده از ویژگی وراثت(Inheritance) را فراهم میسازد.

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

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

 

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

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

ماهیت آنها برپایه کاهش حجم کد و یکپارچه سازی در تولید کد های بیشتر است.

 Sass چگونه کار می کند؟

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

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

DRY اصل مهم برنامه نویسی؟

💫Don’t Repeat Yourself خودت را تکرار نکن .

به معنی جلوگیری از تکرار یک یا چندخط کد در بخش های مختلف برنامه است.

جهت استفاده مجدد از یک بخش کد در طول پروژه بایستی آنرا بصورت کلاس یا یک تابع تعریف کرد و هنگام نیاز آن را فراخوانی کرد یا یک شی جدید از کلاس تعریف کرد. در این صورت از بازنویسی جلوگیری میشود و عدم وجود این اصل در HTML ,CSS منجر به ایجاد پی در پی کد های تکراری و دشوار کردن اعمال تغییرات میگردد.

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

 

📁ساختار فایل و پوشه :

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

 هنگام کدنویسی یک پروژه، پوشه های تو در تو با فایل های مختلف وجود دارد. ساختار اصلی یک پروژه به صورت زیر خواهد بود:

سه پوشه در اینجا وجود دارد، New_project، CSS و Sass. دایرکتوری New_project دارای یک فایل HTML، پوشه CSS و پوشه Sass است. پوشه CSS دارای یک فایل است که در طول کامپایل Sass ایجاد شده است. دایرکتوری Sass دارای سه فایل است که اهداف متفاوتی را برای هر یک از آنها نشان می دهد.

 

دایرکتوری حاوی فایل های Sass ما به عنوان پوشه ورودی شناخته می شود. پس از کامپایل، دایرکتوری CSS پوشه Output نامیده می شود. 

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

 

مثال از کار با Sass

$title-font-size: 2.2rem;
$title-font-size-regular: 2rem;
$title-font-medium: 1.5rem;
$title-font-normal: 1rem;
$larg-text: 1.8rem;
$bodyFont: Helvetica, sans-serif;
$defaul-radius: 8px;
$myWidth:1200px;
$font-bold: 600;
$font-heavy: 700;

body {
  font-family: $bodyFont;
  font-size: $title-font-size-regular;
}
#container {
  width: $myWidth;
}

 

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

Sass برای یک  syntax ساده برای یادگیری، شیوه نامه های سازماندهی شده، و پایدار شناخته شده است. 

اما یادگیری هر چیزی به زمان و تلاش نیاز دارد. اگر قبلاً CSS را می‌دانید، چرا باید برای تسلط بر Sass وقت بگذارید.

1.استایل شیت ما را سازماندهی و modularizes می کند: Sass قادر است کاری را که CSS انجام می دهدبا حجم کد کمتر انجام دهد. از این رو، کارآمدتر است و بهره وری توسعه دهندگان را افزایش می دهد.

2.یادگیری syntax آسان: برای توسعه دهندگان CSS، استفاده از Sass آسان است زیرا عملکرد و بسیاری از نحوها با CSS یکسان هستند.

3.کد قابل استفاده مجدد: با ویژگی های منحصر به فرد Sass، کد را می توان در مکان های مختلف از طریق روش های متمایز استفاده مجدد کرد که باعث صرفه جویی در زمان می شود.

4.Divide & Conquer: وقتی پروژه بزرگ می شود، استفاده از CSS در یک فایل یا 20 فایل پیشنهاد نمی شود. با استفاده از تابع import در Sass، نگهداری و پیمایش در بخش‌های مختلف شیوه نامه آسان‌تر است.

5.سفارشی کردن بوت استرپ: با دانش Sass، ما همچنین می توانیم بوت استرپ را سفارشی کنیم. بسیاری از فریم ورک های معروف front-end توسط این پیش پردازنده از جمله Bootstrap & Foundation ایجاد شده اند.

6.جامعه توسعه‌دهنده بزرگ و مستند: برای استفاده از زبان توسط توده‌ها، جامعه توسعه‌دهنده و مستندات نقشی حیاتی دارند. خوشبختانه، Sass ما را در این بخش پوشش داده است و منابع زیادی برای متخصص شدن هر کسی در اختیار دارد. انجمن 🔗Sass GitHub را بررسی کنید.   

  

 

 

 

نصـــــــــــــــــــــــــــــــــب Sass

جهت شروع با Sass، در ابتدا Sass را بر روی سیستم خود نصب کنید. Sass نصب به صورت خط فرمان و یا با استفاده از نرم افزاری همچون npm، yarn و... در دسترس است. حال برای نصب Sass، مراحل زیر را انجام میدهیم:

1)نصب Node.js

Sass بر پایه Node.js شکل گرفته است، در همین راستا باید Node.js را روی سیستم خود نصب داشته باشیم. حال می‌ توان از این لینک🔗 Node.js، نسخه مناسب برای سیستم عامل خود را یافته و دانلود کنیم.

2)نصب Sass با استفاده از npm

npm (Node.js Package Manager) بهترین روش‌ برای نصب Sass است. بعد از نصب Node.js، می‌توان دستور زیر را در ترمینال خود وارد کنید:

npm install -g sass

این دستور Sass را برای استفاده در سطح سیستم عامل  (global) نصب می‌کند. جهت تأیید نصب Sass، دستور پایین را اجرا میکنیم. در صورتی که نسخه Sass را باید بصورت درست مشاهده کردید، نصب Sass با موفقیت انجام گردیده است.

sass --version

کامپایل کردن Sass به CSS !

بعد از نوشتن کدهای Sass، شما باید آنها را به CSS ترجمه کنید. برای این کار می توانید از ابزارهای کامپایل Sass مانند خط فرمان Sass و یا ابزارهای بصری مانند CodeKit و Prepros استفاده کنید.

برای کامپایل کردن Sass به CSS، می‌توانید از چند روش مختلف استفاده کنید:

استفاده از دستور sass در خط فرمان

میتوانید از دستور sass در خط فرمان استفاده کنید تا فایل Sass خود را به فایل CSS تبدیل کنید. برای این کار، به پوشه حاوی فایل Sass خود بروید و سپس دستور زیر را وارد کنید:

sass input.scss output.css

در این دستور، input.scss  نام فایل Sass شماست و output.css نام فایل CSS خروجی شماست. Sass به طور خودکار فایل CSS خروجی را ایجاد می‌ کند و کدهای CSS شما در آن قرار خواهند گرفت.

استفاده از افزونه های vscodeدر روند کامپایل کردن Sass نیز به ما کمک میکنند.