آموزش Sass

دسته بندی: آموزش طراحی وب

آموزش 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; } }

آیا این نوشته را دوست داشتید؟
packt-sass-the-complete-sass-course-css-preprocessor

آموزش SASS: دوره کامل (CSS Preprocessor) SASS


این دوره برای آشنایی و شروع کار شما با این زبان افزونه طراحی شده است. شما با اصول SASS شروع خواهید کرد، درست از نصب کامپایلر SASS تا ایجاد متغیرها و m...

1400/02/16 467 بازدید
linkedin-bootstrap-4-with-sass

آموزش بوت استرپ 4 به همراه Sass


Bootstrap محبوب ترین فریمورک برای ساخت وب سایت هایی با قابلیت ریسپانسیو و mobile-first است. هنگامی که شما آن را با Sass ترکیب می کنید، به CSSهای قدرتم...

1398/12/27 4819 بازدید
teamtreehouse-css-to-sass

آموزش CSS تا Sass


اگر مطمئن نیستید که هنگام تبدیل CSS به Sass از کجا شروع کنید، این دوره برای شما است. در این دوره یاد می گیرید که چگونه یک پروژه وب ساده را به Sass تبد...

1398/10/30 2531 بازدید
teamtreehouse-sass-basics

آموزش مبانی Sass


در این دوره یاد خواهید گرفت که از قدرت های Sass برای تقویت جریان کاری front end خود استفاده کنید. مثال ها به شما می آموزد که چرا باید از Sass در پروژه...

1398/10/15 2155 بازدید
teamtreehouse-advanced-sass-course

آموزش پیشرفته Sass 


در این دوره با متغیرها، mixins، توابع، placeholders، توابع پیشرفته، directives و بهترین شیوه ها برای نوشتن Sass آشنا می شوید. سرفصل: معرفی Sassmei...

1397/06/01 2331 بازدید
teamtreehouse-modular-css-with-sass-course

آموزش CSS ماژولار با Sass 


در این دوره، ما قصد داریم یک جعبه ابزار UI toolkit با استفاده از بهترین شیوه ها و اصول معماری CSS ماژولار ایجاد کنیم. همچنین با رویکرد ماژولار با Sass...

1397/05/04 2010 بازدید
teamtreehouse-sass-basics-course

آموزش اصول و مبانی Sass 


Sass یک زبان شی گرا است که CSS را با ویژگی هایی مانند متغیرها، قوانین nested، توابع و mixins، در یک سینتکس سازگار با CSS گسترش می دهد. در این دوره، شم...

1397/04/21 1835 بازدید
آشنایی-با-sass

آشنایی با Sass


Sass مخفف Syntactically Awesome Style Sheets است و یک زبان پیش پردازنده CSS یا CSS Preprocessor Language به حساب می آید . Sass اساسا یک روش توسعه یافت...

1397/04/14 3279 بازدید
آموزش-طراحی-وب-از-treehouse

آموزش طراحی وب از TreeHouse


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

1397/04/14 9633 بازدید
دوره-css-to-sass

دوره CSS to Sass


در این آموزش تصویری با نحوه طراحی استایل های حرفه ای با  Sass و تبدیل آن به CSS آشنا می شوید. این دوره آموزشی محصول موسسه TreeHouse می باشد. سرفصل...

1397/04/14 2291 بازدید
packtpub-learn-sass-and-scss-video

آموزش SASS و SCSS


به عنوان یک برنامه نویس، از اهمیت CSS اگاهی دارید. ممکن است که CSS ضعیف عمل کند و زمان زیادی را برای کدنویسی CSS جهت حل مشکلات نمایش صرف کنید. با یادگ...

1397/02/24 2030 بازدید
learning-sass-in-video

آموزش کامل Sass در یک ویدئو


Syntactically Awesome Stylesheets به اختصار Sass، زبان پیش پردازنده CSS است که تنها به مدیریت و توسعه ی کدهای Css کمک می کند. ساس در ابتدا توسط Hampt...

1397/02/14 1774 بازدید
lynda-sas-programming-for-r-users-part-2

آموزش برنامه نویسی SAS برای کاربران R – قسمت 2


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

1397/02/02 1379 بازدید زیرنویس دارد
udemy-learn-sass-from-beginner-to-expert-udemy

آموزش صفر تا صد SASS


هدف از این دوره تبدیل شدن به یک متخصص در SASS است. SASS یک زبان پیش پردازنده CSS می باشد که نوشتن را بسیار ساده تر و سریع تر می کند و در محیط حرفه ای ...

1396/10/12 1966 بازدید
udemy-better-way-towards-css-using-less-and-sass

استفاده از Less و Sass به جای CSS


در این آموزش تصویری با نحوه استفاده از Sass و Less به جای نوشتن مستقیم کدهای CSS آشنا می شوید. این دوره آموزشی محصول موسسه Udemy است. سرفصل های دوره:...

1396/02/01 2553 بازدید
udemy-the-complete-sass-and-scss-course-from-beginner-to-advanced

آموزش کامل Sass و SCSS


در این آموزش تصویری با  Sass و SCSS از مقدماتی تا پیشرفته آشنا می شوید. این دوره آموزشی محصول موسسه Udemy است. سرفصل های این دوره: مقدمه مرور S...

1395/10/13 4770 بازدید
آموزش-قدم-به-قدم-sass

آموزش قدم به قدم Sass


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

1395/07/14 3127 بازدید