ویدیوی آموزشی: یادگیری Sass

 

دانلود ویدیو

 

 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 و روشی که در بالا ذکر شد، می‌توانید توابع مورد نظر خود را ایجاد کنید.

 

منبع

14 پاسخ به “ویدیوی آموزشی: یادگیری Sass”

  1. سمیرا گفت:

    مفید و کاربردی
    سپاس فراوووون

  2. محمدحسین قدیرزاده گفت:

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

  3. arashmad گفت:

    سلام مسعود جان
    ممنون بابت زحماتت و خدا قوت
    در راستای آموزش Sass، آیا تو برنامه ات هست در مورد پیاده سازی رسیپانسیو سایت هم دوره ای بذاری؟ و اینکه این دوره اساسا با استفاده از Sass باشه؟

  4. aminda گفت:

    سلام
    دوره جامع طراحی سایت میذارید یعنی؟ بعد از دوره MERN میتونیم منتظر باشیم؟
    اگه انیطوری باشه که عالیه….

  5. aminda گفت:

    خیلی خوبه اینطوری پس…
    جناب صدری بنظرم حتما یه دوره کامل هم در مورد ایجاد وب اپلیکیشن های pwa بزارید.
    پیشنهاد هم داشتم که همانطور که مهارت های برنامه نویسی رو به خوبی به ما آموزش میدین بی زحمت چه به عنوان یک دوره مجزا یا در قالب پاکدست های گوناگون لطفا در مورد مهارت هایی به غیر از دانش برنامه نویسی مثل مهارت های لازم برای کار تیمی،مهارت های لازم برای دور کاری و فریلنسینگ. آموزش ویدئویی برای گیت و گیت هاب و گیت لب و هر مهارتی که برای موفقیت یک برنامه نویس لازمه رو هم تدارک ببینید و ما رو از تجربیات و دانش ارزشمندتون بی نصیب نزارید
    با تشکر

  6. aminda گفت:

    خیلی ممنونم از شما
    منظورم این بود که همانطور که جناب عالی مطلع هستید برای موفیقت فقط داشتن مهات و علم برنامه نویسی به تنهایی کافی نیست(مهات سخت).
    بنده خودم و یک از دوستانم به علت نداشتن مهات های نرم در چند سال پیش نتونستیم به عنوان یک برنامه نویس موفق باشیم و راهی رو که شروع کرده بودیم رو متاسفانه نصفه کاره رها کردیم…!!
    با تجربه ای که دارم اینه که درسته که یک برنامه نویس لوزومی به داشتن مدرک دانشگاهی نداره ولی باید بعد از علاقه و پشتکار فراوان با مبانی برنامه نویسی+الگوریتم و مهات های نرم مثل کار تیمی،تفکر سیستمی،مدیریت زمان،مدیریت استرس و چالش ها،خلاقیت و هدف گزاری و خیلی چیزهای دیگه توی حوزه خودش کامل آشنایی و تسلط داشته باشه.
    به خاطر همین گفتم با شما که دستی در کار دارید مطرح کنم…
    به امید موفقیت

  7. mh7 گفت:

    سلام و عرض خسته نباشید …
    من از موقعی که باسایت خوبتون آشنا شدم علاقه ام به یادگیری برنامه نویسی خصوصا جاوااسکریپت بیشتر شد …الانم که این ویدئو مربوط به sass رو دیدم واقعا لذت بردم … ویدوئوها شما مختصر ولی مفیده … شما با کلام شیوایی که دارین یه انگیزه مضاعف به ما میدین … امیدوارم بتونم دوره هایی که رو سایت میزارید رو دنبال کنم … تو مرحله اول دارم دوره جاواسکریپت شمارو یاد میگیرم …

پاسخی بگذارید

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

برای اطلاع از کدهای تخفیف و به روز رسانی دوره‌ها عضو کانال تلگرام فرانت کست شوید. t.me/frontcast