Sass یا Less پیشپردازندههایی هستند که میتوانند به شما کمک کند تا Stylesheet تان را ماژولار کنید و یا تابعهایی را به آن اضافه کنید که در CSS وجود ندارند.
شروع کار با آن بسیار سادهتر از چیزی است که تصور میکنید. بنابراین، در این مطلب یک مرور اجمالی از تنظیمات و تابعهای رایج خواهیم داشت. تا انتهای این مطلب همراه ما باشید.
برای راهاندازی Sass، روشهای ویژهای وجود دارد. اما این کار برای NodeJS یا پروژههای ReactJS که استایلهایشان در پوشه src قرار دارد، بسیار آسانتر است. تنها کافی است دستور زیر را اجرا کنید:
npm install --save node-sass-chokidar
سپس، مقادیر زیر را در قسمت scripts فایل package.json اضافه کنید:
"scripts": {
"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
فایل .css خود را به .scss تغییر دهید و npm run watch-css را اجرا کنید.
با افزودن variable-name$، مقدار CSS را میتوانید در یک متغیر قابل استفاده مجدد ذخیره کنید.
$sky: skyblue;
$grass: lawngreen;
header {
background-color: $sky;
}
footer {
background-color: $grass;
}
یک امتیاز ویژهای که این متغیرها دارند، این است که Local Scope آنها درون Selectorهای CSS است. از این رو، نگرانی بابت Global Namespace نخواهید داشت.
برای تمیز و مرتب کردن فایلهای خود میتوانید آنها را در بخشهای کوچکی با برچسب underscore تقسیمبندی کنید. برای اطلاع یافتن SCSS از وجود یک بخش، میتوانید از کد _variables.scss استفاده کرده و سپس کد @import ‘variables’ را در قسمت بالایی هر فایل قرار دهید. یکی از مزایای این روش در Sass نسبت به راهکارهای رایج و موجود در CSS این است که تعداد همه فایلهای مورد نیاز برای کامپایل را تنها به یک فایل کاهش میدهد. درنتیجه تعداد درخواستهای HTTP کاهش یافته و بارگذاری صفحه برای کاربران با سرعت بیشتری انجام میپذیرد.
Sass به شما این امکان را میدهد تا برای وضوح بیشتر، استایلهای زیر مجموعه را درون استایلهای والد بنویسید. در این صورت، سلکتورهای (selectors) فرزند استایلهای والد خود را به ارث میبرند.
@import ‘variables';
.container {
font-family: Arial, Helvetica, sans-serif;
.child1 {
color: $sky;
font-size: 10px;
}
.child2 {
color: $grass;
font-size: 40px;
}
}
با استفاده از دستور @mixin میتوانید ویژگیهای مشترک و رایج دستورات CSS را با یکدیگر گروهبندی کنید. در این حالت با استفاده از دستور @include میتوانید از این امکان در سرتاسر فایل خود استفاده نمایید. همچنین در صورت نیاز میتوانید آرگومانها و پارامترهای پیشفرض را نیز به آنها افزوده و به شخصیسازیشان کمک کنید. به مثال ساده زیر در این مورد توجه کنید:
@mixin button-color($color: green) {
background-color: $color;
color: white;
text-align: center;
font-size: 16px;
}
// example use of mixin below replacing default green with red
.green-btn {
@include button-color();
}
.delete-btn {
$red: #ff4500;
@include button-color($red)
}
با استفاده از دستور @mixin و روشی که در بالا ذکر شد، میتوانید توابع مورد نظر خود را ایجاد کنید.
دیدگاهها:
مهرداد
بهمن 16, 1399 در 7:41 ب.ظ
سلام
عالییییییییییی
مسعود صدری
بهمن 17, 1399 در 12:28 ق.ظ
سلام
خیلی ممنون.
رضا مرادی
آبان 2, 1399 در 2:34 ب.ظ
سلام. کد یا شبه کدهای نوشته شده رو LTR کنین. به شدت ممنون
مسعود صدری
آبان 3, 1399 در 1:48 ق.ظ
سلام
بله مشکل از پلاگین بود.
الان اصلاح شده.
ممنون که اطلاع دادید.
mh7
دی 7, 1398 در 10:43 ق.ظ
سلام و عرض خسته نباشید …
من از موقعی که باسایت خوبتون آشنا شدم علاقه ام به یادگیری برنامه نویسی خصوصا جاوااسکریپت بیشتر شد …الانم که این ویدئو مربوط به sass رو دیدم واقعا لذت بردم … ویدوئوها شما مختصر ولی مفیده … شما با کلام شیوایی که دارین یه انگیزه مضاعف به ما میدین … امیدوارم بتونم دوره هایی که رو سایت میزارید رو دنبال کنم … تو مرحله اول دارم دوره جاواسکریپت شمارو یاد میگیرم …
مسعود صدری
دی 7, 1398 در 10:58 ق.ظ
سلام
ممنونم از لطف شما. خیلی خوشحالم که اینو میشنوم 🙂
قطعا برای من باعث افتخاره.
موفق باشین.
aminda
آذر 28, 1398 در 9:55 ق.ظ
خیلی ممنونم از شما
منظورم این بود که همانطور که جناب عالی مطلع هستید برای موفیقت فقط داشتن مهات و علم برنامه نویسی به تنهایی کافی نیست(مهات سخت).
بنده خودم و یک از دوستانم به علت نداشتن مهات های نرم در چند سال پیش نتونستیم به عنوان یک برنامه نویس موفق باشیم و راهی رو که شروع کرده بودیم رو متاسفانه نصفه کاره رها کردیم…!!
با تجربه ای که دارم اینه که درسته که یک برنامه نویس لوزومی به داشتن مدرک دانشگاهی نداره ولی باید بعد از علاقه و پشتکار فراوان با مبانی برنامه نویسی+الگوریتم و مهات های نرم مثل کار تیمی،تفکر سیستمی،مدیریت زمان،مدیریت استرس و چالش ها،خلاقیت و هدف گزاری و خیلی چیزهای دیگه توی حوزه خودش کامل آشنایی و تسلط داشته باشه.
به خاطر همین گفتم با شما که دستی در کار دارید مطرح کنم…
به امید موفقیت
مسعود صدری
آذر 28, 1398 در 9:57 ق.ظ
کاملا موافقم با شما
حتما برای این موضوعات برنامه ریزی میکنم
aminda
آذر 27, 1398 در 7:06 ب.ظ
خیلی خوبه اینطوری پس…
جناب صدری بنظرم حتما یه دوره کامل هم در مورد ایجاد وب اپلیکیشن های pwa بزارید.
پیشنهاد هم داشتم که همانطور که مهارت های برنامه نویسی رو به خوبی به ما آموزش میدین بی زحمت چه به عنوان یک دوره مجزا یا در قالب پاکدست های گوناگون لطفا در مورد مهارت هایی به غیر از دانش برنامه نویسی مثل مهارت های لازم برای کار تیمی،مهارت های لازم برای دور کاری و فریلنسینگ. آموزش ویدئویی برای گیت و گیت هاب و گیت لب و هر مهارتی که برای موفقیت یک برنامه نویس لازمه رو هم تدارک ببینید و ما رو از تجربیات و دانش ارزشمندتون بی نصیب نزارید
با تشکر
مسعود صدری
آذر 28, 1398 در 12:11 ق.ظ
خیلی ممنونم از پیشنهادهای خوبتون. حتما برنامه ریزی میکنم.
aminda
آذر 27, 1398 در 8:48 ق.ظ
سلام
دوره جامع طراحی سایت میذارید یعنی؟ بعد از دوره MERN میتونیم منتظر باشیم؟
اگه انیطوری باشه که عالیه….
مسعود صدری
آذر 27, 1398 در 9:05 ق.ظ
سلام
بله توی برنامم هست.
arashmad
آذر 23, 1398 در 8:06 ب.ظ
سلام مسعود جان
ممنون بابت زحماتت و خدا قوت
در راستای آموزش Sass، آیا تو برنامه ات هست در مورد پیاده سازی رسیپانسیو سایت هم دوره ای بذاری؟ و اینکه این دوره اساسا با استفاده از Sass باشه؟
مسعود صدری
آذر 23, 1398 در 9:40 ب.ظ
سلام
ممنون از شما.
بله انشاالله یک دوره جامع خواهیم داشت.
محمدحسین قدیرزاده
آذر 22, 1398 در 12:21 ب.ظ
سلام آقای صدری، مطالب و ویدیوهای آموزشی که قرار میدید واقعا عالی، باکیفیت و کاربردی هستند و میتونم بگم بهترین سایت فارسی آموزش برنامه نویسی هستید. بنده تا جایی که امکانش هست به دوستانم سایت شما رو معرفی میکنم و حتی مطالب سایت شما رو با بقیه سایت ها واسشون مقایسه میکنم. به طوری که مجاب میشن تا از سایت شما برای یادگیری استفاده کنند. امیدوارم همیشه موفق و سربلند باشید.
مسعود صدری
آذر 22, 1398 در 4:12 ب.ظ
سلام
خیلی ممنونم از لطف و محبت شما، برای من باعث افتخاره 🙂
سمیرا
آذر 20, 1398 در 1:42 ب.ظ
مفید و کاربردی
سپاس فراوووون
مسعود صدری
آذر 20, 1398 در 2:22 ب.ظ
ممنون از شما 🙂