آموزش Sass (قسمت اول)

آموزش sass

آموزش Sass (قسمت اول)

آموزش Sass (قسمت اول) 1350 500 اسماء اصلاحی

آموزش Sass عنوان مقاله پیش روی شما است  که به اصول اولیه Sass، پیش نیازهای آن، معایب و مزایای Sass پرداخته است و در مقالات بعدی تکمیل خواهد شد. SASS مخفف عبارت Syntactically Awesome Style Sheets و یک زبان pre-processor برای تولید کد Css است. این زبان به هیچ عنوان جایگزین Css محسوب نمی شود بلکه به کمک CSS به کاهش تکرار کمک می کند و زمان را سرعت می بخشد که می توان آن را روشی برای توسعه و مدیریت کدهای Css دانست.

SASS امکان استفاده از متغیرها (Variables)، دستورات تودرتو (Nesting)، وارد کردن قطعه کدها (Partial Imports)، گروه بندی کدها (Mixins)، وراثت (Inheritance) و عملگرها (Operators) در کدهای Css را فراهم می کند. کدهای SASS در نهایت کامپایل و به Css تبدیل می شوند. این آموزش به دانشجویان و متخصصانی که می خواهند وب سایت های خود یا وبلاگ های شخصی را جذاب تر کنند کمک می کند.

پیش نیاز های آموزش  SASS

  • پردازش کلمه پایه با هر ویرایشگر متن.
  • نحوه ایجاد دایرکتوری ها و فایل ها
  • نحوه حرکت در دایرکتوری های مختلف
  • مرور اینترنت با استفاده از مرورگرهای محبوب مانند اینترنت اکسپلورر یا فایرفاکس.
  • نحوه توسعه صفحات وب ساده با استفاده از HTML یا XHTML .

SASS  چیست؟

آموزش sass

SASS) Syntactically Awesome Style Sheets) یک pre-processor CSS است که به کاهش تکرار در CSS و صرفه جویی در وقت کمک می کند. SASS نمونه گسترش داده شده پایدار و قدرتمند CSS است که استایل کلی داکیومنت را ترو تمیز و با قاعده توضیح می دهد.

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

دلایل استفاده از SASS

  • SASS یک زبان Pre-processing  است که سینتکس های سفارسی برای  CSS فراهم می کند.
  • SASS ویژگی های خاصی را که برای ایجاد stylesheets استفاده می شود، فراهم می کند و نوشتن کد را موثر تر و آسان تر می کند.
  • SASS یک مجموعه فوق العاده از CSS است، به این معنی که تمام ویژگی های CSS را شامل می شود و یک pre-processor منبع باز است که در Ruby کد گذاری شده است.
  • SASS سند (document) را در یک قالب خوب و ساختار یافته از CSS فراهم می کند و از روش هایی که مجدداً قابل استفاده هستند، اظهارات منطقی و برخی از توابع داخلی مانند دستکاری رنگ، ریاضیات و لیست پارامترها استفاده می کند.

خودت را تکرار نکن DRY!

آموزش sass - Don’t Repeat Yourself

DRY مخفف عبارت Don’t Repeat Yourself  (خودت را تکرار نکن)، یک اصل در برنامه نویسی به معنای عدم تکرار یک یا چند خط کد در قسمت های مختلف برنامه است. برنامه نویس ها برای ایجاد امکان استفاده مجدد از یک تکه کد، آن را در قالب تابع یا کلاس تعریف می کنند و در صورت نیاز، تابع مورد نظر فراخوانی یا شی جدیدی از کلاس تعریف می شود. در صورت رعایت اصل DRY، تغییر در یک جز از برنامه، نیازی به تغییر در قسمت های دیگر کد ندارد؛ در نتیجه رفع ایرادهای برنامه و توسعه آن بسیار ساده تر خواهد بود.

یکی از مشکلات Html و Css نداشتن امکان استفاده از اصل DRY است که منجر به تعریف پی در پی کدهای تکراری، هم چنین دشوار بودن تغییر و توسعه کد می شود. استفاده از SASS می تواند این مشکل را حل و ساختاری قانونمند برای کدهای Css شما ایجاد کند!

ویژگی های SASS

  • پایدار، قدرتمند و سازگار با نسخه های CSS است.
  • مجموعه فوق العاده از CSS است و مبنای آن جاوا اسکریپت است.
  • به عنوان قند مصنوعی برای CSS شناخته شده است، به این معنی که خواندن و بیان کردن را برای کاربر ساده تر و روشن تر می کند.
  • از سینتکس های (syntax) خود استفاده می کند و به CSS قابل خواندن تالیف می شود.
  • شما می توانید CSS را به آسانی و در کمترین زمان با کد کمتری بنویسید.
  • یک  pre-processor منبع باز است که به CSS ترجمه شده است.

مزایای SASS

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

معایب SASS

  • توسعه دهنده باید زمان زیادی را برای یادگیری ویژگی های جدید موجود در این pre-processor بگذارد.
  • در یک اداره که برخی از SASS استفاده می کنند و برخی دیگر از CSS برای ویرایش فایل به طور مستقیم استفاده می کنند مشکل به وجود می آید.

سیستم مورد نیاز برای SASS

سیستم عامل:  Cross-platform

پشتیبانی از مرورگرهای: اینترنت اکسپلورر (اینترنت اکسپلورر ۸+)، فایرفاکس، گوگل کروم، سافاری(Safari)، اپرا(Opera)

زبان برنامه نویسی: Ruby

Syntax سفارشی

SCSS) Sassy CSS) یک فرمت از CSS syntax است.

این به این معنی است که هر CSS معتبر یک SCSS معتبر نیز هست.

منبع: tutorialspoint

 

یکشنبه‌ها قبل از شروع کار یک مقاله رایگان از لابراتوار رسانه برای بهبود کسب و کار خود دریافت کنید

این مقاله مفید بود ؟
چرا از این پست راضی نبودید ؟

Subscribe for free resources and news updates.