آموزش Sass قسمت دوم
با عرض سلام و خسته نباشید خدمت دوستان عزیز با جلسه ی دوم SASS در خدمت شما دوستان عزیز هستم
در این جلسه میخوایم به بررسی راه های ایجاد ساختار برای شیوه نامه آبشاری مان بپردازیم.
ساختار دهی چیست؟ :
منظور از ساختار دهی ایجاد یک ساختمان بخش بندی شده برای شیوه های وبسابت ما می باشد ساختار دهی :
1. شکستن بخش های مرتبط یک شیوه نامه (به طور مثال بخش تایپو گرافی، بخش هدر ها، بخش فوتر ها و سایر استایل هایی که به هم مربوط هستند) و تبدیل هر بخش به یک فایل شیوه جدا به منظور شازماندهی
2.یافتن الگو های تکراری در شیوه نامه مان و ایجاد یک الگو در نقش تمامی شیوه های استفاده شده
3. ایحاد متغییر برای مقادیر بیش از حد تکرار شده به منظور مدیریت بهتر بر روی شیوه نامه
.4ایجاد ساحتار های تو در تو (مورد بررسی قرار خواهد گرفت)
فرض کنید یک شیوه نامه به شرح زیر دارید
بخش اول شیوه نامه : شیوه های اساسی (به طور مثال استایل هایی که برای body، selection و یا هر شی دیگری که در گروه کلیات قرار میگیرند می دهید)
بخش دوم شیوه نامه : شیوه های مربوط به تایپوگرافی و دکمه ها (h1 تا h6 ، انواع input ها ، textarea ها و ... )
بخش سوم : شیوه های مربوط به صفحه ی اصلی (مثلا در صفحه ی اصلی تان از پارالاکس ، اسلایدر یا هر چیز دیگری استفاده کرده باشید)
بخش چهارم : هدر ها و فوتر ها
و سایر بخش ها با موضوعات خاص خودشان
و همجنین فرض بگیرید ساختار فولدر بندی ما به صورت زیر است:
فایل شیوه نامه مان را که با نام style.css و در فولدر css قرار دارد کپی میگیریم و در فولدر scss قرار می دهیم
سپس این فایل را rename کرده و یک s به پسوند یا extension آن می افزاییم :
style.scss
نکته : هر فایل css ای در ساختار scss یا super css همجنان ولید و صحیح می باشد و هنگامی که کامپایلر سس آن را کامپایل می نماید به هیچ مشکلی بر نخواهد خورد
برای این که تست کنیم که فایل کاملا آماده و قابل کامپایل است بیایید یک بار کامپایل انجام دهیم :
1. ابتدا فایل style.css موجود در دایرکتوری css را پاک کنید
2. سپس :
الف : اگر در لینوکس یا مک او اس ایکس هستید ترمینال را باز کنید
و اگر در ویندوز هستید Start Command Prompt With Ruby را باز کنید
اگر به یاد داشته باشید در جلسه ی قبل روبی را نصب کرده بودیم به کمک gem سس را نصب کرده بودیم
با کمک دستور cd یا change directory به دایرکتوری پروژه مان بروید به طور مثال برای من در ویندوز در دایرکتوری زیر قرار داده ام:
C:\Xampp\htdocs\sass-project-1\
پس تایپ می کنم :
cd C:Xampphtdocssass-project-1
حال که در دایرکتوری مربوطه قرار گرفته ایم دستور زیر را تایپ می کنیم:
sass —watch scss:css
شکل کلی این دستور به صورت زیر است :
sass —watch فولدر شامل فایل های scss : فولدر مقصد که فایل css کامپایل شده به آن می رود
/*
Persian Developers
*/
body{
background-color: #333;
color: #fff;
}
* {
outline: none !important;
}
::selection{
background-color:#f30;
color:#fff;
}
/* Typography */
input{
border:#333;
color: #333;
}
input[type=text]{
color : #f30;
}
input[type=submit]{
color : #fff;
}
/* Index Page Styles */
.page-container{
padding: 30px;
margin : 0px;
}
.page-slider{
padding: 50px;
}
.page-parallax{
color:#fff;
text-align: center;
padding: inherit;
}
/* Header & Footer */
header{
background-color: #f30;
color:#fff;
}
footer{
background-color: #333;
color: #fff;
}
دوستانی که نتونستن فایلی مناسب برای این آموزش پیدا کنند یک فایل استایل خیلی ساده در حدی که کارمون رو راه بندازه برایشان آماده کردم که این آموزش رو بتونن دنبال بکنند
خب حالا که با روش کامپایل کردن سس هم آشنا شدیم بر می گردیم به بحث ساختار سازی و سازماندهی فایل شیوه نامه مان.
برای خوانا تر کردن و آسان سازی مدیریت بخش های شیوه نامه آن را به شیوه نامه های کوچک تری تبدیل میکنند که در فایل های جداگانه ای قرار گرفته اند.
بیایید این فرآیند را به کمک هم و بر روی فایل scss مان اعمال کنیم
خب اگه یادتان باشد ما شیوه نامه مان را به چهار قسمت تقسیم کردیم بیایید فایل هایی به نام همین بخش ها بسازیم
یک دایرکتوری جدید ایجاد کنید و نامش را styles بگذارید.
درون این دایرکتوری چهار فایل با نام های زیر ایحاد کنید :
_global.scss
_typography.scss
_index.scss
_header-footer.scss
حتما از خودتان می پرسید این (_) قبل از فایل ها برای چیست ؟
در پاسخ به این سوال باید بگویم این (_) ها برای این است که به کامپایلر سس بگوییم این فایل یک partial است
یک partial فایلی است که صرفا جهت دسته بندی شیوه ها ایجاد شده و نبایستی به صورت مستقیم به css کامپایل گردد بلکه باید درون یک فایل سسی بدون پیشوند (_) ایمپورت گردد.
حال درون این چهار فایل چه باید قرار دهیم ؟؟؟
خب معلوم است بخش هایی از شیوه هایمان :
در فایل _global :کد هایی که در فایلی که برایتان فرستادم که با عنوان persian developers شناخته شده است و تا قبل از بخش کامنت بعدی نوشته شده است را کات کنید.
در فایل _typography کد هایی که با نام typography در فایل شیوه نامه ای که فرستادم موجود هست قرار دهید
به همین صورت بخش های دیگر را هم کامل کنید.
خب حالا که ساختمان شیوه نامه مان ایجاد شد وقت ایمپورت partial هایمان است که همین چهار فایل مورد بحث بودند.
برای ایمپورت کردن این فایل هایی که ما درست کردیم باید کد های زیر را در فایل style.scss مان بنویسیم:
@import "styles/global";
@import "styles/typography";
@import "styles/index";
@import "styles/header-footer";
به این صورت کد هایمان ایمپورت خواهند شد حال اگر به ترمینال یا کامند پرامپت برگردیم مشاهده میکنیم که کامپایلر سس متوجه تغییرات در فایل style.scss شده و آن را دوباره کامپایل کرده است و فایل کامپابل شده که حالا به فرمت .css است را در دایرکتوری css پروژه مان ذخیره میکند.
و اگر هیچ مشکلی پیش نیامده باشد فایل ما کامپایل شده و آماده است و اگر به دایرکتوری css برویم و فایل style.css را باز کنیم میبینیم که دوباره بخش ها به هم چسبیده اند و تبدیل به یک فایل واحد شده اند.
خب حالا بیایید یکم درباره ی مزایای این کارمون صحبت کنیم
این کار چه سودی داره :
1. فرض کنید هر بخشمون 1000 خط کد باشه جمعا میشه 4000 خط کد (کی حال داره اسکرول کنه) حالا گذشته از اسکرول اگه بیشتر باشه تعداد خط ها مثلا 20000 خط هر بخش هیچ text editor یاIDE ای نمیکشه این همه خط کد به صورت یکجا رو
2. اگه فرض کنیم با css خالی این کار رو انجام میدادیم : اون وقت مجبور بودیم 4 بار 4 فایل متفاوت رو ایمپورت کنیم که تعداد http request ها رو بالا میبره که خب باعث کمتر شدن سرعت میشه (یکی از فاکتور های افزایش سرعت لود وبسایت کم بودن تعداد http request هاست)
امیدوارم این بخش مورد توجه شما قرار گرفته باشد تا جلسه ی بعدی شما رو به خدای بزرگ می سپارم
نظرات کاربران