در دوره آموزش sass ، ما از مباحث پایه‌ای SASS مثل نصب و کامپایل فایل‌های SASS و قوانین تودرتو شروع می‌کنیم و در طول دوره با مباحثی مثل متغیر‌ها، توابع، عملگرها، mixin‌ها، قوانین‌های @ (@-rules) کاملا آشنا خواهیم شد. تمام درس‌های آموزش sass به همراه مثال های کاربردی ارائه شده است.

SASSیک ابزار پیش‌پردازنده (Preprocessor) برای CSS است که تمام ویژگی‌ها مثل متغیرها، عملگرها، کلاس‌هایی با قابلیت استفاده مجدد، توابع و بسیاری ویژگی‌های دیگر را به CSS اضافه می‌کند و ساخت CSSهای پیچیده را ساده می‌کند.

SASS علاوه بر اینکه ساخت و تولیدCSS های پیچیده را برای ما ساده می‌کند، به ما کمک خواهد کرد تا با استفاده از ویژگی‌های پیشرفته‌ای که به ما ارائه می‌دهد، سریع‌تر و حرفه‌ای‌تر کدهای CSS را تولید کنیم.

معرفی Sass

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

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

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

پیشنهاد شگفت انگیز کدفرند،دسترسی به تمامی دوره های آموزشی کدفرند تنها با ۵۹ هزار تومان

پیش پردازنده 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 ایمیل خود را در قسمت پایین وارد کنید تا دوره به ایمیل شما ارسال شود.

دریافت لینک دانلود

برای دریافت فایل مدنظر نام و ایمیل خود را در فرم زیر وارد کنید تا لینک دانلود برای شما ارسال شود
اگر لینک دانلود در پوشه اینباکس ایمیل مشاهده نشد،پوشه اسپم یا هرز نامه را بررسی کنید
 حتما آدرس ایمیل خود را به صورت صحیح وارد کنید . [ایمیل www ندارد]

دریافت لینک دانلود...