با عرض سلام و خسته نباشید رهنمون هستم و با جلسه ی ششم و پایانی آموزش sass در خدمت شما دوستان عزیز هستم.
تا به اینجا ما توانستیم به خوبی کار با سس را یاد بگیریم و با ویژگی های بسیار زیبای سس آشنا شدیم.
در این جلسه میخوایم یکم درباره ی درست نوشتن شیوه های آبشاری مان و این که یک ساختار خوب برای بخش طراحی سایتمان چگونه باشد صحبت میکنیم. و همچنین با پروژه هایی که در آن ها سس استفاده شده آشنا می شویم.
یکی از ساختار های خوبی که برای سازمان بندی دایرکتوری شیوه نامه ها در قالب سایتمان میتوانیم استفاده کنیم ساختار زیر است:
stylesheets/ | |— modules/ # Common modules | |— _all.scss # Include to get all modules | |— _utility.scss # Module name | |— _colors.scss # Etc... | ... | |— partials/ # Partials | |— _base.sass # imports for all mixins + global project variables | |— _buttons.scss # buttons | |— _figures.scss # figures | |— _grids.scss # grids | |— _typography.scss # typography | |— _reset.scss # reset | ... | |— vendor/ # CSS or Sass from other projects | |— _colorpicker.scss | |— _jquery.ui.core.scss | ... | `— main.scss # primary Sass file
این ساختار کلا دایرکتوری شیوه نامه هایمان را به سه بخش تقسیم میکند:
1. یخش ماژول ها:
که در آن ماژول های ساخته شده توسط ما قرار میگیرند که خود شامل placeholder ها و … می باشند.
2. بخش partial ها:
که در آن mixin ها و شیوه های اصلی نوشته شده برای قالب قرار میگیرند.
3. بخش پروژه های خارجی:
در این بخش ما فایل های شیوه نامه پروژه های توسعه یافته توسط افراد دیگر که می خواهیم در قالب خود استفاده کنیم را قرار می دهیم.
خوب مبحث بعدی ما که به عنوان زنگ تفریح در اصل هست درباره ی interactive Sass است.
interactive Sass در اصل یک نوع Interactive Shell ای است که برای Sass طراحی شده است،
اگر با زبان هایی مانند پایتون و روبی کار کرده باشید حتما محیط "اجرای زنده ی کد به محض نوشتن" را دیده اید.
اگر نه: این محیط برای اجرای زنده ی کد های ما به محض تایپ و زدن اینتر است.
برای شروع Terminal را در مک و لینوکس و یا خط فرمان را در ویندوز باز کنید.
دقت داشته باشید که سس می بایستی حتما نصب شده باشد (در صورت نیاز به جلسه ی اول رجوع شود)
و یکی از دو دستور زیر را تایپ کنید:
sass —interactive یا: sass -i
وقتی که محیط interactive Sass اجرا شود یک فلش کوجک در سمت چپ خط فرمان ایجاد می شود و با هر بار اینتر دوباره نیز ایجاد میشود.
حالا میتوانیم دستوراتی که در جلسات قبل یاد گرفته بودیم را در اینجا تست کنیم.
به طور مثال بیایید تابعی که در جلسه ی قبل یاد گرفتیم و به منظور روشن تر کردن رنگ به کار می رفت را در اینجا امتحان کنیم:
اگه به یاد داشته باشید ساختار تابع به صورت زیر بود:
lighten(Color, Percentage)
برای مثال ما کد زیر را تایپ میکنیم و اینتر میزنیم:
>> lighten(#333,20%)
به محض زدن اینتر shell به ما جواب را برمیگرداند:
#666666
به همین صورت توابع و چیز های دیگری را که در جلسات قبل یاد گرفته بودیم را نیز در این محیط تست و اجرا کنید.
پیش از اینکه سس به عنوان یک زبان اسکریپتینگ برای نوشتن راحت تر شیوه نامه های آبشاری css مطرح شود بیشتر فریم ورک ها های طراحی از زبانی مشابه به نام less استفاده میکردند.
با ظهور سس بسیاری از این فریم ورک ها خود را با سس وفق داده و شروع به استفاده از آن کردند.
یکی از این فریم ورک های معروف Bootstrap است.
شما می توانید از طریق لینک زیر از گیت هاب و یا از طریق سایت رسمی بوت استرپ آن را دانلود و استفاده کنید.
https://github.com/twbs/bootstrap
http://getbootstrap.com
دنیای سس دنیایی خیلی بزرگی است و تمام شدنی نیست.
روز به روز سس بیشتر مورد توجه توسعه دهندگان قرار می گیرد.
در پایان یک سری لینک هایی به منابعی جالب برای سس برای شما دوستان عزیز تدارک دیده ام:
http://thesassway.com/
http://susy.oddbird.net/
http://compass-style.org/
http://breakpoint-sass.com/
http://koala-app.com/
با تشکر از توجه شما دوستان عزیز شما را به خدای بزرگ و متعال می سپارم.
