آموزش Sass / Scss بخش اول / مقدماتی

آموزش Sass / Scss بخش اول / مقدماتی

ساس چیست ؟ (Sass (Syntactically Awesome Style Sheets) یک پیش‌پردازنده است که CSS را قادر می‌سازد تا از مواردی مانند متغیرها، تودرتونویسی، inline import و موارد مختلف دیگری استفاده کند. در حقیقت Sass مانند یک اکستنشن برای CSS عمل می‌کند. Sass کمک می‌کند که همه چیز را سازمان‌دهی شده نگه داریم و فایل‌های استایل‌شیت را با سرعت بیشتری ایجاد کنیم.ولی sass به جای css استفاده نمیشه بلکه میشه گفت نسخه ای پیشرفته تر از css است که توست nodejs – npm کد هاش به css تبدیل میشن و شما اصلا فایلی به نام sass – scss داخل خروجی پروداکت ندارید و تمام کد ها به css تبدیل میشونداز sass همچون html استفاده میشود و کدها تو در تو هستند یعنی شما مثلا استایل ul و مینوسید و داخل اون li میزنید ul {display : flex ;li {list-style : none;}}با استفاده از دستور @import می‌توانید فایل ها و یا هرچیز مد نظر خود را انتخاب کنید شما با استفاده از دلار ساین ($) متغیر ها را تعریف میکنند این متغیر ها می توانند رنگ ها یا فونت و سایز واندازه ها و… باشند $font : ‘open sans’ ;
$primary-color : ‘red ; از دستورالعمل @extend برای ارث بری استفاده میشود می توانید ویژگی های کلی بدید بعد بقیه المان ها از اون ارث بری کنند و موارد اضافی رو پارد کنید %btn-shared { display: inline-block;padding: 0.8rem 2rem;cursor: pointer; }.btn {&-main {@extend %btn-shared;color : #333 }}همچون مثال بالا برای .btn نوشتن بعد با استفاده از کلید واژه & گفتم که .btn-main ارث بری و کند و رنگش رو تغییر دادم

Author: admin

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *