- مدرس دوره : تاپ لرن ( رزومه )
- تعداد ویدیوها : 13 ویدیو
- مدت زمان دوره : 3:45:00
- سطح دوره : مقدماتی
- وضعیت دوره : به اتمام رسیده
- تاریخ آخرین بروزرسانی : 1398/12/28

آموزش زبان less از مقدماتی تا پیشرفته
دوره آموزش 0 تا 100 زبان less که یکی از زیرشاخه های css محسوب میشود، دوره ای کامل و با کیفیت برای شما عزیزانی است که خواستار استفاده از css بصورت بسیار پیشرفته تر و مانند یک زبان برنامه نویسی مثل جاوااسکریپت هستید. البته لازم به ذکر است که این دوره مقدماتی نیز دارد که شما باید آنها را بطور حرفه فراگرفته باشید تا این دوره را شروع کنید.
1) Html 2) css ====> در صورت تمایل میتوانید این دوره ها را بصورت کامل رایگان در تاپلرن تهیه کنید
—————————————————————————————
خب دوستان! سوالی که برای ما پیش میاد اینه که less چیه و چه کاربردی داره؟؟؟
Less پلتفرمی است که با افزودن امکان کد نویسی، استایل دهی صفحات را سادهتر میکند. Less بسیاری از امکانات یک زبان برنامه نویسی همانند تعریف متغیر، ترکیب متغیرها و بسیاری از ویژگیهای دیگر را برای نوشتن کدهای CSS بکار میبرد که بتوان با استفاده از آنها کدها را سریعتر و خواناتر نوشت. کامپایلر اصلی LESS با جاوا اسکریپت نوشته شده است و کدهای نگارش یافته را به فرمت استاندارد CSS تبدیل میکند. نگارش استایلها با دید ماژولار از قابلیتهای این فریم ورک است. استفاده مجدد از مقادیر با استفاده از متغیرها، استفاده مجدد از بلاکها با استفاده از mixins، استایلهای مختصر با قوانین تو در تو، انجام محاسبات با استفاده از توابع و عملگرها از جمله ویژگیهای بارز این فریم ورک است
مزایای استفاده از LESS:
• استفاده از برنامه نویسی برای ایجاد استایلها
• بهبود نگارش CSS و استفاده بهینه از CSS3
• افزایش سرعت کدنویسی به کمک mixin
• خوانایی و پیمایش بهتر دستورات تو در تو
• استفاده از MIXIN که همانند توابع در برنامه نویسی عمل میکنند. شما میتوانید استایلهایی که در خیلی از مواقع از آنها استفاده میکنید را به صورت یک تابع بنویسید و آن را هر کجا که خواستید، فراخوانی کنید
فهرستـــ ویدیوها
مدت زمان دوره 3:45:00با مشاهده آنلاین جلسات در سایت ، هزینه اینترنت شما به صورت نیم بها محاسبه خواهد شد.
شرح کامل زبان LESS CSS و پیش پردازنده ها
پیش پردازنده های css یک سری زبان های اسکریپتی هستند که پس از کامپایل به یک فایل css ساده تبدیل می شوند.
1)LESS 2)SASS 3)STYLUS
نمونه ای از این زبانها هستند
ساخت و کامپایل اولین فایل LESS
همانطور که در جلسات قبلی ذکر شد، برای استفاده از فایل هایی با فرمت LESS. نیاز داریم آنرا با یک کامپایلر مخصوص تبدیل به فایلی با فرمت CSS. کنیم
آشنایی با متغیر ها در less
یکی از مقادیر پر کاربرد و پیشرفته ای که در زبان less وجود دارد، متغیر ها یا variables هستند. این کارایی ساختاری مانند زبان های برنامه نویسی به less میدهد.
پروژه عملی شماره یک ۱
در اولین مینی پروژه دوره آموزشی less css قصد داریم با استفاده از آموخته های قبلی، بخصوص متغیر ها( Variables ) یک صفحه استاتیک html را با less درست کنیم.
آموزش mixin ها در LESS
یکی از پیشرفته ترین کاربرد های less، میکس این ها (Mix-ins)هستند که به ما قابلیت پیشرفته تر نویسی css را میدهند
آموزشmixin guards و nestings
mixin guard ها یکی از ویژگی های خوب LESS هستند که به ما اجازه شرطی سازی صفحات را میدهند. Nesting یک قابلیت مثبت است که ساختار CSS را مانند HTML میکند
پروژه عملی شماره ۲
در این جلسه قراره تمامی یافته ها و مطالب جلسات قبلی رو پوشش بدیم و بطور کامل مرور کنیم
آموزش عملگرها(operators) در LESS
operators یا همان عملگرها، یکی دیگر از قابلیت های مثبت less هستند که به واسطه موتور پردازش این زبان، میتوان از آنها به عنوان یکی از پرقدرت ترین ویژگی های less یاد کرد
موزش Function ها در LESS
در این جلسه قراره مبحث بسیار جالب و کارآمد Function ها رو با مثال های بسیار کوچکی پوشش بدیم
پروژه عملی شماره ۳
در این جلسه قصد داریم تا مانند سایر پروژه های عملی، مروری کلی بر روی مباحث قبلی دوره رو داشته باشیم.
نظرات کاربران در رابطه با این دوره
shiva.ka
ارسال شده در 1400/08/11مرسی نکات خوبی رو گفتین به دردم خورد.
flamenco
ارسال شده در 1400/05/30سلام خسته نباشد.ممنون از آموزش خوبتون
mhmd jg
ارسال شده در 1400/01/17سلام خسته نباشید
less یا sass کدوم رو یاد بگیریم و این دو چه فرقی باهم دارند و کدوم برای اینده بیشتر استفاده خواهد شد؟
تشکر
امیرحسین معصومی
ارسال شده در 1400/01/17سلام دوست عزیز. sass از نظر شخصی من عمومی تر هست. معمولا فریمورک هایی مثل بوت استرپ رو با sass پیاده سازی میکنن. اما less خیلی هَندی تر هستش. زیاد سخت نیستن و پیشنهاد من یادگیری هر دوی این پیش پردازنده ها هست
erfanmotallebi
ارسال شده در 1399/11/04با سلام و خسته نباشید
ممنونم از دوست عزیزم آقا امیر حسین ویدیو ها بسیار عالی بودن خیلی خوب بود
کوتاه ولی بسیار مفید و گیرا خیلی ممنون . متشکرم از این تلاشی که کردین در این مبحث
فقط یک سوال کوچک داشتم که میخواستم از دوست عزیزم بپرسم
که مبحث مربوط به LESS CSS Preproccesser با ۱۴ قسمت تموم میشه یا اینکه نه ادامه داره ؟
بازم ممنون از دوست عزیزم آقا امیر حسین و سایت تاپ لرن
امیرحسین معصومی
ارسال شده در 1399/11/04Preproccessor ها یک shorthand برای css محسوب میشوند که از مزیت اونها فقط برنامه نویس بهرمند میشه. برخلاف فریمورک ها که کار رو هم توسعه میدن. کاملا مطالب پوشش داده شد اما با حمایت شما عزیزان شاید دوره رو آپدیت کردیم و پروژه های عملی هم انجام دادیم :)
erfanmotallebi
ارسال شده در 1399/11/04ممنونم. من با این ویدیو ها تقریبا یاد گرفتم. ممنون از دوست خوبم
F_M_Sh
ارسال شده در 1399/06/01سلام و خداقوت
واقعا واقعا دوره بسیار خوب و کاربردی و جذابی بود
خیلی متشکرم از تدریس فوق العاده خوبتون
واقعا less کار با css رو خیلی سریعتر کرده
فقط من نمیدونم ک چ جوری باید less رو ران کرد به صورت افلاین و روی یک برنامه مثلا نوت پد پلاس پلاس یا نت بینز
اگرم ک امکان نداره ویژیال استودیو رو نصب کنم
ممنون
موفق باشید
امیرحسین معصومی
ارسال شده در 1399/06/01سلام عزیزم نظر لطفته. واقعیت که این اولین دوره من بود و کلی ضعف داشت. کم و کاستی بود ببخشید
______________________________________________________
در باره سوالت باید بگم که قبلا در بخش پرسش و پاسخ همین دوره مطرح شده. و من کامل شرح دادم.
https://toplearn.com/ShowQuestion/36085/%DA%A9%D8%A7%D9%85%D9%BE%D8%A7%DB%8C%D9%84-less-%D8%A8%D9%87-css-%D8%AF%D8%B1-phpstorm
اینم لینکش
اما اگر حال و حوصله نداری بری تو این صفحه، متن کاملش رو اینجا گذاشتم برات ;-)
1. به سایت https://nodejs/en/download برید، node js رو دانلود و نصب کنید
2.داخل cmd بزن node-v تا ورژن نصب شده نود رو بهت بده(و مطمئن بشی که نود نصب شده)
3.حالا بزن npm install -g less تا less توی سیستمت نصب بشه و بزن less-v تا ورژنشو عین نود بده بهت
4.حالا از cmd یا terminal(یا هر terminal دیگه ای توی کد ادیتور ها) رو باز کن. و مثل من کامپایل کن
lessc css/style.less css/style.css
-الان من فایل less که در پوشه css ساخته بودم رو کامپایل کردم و اسمش رو گذاشتم style.css و توی همون پوشه css ریختمش.-
*درواقع lessc یعنی "جناب لِس، برای من کامپایل کن"
*در قسمت دوم جملمون اینطوری میشه "جناب لِس برای من کامپایل کن فایل style.less داخل پوشه css رو"
*در قسمت آخر هم جملمون کامل میشه و بهش مگیم که اون فایل کامپایل شده رو با جه نامی ذخیره کنه و کجا بریزه. من بهش گفتم "فایل style.less داخل پوشه css رو که کامپایل کردی، با نام style.css ذخیره کن و بریز توی پوشه css(یعنی بقل خود فایل less ریختمش)"
امیدوارم خوب توضیح داده باشم ;-)
|| حتما اگر سوالی بود بپرس دوست عزیزم ||
F_M_Sh
ارسال شده در 1399/06/02مرسی و ممنون از توضیحتون
ولی بنظرم این روش هی باید کامپایل کرد با ترمینال و تو خود برنامه ب طور مستقل ک هربار دارم کد مینویسم در دسترسم باشه نیست
بنظرم کامپایل انلاین بهتره تا اینجوری که هی کده بدیم ترمینال
مرسی و ممنونم
موفق باشید
elirzm
ارسال شده در 1399/06/01چجوری لینک مستقیمو بگیرم ازتون؟
امیرحسین معصومی
ارسال شده در 1399/06/01ایمیل بزن عزیزم
elirzm
ارسال شده در 1399/05/26سلام مجدد من اکثر دوره هاتون رو تو گوشی دیدم و هیچ مشکلی نداشتم اما فایل های less اکسترکت هم نمیشه و error میده و چندین بار تست کردم و حتی به صورت آنلاین هم تصویر ندارم درحالی که بقیه آموزشهاتونو به راحتی میبینم
امیرحسین معصومی
ارسال شده در 1399/05/26عجیبه واقعا. بقیه مشکلی نداشتن.
علیرضا جان، شما به من اینو بزن تا من لینک مستقیم جلسات رو بفرستم برات ♥️