آشنایی با Sass

توی این جلسه میریم ببینیم تا الان چی کردم. پس یه سر میزنیم به Bootstrap و در ادامه به Sass میپردازیم.

Sass رو روی VScode میاریم تا بتونیم راحتتر CSS بزنیم.

در ادامه به چند نکته در Sass میپردازیم تا آماده کار بشیم.


Sass یک زبان پیش پردازش CSS است که به توسعه‌دهندگان وب کمک می‌کند CSS را به طریقی بهتر و سازماندهی‌تر ایجاد کنند. با استفاده از Sass، می‌توانید کدهای CSS خود را بسیار خواناتر، قابل نگهداری‌تر و قدرتمندتر کنید. در زیر چند مورد از ویژگی‌های برجسته Sass را برایتان توضیح می‌دهم:

  •  متغیرها: Sass به شما این امکان را می‌دهد تا متغیرها را در کدهای CSS خود تعریف کنید. این به شما اجازه می‌دهد تا مقادیری مانند رنگها، پهناها و حتی فونت‌ها را یک‌بار تعریف کرده و در سرتاسر پروژه‌تان به آنها دسترسی داشته باشید.
  • توالی‌ها و توابعSass دارای توالی‌ها (Mixins) و توابع است که به شما این امکان را می‌دهند تا کدهای تکراری را کاهش دهید. می‌توانید توالی‌ها را برای تولید کدهای CSS پیچیده‌تر یا توابع را برای انجام محاسبات درون خطی استفاده کنید.
  • توگل‌ها (Nesting): شما می‌توانید تگ‌ها و کلاس‌ها را درون یکدیگر تو در تو تعریف کنید تا کدهای CSS خود را به شکل سازماندهی‌تری بنویسید.
  • واحد‌های معیار CSSSass به شما این امکان را می‌دهد تا به واحدهای معیار CSS مانند px، em و rem به صورت دینامیک دسترسی داشته باشید و از آنها بهره‌برداری کنید.
  • وارثی‌سازی (Inheritance): با Sass می‌توانید قوانین CSS را به طور واضح تر و از طریق وارثی‌سازی کدها به تگ‌ها و کلاس‌ها اعمال کنید.
  • قابلیت تفکیک‌پذیری (Modularity)Sass به شما این امکان را می‌دهد تا پروژه‌تان را به بخش‌های کوچکتر و مدولار تقسیم کنید، که این به بهبود قابلیت نگهداری و مدیریت کد کمک می‌کند.

برای استفاده از Sass، شما نیاز دارید که ابتدا آن را نصب کنید و سپس فایل‌های Sass خود را ایجاد کنید و پس از پردازش با استفاده از کامپایلر Sass به فایل‌های CSS تبدیل کنید. به این ترتیب، می‌توانید از تمام امکانات و ویژگی‌های قدرتمند Sass بهره‌برداری کنید و کدهای CSS بهتری بسازید.

1 شروع به کار با HTML 19:22

توی این قسمت با VSCode آشنا میشیم و یک پکیج کاربردی رو معرفی میکنیم که بدون اون واقعا کد زدن سخته. در ادامه اولین صفحه HTML رو میسازیم و توش به معر ...

2 ادامه کار با HTML 47:30

این قسمت، ادامه بحث در باره HTML هست. با تگ های بیشتری آشنا میشیم، همچنین کاربرد اتربیوت ها رو توی تگ ها یاد میگیریم. آدرس دهی نسبی رو میبینیم چجوریه ...

3 شروع به کار با CSS 26:37

توی این قسمت در ابتدا، جلسه های قبل رو دوره میکنیم. در ادامه میگیم CSS چیه و چیکار میخواد واسمون بکنه. اولین CSS رو میزنیم و با اولین Selector آشنا می ...

4 سلکتورها در CSS و بحث درباره اولویت سلکت ... 29:15

در ادامه جلسه قبل ( آشنایی با CSS )، توی این جلسه به بحث بیشتر در باره سلکتورهایی مثل ID و CLASS می پردازیم. همچنین بیشتر در باره اولویت ها صحبت میکنی ...

5 کار با چند Property و Value در CSS 27:04

توی این جلسه به چند Property و Value های مربوطه برای CSS می پردازیم. مثل position display border font-size و ... و البته بحث بیشتر ...

6 پروژه ساده با HTML و CSS 30:03

توی این قسمت، بیشتر با CSS کار میکنیم و با Property و Value های بیشتری آشنا میشیم مثل: transform  background-image background-size backgro ...

7 آشنایی با JQuery 23:38

توی این جلسه، به معرفی JQery می پردازیم. در واقع JQuery یک کتابخانه هست که با JavaScript نوشته شده. JQuery بهمون امکان کنترل Event های توی صفحه رو ...

8 آشنایی با Bootstrap 24:25

توی این جلسه، به معرفی Bootstrap می پردازیم. Bootsrap یک Framework برای Front-End کارهاست تا همه چیرو خیلی سریعتر شروع کنن و نیاز به کنترل موارد کمتری ...

9 آشنایی با Sass 26:26

توی این جلسه میریم ببینیم تا الان چی کردم. پس یه سر میزنیم به Bootstrap و در ادامه به Sass میپردازیم. Sass رو روی VScode میاریم تا بتونیم راحتتر CS ...

10 ساخت اسلایدر با SwiperJs 35:11

  هدف این جلسه معرفی ابزاری برای ساخت #اسلایدر (#slider) توی فرانت اند هست. همون طور که از قبل دیدین، ما برای درست کردن یک صفحه، میتونیم کد هارو از ...

11 ساخت اسلایدرهای دیجیکالا با چیزهایی که ب ... 43:03

توی این جلسه میخوایم با استفاده از چیزهایی که بلدیم چنتا اسلایدر بسازیم. برای همین نیاز به یک نمونه داریم. میریم از DIGIKALA نگاه میکنیم و ایده میگیری ...

نظرات
مروارید
عاالی. ممنون🙏