خب بزارید اول از hamlشروع کنم . چرا ؟ چون ایده sass از haml الهام گرفته شده .
haml توضیحش در یک خط چیه؟
haml یا html abstraction markup language یک پیش پردازنده برای زبان html هست که توسط شخصی به نام آقای کاتلین درست شده در سال 2006 .
خب حالا دلیل این که اصلا پیش پردازنده ها وجود دارند چیه؟ به چه کار ما میان این زبان و سینتکس های پیچیده( البته در نگاه اول ، چون وقتی ک واشکافی شون بکنم خیلی ساده به نظر میان).
اقای کاتلین دید که ما وقتی داریم html کد می زنیم کد هامون خیلی شلوغ میشه چون که ما داخل تگ هامون id یا class یا attributeداریم که باعث میشه کلییییییی کدهامون شلوغ بشه و بدتر از همه اینه که کلا ما هنوز شروع نکردیم به داینامیک سازی کردن کدهامون و اون خودش قراره کلی قضیه رو شلوغ تر بکنه و باز رسیدیم به dry fucking code.
خب اینو نگاه کنید این کد تازه استاتیک هست.
خب بک اند کارهای عزیز که وظیفه شون داینامیک کردن سایت هست باید کد های ما فرانت اند کار ها رو بگیرند و با چیزی به اسم تمپلیت انجین (template engine) بیان شروع کنن به داینامیک سازی داخل خود html و این دلیلی میشه بر اینکه نیاز پیدا بشه تا کد هامون تر و تمیز و سوسکی بشه.البته تا می تونید بک اند کارهارو اذیت کنید و کد کثیف بدید بهشون چون اونا ما فرانت اند کارها رو برنامه نویس نمی دونن و هر چند وقت یه بار جنگ فرانت کارها و بک اند کارها شروع میشه داخل توییتر :D .
خب حالا برگردیم به haml .
بله دوستان، پیش پردازنده میاد کد های مارو خواناتر و مرتب تر و کم حجم تر میکنه .بیاید همون کد html بالایی رو که دیدم رو حالا با زبان haml ببینیم.
خب می بینید که ب جای تگ باز و بسته فقط از % قبل تگ استفاده شده و به جای نوشتن استرینگ id , class از نماد ها و سمبل هاشون که داخل css استفاده می کنیم ، استفاده می کنیم. مثلا محتوای داخل تگ h1 جلوش نوشته شده بدون هیچ دابل کوتیشنی.
و یا تگ p فرزندی داره به نام تگ a ( از طریق تو رفتگیش میشه فهمید که فرزندش هست) و اتریبویت href رو داخل آکولاد نوشته .
اینا تفاوت های html با پیش پردازنده ش که haml هست ،هستش و در مورد احساس نیازمون به پیش پردازنده که توضیح دادم و اینکه چجوری قراره مشکلات رو حل بکنه.
در واقع با حذف کردن تگ های بسته و استرینگ های اضافی کد مارو خلوت تر می کنه و مهم تر از هرچیز ایده haml بر اساس indentation یا همون فرورفتگی یا فاصله گذاری هست. اگه .netکار باشید یا js کار یا php کار قطعا اصلا عادت ندارید از این نوع اسکوپ گذاری استفاده کنید ولی این مشکل به زودی حل میشه به یه طریقی البته در sass که جلوتو تر براتون کالبد شکافیش می کنم ولی اگه پایتون کار یا روبی بلد باشید احتمالا انتخاب شما sass هست.
خب پس اقای کاتلین یه تجربه موفق در hamlداشت و این باعث شد که بیاد این ایده رو استفاده کنه تا css رو هم خلوت کنه و اینجاس که پیش پردازنده ها وارد css شدن تا اون سمی کالن و اکولاد های رو مخ رو برامون حذف کنن.
خب sass یک پیش پردازنده برای css هست. پیش پردازنده یعنی چی؟(از دیدگاه دیگه ای ) یعنی اینکه قبل از پردازش css، میاد یه سری قابلیت به ما میده تا بتونیم با زبان نشانه گزاری css بیشتر شبیه یک زبان برنامه نویسی رفتار کنیم و کد های ما هم ساختار مند تر بشه و هم نگه داری و debug کردنش راحت تر بشه. به نظرم بهتره که اگه کدهای cssشما بیشتر از 1000 خط باشه حتما از sass استفاده کنید.
خب ما پیش پردازنده های مختلفی داریم مثل sass ،less ،stylus ولی اکثرا sass رو ترجیح میدن بنا به دلایلی که اینجا بهش اشاره نمی کنم چون بحث تمرکزش رو خودsass هست.
در این پیش پردازنده دو نوع سینتکس وجود داره . اولی sass هست و دومی sassy css یا به اصطلاح scss
بزارید یه مرزی براتون مشخص کنم تا sass و scss رو قاطی نکنید.
پیش پردازنده sass یک زبان هست و همینطور یک سینتکس ولی scss یک سینتکس هست و زیر مجموعه ی sass .
خب بدونید که وقتی sass به ورژن 3 رسید در سال 2010 که css3 هم دیگه معرفی شده بود یک نسل جدید در sass به وجود اومد که سینتکسی خیلی شبیه css3 داشت و اسم اون شد scss یا sassy css .
البته شما می تونید از یکی از این سینتکس ها می تونید در یک فایل استفاده کنید ولی الان که سال2020 هست از هر دوسینتکس میشه استفاده کرد و پشتیبانی خوبی دارن توسط w3.اول بریم دوتا قطعه کد ببینیم از هر دوتا سینتکس.
این سینتکس sass هستش
توضیح این نوع سینتکس:
همون طور که می بینید دیگه خبری از سمی کالن(;) و curly braces (همون آکولاد یا کورشه خودمونه) نیست و اسکوپ های ما به صورت فرورفتگی یا intended هست مثل زبان پایتون. ولی در css ما پایان هر statement یک سمی کالن میذاشتیم و اسکوپ هر کلاس یا تگ رو با آکولاد مشخص می کردیم.
میگن که sassاز یک پیش پردازنده html به نام HAML قدرت گرفته و می دونید که هر دوتا پیش پردازنده توسط اقای کاتلین همراه با شوهرش درست شده ( ایشون مثل آقامون آلن تیورینگ علاقه ای به زن ها نداشتن ) که اون هم دقیقا اساسش فرورفتگی هست .
اینم قطعه کدی از دیگه ای HAML
پس دلیل فرورفته بودن SASS به خاطر الگو گرفتن از HAML هست ولی در ورژن 3 یک سینتکس جدید به وجود اومد که کاملا شبیه CSS3 رفتار می کرد و نسل بعدی SASS محسوب میشه که اسمش رو گذاشتن SASSY CSS یا همون SCSS
این سینتکس چون که شبیه CSS3 هست رایج تره و ازش استفاده میشه.
خب حالا بریم ببینیم چ کارا می کنن برامون این پیش پردازنده ها.
اولا که ما در فاز توسعه از SCSSاستفاده می کنیم ولی در نهایت همه چیز کامپایل میشه به CSS چون که مرورگر در نهایت HTML و CSS و JS رو می فهمه.
کامپایلری که وجود داره برای کامپایل کردن SCSS اسمش هست NODE-SASSکه با استفاده از NPM می تونید نصبش کنید.
ما از SCSS استفاده می کنیم تا بتونیم داخل CSS از متغیر ها یا تابع ها و.. که اکثر زبان های برنامه نویسی دارن استفاده کنیم و البته با استفاده از قابلیت IMPORT می تونیم ساختاری شبیه به کدنویسی ماژولار رو ب وجود بیاریم و DEBUG کردن برامون خیلی اسون تر میشه.
شاید شما داخل مرورگر INSPECT گرفته باشید و می بینید که فایل SCSS رو داره بهتون نشون میده و به خودتون می گید مگه نمیگن که مرورگرفقط CSS می فهمه پس این چیه؟
مثل این عکس
اگه دقت کنید نوشته که این کد مربوط هست به MAIN.SCSS خط 13.
خب دلیل این وجود SOURCE MAP ها هستن که اگه بیشتر می خواید بدونید برید از خدامون گوگل بپرسید.
چطوری راه اندازی کنیم محیط رو برای کد زدن با SCSS ؟
خیلی ساده س ،راه های زیادی وجود داره
مثل کانفیگ کردن WEBPACK و استفاده از LOADER ها
مثل استفاده از NPM SCRIPT البته با کمک کامپایلر NODE-SASS
ولی راهی که سریع تر از همه هست اسفاده از افزونه های VS CODE هست.
برید داخل افزونه هاتون در IDE و سرچ کنید این دوتا افزونه رو :
1. LIVE SASS COMPILER
2. LIVE SERVER
خب همین کافیه.
کانفیگ خاصی لازم ندارن ولی خب برید یه ویدیو داخل یوتویوب ببینید که چطوری ازش استفاده می کنن.
افزونه اولی برای ما SASS رو کامپایل می کنه و قابلیت WATCHINGداره که باعث میشه تغییرات رو لحظه به لحظه چک کنه و به قولی مراقبت کنه
افزونه دومی هم که باعث میشه ما هی نریم رفرش یا ری لود کنیم مرورگر ور تا تغییرات رو ببینیم و با سیو کردن کد هامون خود مرورگر ری لود میشه و ما می تونیم تغییرات رو لحظه ای ببینیم البته بعد از سیو کردن.
خب ما داخل INDEX.HTML با اسفاده از تگ لینک باید به یک فایلcss ارجاع بدیم نه scss
شما وقتی کد SCSS رو می زنید افزونه LIVE SASS COMPILER میاد تو همون محل براتون یک فایل CSS و ِیک فایل SOURCE MAP براتون می سازه تو همون محل و شما در INDEX.HTML باید به اون فایل CSS مسیر دهی کنید.
خب تا الان حرف زدیم از انواع پیش پردازنده ها و چرا باید از SASSاستفاده کنیم و اینکه برای اینکه چون SCSSکه زیر مجموعه SASS محسوب میشه ولی نزدیک تر هست به سینتکس CSSما میایم از اون استفاده می کنیم.
و بعد حرف زدیم از سریع ترین روش راه اندازی محیط برای کد زنی به شیوه SASS
حالا وقتشه که ببینید در SCSS چه قابلیت هایی اضافه شده که ما بهتره ک ازش اسفاده کنیم؟
این قانون به ما قابلیت تو در تو نویسی رو میده
ینی چی؟
بزار کد نشونتون بدم!!
خب این کد رو دیدین؟
این یک کدSASSهست با سینتکس SCSS چون که آکولاد و سمی کالن داره
از اونجایی که تگ NAV فرزند تگ BODY هست پس باید این تگ رو ما داخل آکولاد BODY بنویسیم.
همین این میشه قابلیت تودرتو و البته می تونیم یک سری پراپرتی هارو هم داخل آکولاد بنویسیم مثل خاصیت مارجین که من باهاش این کارو کردم
مثلا میتونیم FONT رو بوجود بیاریم و خاصیت های دیگه رو داخل اکولاد بنویسیم خاصیت هایی مثل SIZE یا WEIGHT
& چیه؟
در بحث OOPما کلمه کلیدی THIS رو داریم که به کلاس اشاره می کنه.
همین رابطه ای برقراره بین & و اسم تگ و در واقع & به اسم تگ اشاره می کنه و کاربرد گسترده س برای مثلا HOVER کردن اون تگ هست یا هر Pseudo-classes
خب این از اولین ویژگی که به ما میده و در واقع وقتی میگم کد هامونو ساختار مند تر میکنه منظور همچین ویژگی ای هست.
VARIALBLES
با استفاد از $ میایم متغییر هامونو تعریف می کنیم و سپس مقدار دهی می کنیم و بعد استفاده در کد.
بخش بندی کردن فایل ها در SCSS
یه قابلیتی وجود داره شبیه کدنویسی به صورت ماژولار ولی دقیقا اون نیس
ما یک فایل اصلی داریم مثلا به اسم STYLE.SCSS و می تونیم چندتا فایل دیگه هم بسازیم و در نهایت داخل فایل اصلی IMPORT کنیم .
البته نکته ای ک وجود داره اینه که فایل های فرعی ما باید اول اسمشون UNERLINE باشه مثلا یک فایل داریم که تمام متغیر هامونو میخوایم اونجا تعریف کنیم اسمشو می ذاریم
_VARIABLES.SCSS
حالا فلسفه این آندرلاین چیه؟
کامپایلر میفهمه که از این فایل SCSS نباید یک فایل جداگانه ی CSS دیگه درست کنه و بعد کامپایل ما فقط CSS شده فایل اصلی که همون STYLE.SCSS هست رو داریم و اگر اندرلاین نذاریم از فایل VARIACLES.SCSS یک فایل VARIABLES.CSS ساخته میشه ک ما با UNDERLINEجلوگیری می کنیم ازساختن این فایل.
خب مثلا به فایل های خود فریم ورک bootstarp نگاه کنید.
تمامی فایل هایی که under line دارن فایل های فرعی هستن که در فایل های دیگر import شدن و فایل اصلی ما اونی هست که underline نداره که اسمش هست bootstarp.
قسمت بعدی که وجود داره mixin ها هستن:
در واقع کارشون اینه که بتونیم یه جور گروه بندی دستورات رو انجام بدیم تا از تکرار زیاد گد جلوگیری بشه
خوبی استفاده از mixin ها این هست که میشه از تکرار کد های تکراری جلوگیری کرد
مثلا به جای اینکه هربار بنویسیم display:flex و justify-content:center می تونیم در قالب یک mixin اینو بنویسیم و با include کردن اون mixinکدهامونو فراخوانی بکنیم.
کار با عملگرها:
در واقع ما می تونیم در scss از چهار عمل اصلی استفاده بکنیم و جمع کنیم ضرب کنیم و...
مثلا ====< $font= font-size *3 اتفاقی ک میفته اینه ک مقدار فونت رو ضرب در 3 میکنه
با استفاده از کلمه کلیدی extend می تونیم از کلاس های دیگه ای که نوشتیم ارث بری کنیم.
مثلا @extend .class ;
در واقع با کلمه کلیدی function میشه از توابع استفاده کرد
@function name()
{
@return ….;
}
خب ما قابلیت ساختار شرطی یا حلقه رو هم داریم در sass
و با همچین سینتکسی شما می تونید ساختار شرطی در scss بنویسید.
در sass برای حلقه 3 نوع کلمه کلیدی وجود دارد که اولین کلمه هست @for
خب مثل همیشه می خوام روی قطعه کد توضیح بدم این سینتکس رو
بعد از کلمه کلیدی @for ما یک متغیر تعریف می کنیم که همون گام حلقه یا stepما هست و تعیین می کنیم که چند بار این حلقه تکرار شود مثلا در این کد ما برای داشتن گام حلقه متغیر i رو تعریف کردیم و گفتیم که 10 بار کد ما تکرار بشه و برای اینکه بتونیم اسم کلاس رو داینامیک تر بکنیم از #{} استفاده کردیم تا بشه عدد هایی جاگزین اون قسمت کرد مثل 1,2,3,… که بستگی به گام حلقه داره ک چه مقداری داشته باشه.
حلقه بعدی @while هست.
در این حلقه اول کلمه کلیدی رو می نویسم و بعد شرط مورد نظرمونو درون پرانتز می نویسیم
در اخر میایم در هر مرحله یک واحد از i کم می کنیم تا بتونیم حلقه رو کنترل کنیم و در حلقه بینهایت نیفتیم که با ارور مواجه بشیم.
حلقه بعدی در واقع @each هست که به ما کمک می کنه تو تعداد محدود بتونیم حلقه درست کنیم و کارکرد خیلی ساده ای داره که در قطعه کد زیر می تونید بفهمید و نیازی به توضیح بیشتر نیست.
خب اینم از منابعی که یاد گرفتم ازشون:
لینک اول<br/>لینک دوم<br/>لینک سوم
اینم تمام فهمیده های من از بحث پیش پردازنده ها بود
خوشحال میشم کامنت بزارید نظرو انتقاد و اگه اشتباهی وجود داره اطلاع بدید تا اصلاح کنم.
این موضوع رو انتخاب کردم دیدم چون تو وب فارسی مطلب کم هست براش.
برای ارتباط با من در توییتر : ارتباط
