ساس چیست ؟ (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 ارث بری و کند و رنگش رو تغییر دادم
