آموزش 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 ترجمه کنید.

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

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

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

ویژگی های Sass

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

کاربرد Sass

در اینجا پنج دستاورد عالی که اکنون در اختیار شماست:

متغیرها

Sass متغیرها را به عنوان روشی برای ذخیره اطلاعاتی که می خواهید از آن استفاده مجدد کنید در سراسر شیوه نامه خود ارائه می دهد. اکنون می توانید آن مقدار رنگ یا پشته های قلم بلند را به عنوان چیزی که به راحتی به یاد می آورید، ذخیره کنید. نحوه اعلام متغیر با علامت دلار است که در زیر نام آن آمده است. این نام می تواند هر آنچه را که می خواهید باشد باشد. سپس یک كولون را تایپ می كنید: به دنبال آن مقدار و نیم كولون ؛

Import کردن

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

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

توابع رنگ

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

Mixins

نوشتن برخی موارد در CSS کمی خسته کننده است. Mixins گروه هایی از اعلامیه های CSS را ایجاد می کند که ما می توانیم در سایت خود از آنها استفاده مجدد کنیم. سبک های CSS3 که به پیشوندهای فروشنده نیاز دارند، نمونه ای کامل از زمان استفاده از میکسین است. به جای نوشتن همان خاصیت بارها و بارها میکسین را می نویسیم و در هر زمان که می خواهیم از آن استفاده کنیم با آن mixin تماس می گیریم. برای اعلام یک mixin از کلمه کلیدیmixin استفاده می کنیم.

توسعه

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

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

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

تفاوت بین Sass و LESS

علاوه بر SASS، LESS نیز در محافل توسعه دهنده مستقر شده است. این زبان شیوه نامه به شدت در حدود CSS محور است و به نحو آن شبیه SCSS است. هر دو پردازنده پردازنده برخی از ویژگی های یکسان را دارند: SASS و LESS هر دو امکان استفاده از میکسین و متغیرها را فراهم می کنند. با این وجود، یک تفاوت این است که SASS مبتنی بر روبی است، در حالی که LESS از JavaScript استفاده می کند. اما حتی این به هیچ یک از پیش پردازنده ها مزیتی نسبت به دیگران نمی دهد.

در عوض، تفاوتهای واقعی در توابع منطقی یافت می شود: LESS به کاربران این امکان را می دهد تا فقط در مواقعی که شرایط خاص رخ می دهند، میکسین ها را فعال کنند. این یک ویژگی مفید است، اما میزان لینک های منطقی را در LESS نشان می دهد. از سوی دیگر، SASS تفاوت هایی را که بین زبانهای برنامه نویسی شناخته شده است ارائه می دهد.

با استفاده از SASS، کاربران آزادانه می توانند از بین "نحو متناسب" یا SCSS انتخاب کنند. هر توسعه دهنده می تواند برای خود تصمیم بگیرد که آیا دوست دارد از قوانین CSS دور شود یا به اصل نزدیک شود. LESS این انتخاب را ارائه نمی دهد. در اینجا، کاربران مجبورند از قوانین قدیمی پیروی کنند. کد در LESS به طور خودکار یک زیر مجموعه از CSS است: تمام متن منبع مندرج در CSS نیز در LESS عمل می کند - درست مانند SCSS.

SASS در بین طراحان وب بسیار محبوب تر است. اما این می تواند به این دلیل باشد که SASS کمی قدیمی تر است. در ابتدا LESS توسط چارچوب مقدماتی مورد توجه Bootstrap، که به پیش پردازنده جوان متکی بود، پشتیبانی می شد. اما با نسخه 4، این پروژه به طور رسمی به SASS منتقل شد، که باعث افزایش محبوبیت ورق های سبک بسیار زیبا و جذاب می شود.

مثال Sass

نحو SCSS از پسوند پرونده .scss استفاده می کند. با چند استثناء کوچک، این یک مجموعه از CSS است، به این معنی که در واقع همه معتبر CSS معتبر نیز دارای SCSS است. به دلیل شباهت آن با CSS، ساده ترین نحو برای عادت کردن و محبوب ترین آن است.

SCSS به نظر می رسد:

@mixin button-base() {
  @include typography(button);
  @include ripple-surface;
  @include ripple-radius-bounded;


  display: inline-flex;
  position: relative;
  height: $button-height;
  border: none;
  vertical-align: middle;


  &:hover { cursor: pointer; }


  &:disabled {
    color: $mdc-button-disabled-ink-color;
    cursor: default;
    pointer-events: none;
  }
}

نظرتون درباره این نوشته چیه؟ عالیه بد نیست خوب نبود