campaign-off40

آموزش sass : قسمت اول - مقدمه، تعریف متغیر، ویژگی تو در تو و نحوه کامپایل



visibility  
mode_comment   ۳۹

history آموزش ویدیویی کامل SASS

دوره به روز و کامل آموزش پیش پردازنده SASS که بسیار جامع و پروژه محور هست هم اکنون به صورت ویدیویی و کامل در دسترس هست. می تونید از اینجا ببینید :

آموزش ویدیویی کامل و پروژه محور SASS

سلام به همه بچه های سون لرن. امروز قراره باهم sass یاد بگیریم 🙂

Sass که مخفف Syntactically Awesome Stylesheets هستش یک زبان شیوه نامه ای‌ست که اول توسط Hampton Catlin طراحی و توسط Nathan Weizenbaum توسعه داده شد. بعد از نسخه ابتدایی Weizenbaum و Chris Eppstein به گسترش Sass با Sass Scripting پرداختند.

Sass یک زبان اسکریپت نویسی هست که به CSS تفسیر میشه و دو تا سینتکس داره. سینتکس اصلی که قدیمی تر هم هست به عنوان sass شناخته شده و راه کوتاه تر و مختصر تر برای نوشتن کدهای css هست. از فرورفتگی ها به جای آکولاد ها برای نشان دادن بلاک مخصوص خصوصیات یک انتخاب گر استفاده میکنه و چیزی که خصوصیت هارو از هم جدا میکنه خط جدید هست نه ;

سینتکس جدیدتر به عنوان scss شناخته شده و فرمت دهی بلاک ها تو این سینتکس شبیه همون css هست. یعنی دقیقا آکولادها و ; به همون معنی که تو css هست، اینجا هم هست.

ممکنه بپرسید کار sass چی هست اصلا؟ دیدید تو زبان های برنامه نویسی ما متغیر ، فانکشن ، عملگر و ... داریم؟ ولی تو سی اس اس همچین چیزی رو نداریم. حالا فکر کنید اگر میشد تو سی اس اس از این ها استفاده کرد چقدر سرعت نوشتن کدها بالا میرفت! Sass به شما این امکان رو میده که از این ویژگی هایی که تو سی اس اس نداریم (همون متغیر و تابع و عملگر و ... رو منظورمه) استفاده کنیم و نوشتن کدهای سی اس اس سریع تر و جذاب تر بشه.

لازم به ذکره که فریم ورک Foundation هم از sass پشتیبانی میکنه.

خب! مقدمه کافیه بریم سر اصل مطلب.

متغیرها

در sass ما میتونیم متغیر تعریف کنیم. اطلاعاتی که قراره چندین بار در قسمت های مختلف یک فایل css نوشته بشه میتونه داخل یه متغیر نگه داری بشه و هروقت جایی قرار شد اون اطلاعات رو بنویسیم میتونیم به جاش اسم متغیر رو بنویسیم. به این ترتیب وقتی مقدار متغیری که تعریف کردیم رو تغییر بدیم، جاهایی که از این متغیر استفاده کردیم مقدارش تغییر میکنه. شما میتونید رنگ ها یا اسم فونت ها یا هر مقدار css که فکر میکنید دوباره قراره ازش استفاده کنید رو داخل متغیر ذخیره کنید. Sass از علامت $ برای ساخت متغیر استفاده میکنه.

یک مثال از تعریف متغیر با سینتکس scss:

همین مثال بالا با استفاده از سینتکس sass:

در هر دو کد بالا، در خطوط 1 و 2، اول متغیرها رو تعریف و مقداردهی کردیم و خط 5 و 6 ازش استفاده کردیم.

وقتی sass پردازش شد، متغیرهایی که ما برای $font-stack و $primary-color تعریف کردیم رو میگیره و مقادیرشون رو داخل css قرار میده و خروجی css رو تولید میکنه. این کار برای زمانی که داریم با رنگ های برند کار میکنیم به شدت مفیده. در نهایت بعد از کامپایل خروجی ما به شکل زیر هستش:

نحوه کامپایل کدها

خب فکر کنم حالا این سوال براتون پیش اومده که این کدها رو کجا مینویسیم. قبل از اینکه بخوایم بقیه ویژگی های sass رو معرفی کنیم به نظرم بهتره راجع به محل نوشتن کدهای sass و نحوه کامپایل اونها صحبت کنیم.

محل نوشتن کدها که کاملا سادست. اگر با سینتکس scss میخواید بنویسید یک فایل جدید با پسوند .scss میسازید (مثلا test.scss) و کدها رو داخل این فایل میریزید. ولی اگر میخواید با سینتکس .sass بنویسید یک فایل جدید با پسوند .sass میسازید (مثلا test.sass) و کدهاتون رو داخل این فایل مینویسید.

حالا اگر این فایل رو به صفحه وبتون پیوست کنید اصلا کار نمیکنه چون فایل css نیست! پس باید فایل sass رو کامپایل و به فایل css تبدیل کنیم. نگران نباشید اصلا کار سختی نیست. نرم افزار رایگانی وجود داره به اسم Koala که میتونید این نرم افزار رو از صفحه اصلی سایتش دانلود کنید. Koala هم نسخه ویندوز، هم نسخه لینوکس و هم نسخه مکینتاش داره. اگر قراره از نسخه ویندوز استفاده کنید باید ابتدا Ruby رو نصب کنید. کافیه فایل exe اون رو از سایت خودش دانلود و نصب کنید. پیشنهاد میکنم نسخه 1.9.3 رو دانلود کنید.

موقع نصب این نرم افزار به همچین صفحه ای برخورد میکنید:

sass-ruby

تنها گزینه ای که لازمه تیک دار بشه همین گزینه وسطی هست.

حالا که ruby رو نصب کردید میتونید koala رو نصب کنید.

بعد از نصب دو راه برای اضافه کردن فایل sass دارین. راه اول اینکه پوشه حاوی فایل sass رو بگیرید و داخل این نرم افزار بکشید. راه دوم هم اینکه دکمه بعلاوه ای که سمت چپ برنامه هست رو بزنید و پوشه ای که فایل sass رو داره بهش معرفی کنید.

بعد از اضافه کردن پوشه میبینید که تمام فایل های sass داخل پوشه رو براتون نشون میده و میتونید یکی از این فایل هارو برای کامپایل انتخاب کنید. بعد از انتخاب فایل، سمت راست یه پنجره کشویی باز میشه که دکمه compile داره اونو بزنید فایل sass رو برای شما کامپایل و به css تبدیل میکنه و در کنار پوشه ای که حاوی فایل های sass بود یه پوشه به اسم css میسازه و فایل css که ساخته بود رو اینجا براتون نگه میداره. حالا میتونید این فایل css رو برداشته و داخل پروژه های خودتون ازش استفاده کنید.

اگر هم میخواید همه ی فایل ها رو کامپایل کنید کافیه ctrl+a بزنید تا همشون انتخاب بشه. بعد روش کلیک راست کنید و گزینه compile رو انتخاب کنید.

sass-koala

ویژگی ای که نرم افزار کوالا داره اینه که اگر نرم افزار در حال اجرا باشه و شما تغییری داخل فایل های sass یا scss بدید، به محض اینکه فایل رو save کنید فایل رو براتون کامپایل میکنه و دیگه نیازی نیست هربار دکمه کامپایل رو بزنید.

info نکته :

در صورتی که بعد از کلیک کردن روی گزینه compile چنین خطایی دریافت کردید:

'sass' is not recognized as an internal or external command, operable program or batch file.

باید sass رو نصب کنید. برای این منظور خط فرمان (cmd) رو باز کنید. حالا کافیه دستور gem install sass رو بنویسید تا sass نصب بشه. اینتر بزنید و یکم منتظر بمونید تا فرآیند نصب تکمیل بشه.

sass-cmd

دیگه الان اگه دکمه compile رو بزنید نباید خطایی به شما بده.

info نکته :

دقت کنید که در صورتی که از سینتکس scss برای نوشتن کدها استفاده کردید حتما فایل رو با پسوند .scss و وقتی از سینتکس sass استفاده کردید حتما فایلتون رو با پسوند .sass ذخیره کنید در غیر این صورت فایلتون کامپایل نمیشه.

قبل از ادامه، این رو بگم که در این آموزش همه ی کدهای sass رو با سینتکس scss مینویسیم.

ویژگی تو در تو (Nesting)

فرض کنید همچین کد html داریم:

الان ul و liهای ما به صورت تو در تو داخل تگ nav قرار گرفتند. که داخل css به این صورت استایل دهی میکنیم:

ولی الان با استفاده از sass میتونیم به این صورت بنویسیم:

این کد بعد از کامپایل به همون شکل css که گفتیم در میاد.

در sass ما یه انتخابگر & هم داریم که هرجا ازش استفاده بشه به نزدیکترین انتخابگر والدش اشاره میکنه. & برای استفاده از شبه کلاس ها (:hover، :active، :before، :after و ...) بیشتر کاربرد داره.

مثلا اگر همچین کدی داشته باشیم:

علامت & به نزدیکترین انتخابگر والدش که همون a باشه اشاره میکنه و نتیجه کد بعد از کامپایل به این صورت هست:

اگر دقت کرده باشید داخل css ما یه سری خاصیت مثل font-family، font-size و font-weight داریم که میتونیم در sass اونها رو به این صورت بنویسیم:

که این کد بعد از کامپایل به صورت درمیاد:

یا مثلا برای border میتونیم همچین چیزی بنویسیم:

بعد از کامپایل میشه:

فکر میکنم برای این جلسه کافی باشه. در جلسه بعدی با عملگرها، نحوه ایمپورت کردن یک فایل sass و همچنین نحوه نوشتن کامنت ها آشنا خواهید شد.

comment دیدگاه کاربران
عرفان replyپاسخ

بسیار عالی بود . scss نوشتن کد هاش راحت تر نسبت به sass هست چون که بیشتر شبیه css هست امکان اشتباه کردن داخل نوشتن کمتره 😉 ممنون ❓

حسین محمدی replyپاسخ

خیلی خیلی ممنون مطلب بسیار مفیدیه
این زبون برنامه نویسی برای ذخیره داده های رشته ای از کوتیشن ها استفاده نمی کنه؟؟؟

مهشاد کلانتری

خواهش میکنم
خب در کل نیازی نیست که برای ذخیره داده رشته ای تو متغیرها از کوتیشن استفاده کنید. ولی به فرض اگر داده ی شما مثلا ! یا ؟ و همچین کاراکترهایی داشته باشه باید حتما داده رو داخل دابل کوتیشن بذارین در غیر این صورت اررور میده و کامپایل نمیشه

sana replyپاسخ

سلام.مطلب خیلی جالبی بود .موفق باشید.

m.yMJJ replyپاسخ

قبلا با این نوع برنامه نویسی برخورد کردم . از نظر من کاملا بی استفاده هست .

الکی این همه Compile و نصب برنامه … کسی که CSS بلد باشه این برنامه ها اضافه کاری حساب میشه …

وحید صالحی

جه اشکالی داره حداقلش اینه که اطلاعاتمون در مورد مباحث طراحی بالاتر میره و متکی به یه سیستم نمیشیم و اگر جایی اسمی ازش شنیدیم گیج نمیشیم که چی هست و میتونیم حرفی برای گفتن داشته باشیم…
این حرف ها رو گفتم چون احساس میکنم شما از توانایی های این زبان و سیستم بی خبرید میدونی تعریف متغییر در css چقدر دست شما رو باز میزاره تا از کدهای تکراری css برای المان های مختلف پرهیز کنید و سرعت compile رو بالا ببرید که این تازه یکی از مزیت های sass هستش در ضمن اگه بیهوده بود فریم ورک محبوب و معروف foundation ازش استفاده نمیکرد.
زود و بدون تحقیق نتیجه گیری نکنید دوست عزیز
موفق باشی…

مهشاد کلانتری

ای ول آقای صالحی
من جواب رو حاضر کردم تا وقتی نظرشون تایید شد بنویسم اومدم صفحه رو رفرش زدم دیدم جواب دادین 🙂

بهنام

چه حاضر جواب 😛

m.yMJJ

اشکالی که نداره . بالاخره یاد گرفتن هر زبان برنامه نویسی حتی اگر بی استفاده باشه ولی ضرر هم نداره و باعث میشه ذهن آدم باز بشه و اطلاعاتش بالا بره .
مثلا ضرورتی برای یادگیری Visual Basic با وجود C# نیست اما خالی از لطف هم نیست .
با اینکه از حرفی که زدم احساس کردید اطلاعاتم در این مورد کمه و اینطور نیست اما اصرارم اینه که زیاد مفید نیست .
چون حتی موقعی که میخواستم CSS یاد بگیرم با NotePad ++ اینکارو میکردم و نظرم اینه که DreamWeaver آدمو تنبل میکنه . 😀
اما این بحث آموزش هست . یه موقع لازمه سریع قالب زده بشه و DreamWeaver واقعا نیازه . شاید به Sass هم برای سریع تر و حرفه ای تر شدن کار نیاز باشه اما من نظرم در مورد Sass این نیست .

در کل نظرم بیشتر شخصی بود … 😉
سلامت باشید .

علی امینی

نا گفته نمونه امکان جدیدی که قراره به زبان CSS اضافه بشه، استفاده از متغیر هاست.فعلا هیچ مرورگری از متغیر های CSS پشتیبانی نمیکه ولی میشه تو کروم متغیر هارو فعال کرد.

میلاد حیدری

نظر شما کاملا بی منطق است . اگر با sass و کاربردهای آن خوب آشنا باشید خواهید دانست که sass چقدر در زمان و کاربرد مقرون به صرفه است .
از کد های تکراری جلوگیری می کند
می توان یک کد را تعریف کرد و با مقدیر مختلف بارها و بار ها آن را فراخوانی کرد
به راحتی می توان در آینده آن را مدیریت کرد
خروجی آن تنها یک فایل است
به عبارت کلی sass حرف نداره

ارشیا کبیری replyپاسخ

تفاوت بین sass و less چیست ؟ و چه موقع باید از کدام استفاده کنیم ؟ مزیتهای هر کدام چیست ؟

مهشاد کلانتری

یکی از تفاوت هاشون اینه که sass و less توسط پلتفرمهای متفاوتی ساخته شدند. less یه کتابخانه جاوااسکریپت هستش و سمت کلاینت پردازش میشه البته میشه با Node Package Manager سمت سرور پردازشش کرد. البته less اوایل با ruby ساخته شده بود.
sass هم توسط ruby پیاده سازی شده و سمت سرور پردازش میشه.
سینتکس هاشون هم با هم فرق داره.
sass یه سری ویژگی ها داره که less نداره و همینطور برعکس.
بعضی فریم ورکها مثل foundation از sass پشتیبانی میکنه، بعضی ها هم مثل bootstrap از less و بستگی به اینکه شما از کدوم فریم ورک میخواین استفاده کنین انتخابتون هم متفاوته
آموزش less هم میذاریم بعد میتونید خودتون ببینید از کدوم راحتترین استفاده کنید.
انشاالله یه مطلب هم راجع به تفاوت هاشون میذاریم.
در کل به نظرم بیشتر سلیقه ای هست که از کدوم یکی استفاده کنید.

کیوان علی محمدی

بوت استرپ در نسخه 3.1.0 از Less به Sass مهاجرت کرده.

مهشاد کلانتری

چه جالب ندیده بودمش
ممنون بابت اطلاعتون
یعنی الان علاوه بر less از sass هم پشتیبانی میکنه؟
اینطور که به نظر میاد sass باید خیلی بهتر باشه پس 😎

حسین محمدی replyپاسخ

سلام خدمت شما…
من اومدم این کد رو کامپایل کنم


ارور syntax داد… مشکلش چیه؟

مهشاد کلانتری

سلام والا کد که مشکلی نداره تستش کردم
کدهاتون رو داخل فایل با پسوند .scss ریختید و خواستید کامپایل کنید؟
اررورش رو بنویسین لطفا

حسین محمدی replyپاسخ

جالبه پسوند sass دادم،ارور داد…
پسوند scss دادم درست کامپایل کرد….

مهشاد کلانتری

داخل مطلب که ذکر کردم وقتی کد رو با سینتکس scss مینویسیم باید داخل فایل با پسوند .scss هم ذخیره کنیم وگرنه اررور میده

عبدالغفور صبوری replyپاسخ

سلام خدمت تما م کسانیکه تو سون لرن داره زحمت میکشن و مطالب جالب رو تو سایت میذارن. این مبحث برام خیلی جالب ودلپسند بود. یه سوال داشتم. وقتی پروژه رو روی سرور واقعی قرار میدیم تمام کاربران که برنامه های ruby و Koala رو نصب ندار ه چه جوری این فایلها کامپایل میشه. منظورم اینه که وقتی یک کاربر سایت رو باز میکنه.

مهشاد کلانتری

سلام
متن رو بخونین متوجه میشین

erfan vaysi replyپاسخ

سلام خیلی ممنون .
خیلی جالبه .
مخصوصا برای ما کد نویسها ( منظورم طراح وب ها هست )
ما خیلی باید کد css بنویسیم ولی این کار مارو خیلی آسون تر میکنه .

سارا مالکی replyپاسخ

سلام. برنامه Koala بعد از نصب و اجرای ورژن 2.0.2 کراش میکنه و هیچ راه حلی من براش پیدا نکردم.. لطفا راهنمایی کنید. من از وین7 استفاده میکنم..

مهشاد کلانتری

سلام. راجع به حل این مشکل متاسفانه من اطلاعی ندارم ولی شما میتونید برای کامپایل از خط فرمان هم استفاده کنید. اینجا توضیح داده چطوری.

علی امینی replyپاسخ

سلام
ممنون، واقعا استفاده بردیم.فقط یه مشکلی تو کامپایل کردن فایل های sass و scss با کوآلا داشتم!
وقتی دکمه کامپایل رو میزنم ارور میده.sass رو هم از طریق خط فرمان نصب کردم و با توجه به سینتکس، فرمت فایل هارو مشخص کردم ولی باز هم ارور میده.
ارورش هم خاص نیست؛ فقط آدرس فایل سی اس اسی که قرار کدهای کامپایل شده در اون ذخیره بشه تو باکس ارور نشون داده میشه.
ولی وقتی همون فایل هارو با compass و از طریق خط فرمان کامپایل میکنم از ارور خبری نیست!
لطفا راهنمایی کنید.
باز هم تشکر

محمد replyپاسخ

با سلام
اول از همه بابت مطالب مفیدتون تشکر میکنم
عرضم اینه صفحه مربوط به روبی باز نمیشه لطفا لینک دانلود رو به ایمیلم ارسال کنید
در ضمن ایا راست به چپ شدن بوت استرپ رو برای فارسی زبانها اموزش میدید؟
با کمال تشکر

مهشاد کلانتری

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

Nasser Niroumandi replyپاسخ

عالی ..

پارسا replyپاسخ

با سلام و خسته نباشید خیلی آموزشتون خوب و کاربردی هست فقط من که می خوام از bootstrap rtl3 استفاده کنم sass اون رو از کجا دانلود کنم?
بازم بینهایت ممنون

مهشاد کلانتری

سلام
من نسخه sass برای bootstrap 3 rtl پیدا نکردم
یا نسخه sass خود بوت رو از اینجا دانلود کنید و خودتون rtl کنید
یا همون bootstrap 3 rtl رو از اینجا دانلود کنید

محمد replyپاسخ

با تشکر خیلی هم عالیه

سید علی replyپاسخ

سلام
یه مثال از کارای جدیدی که باهاش میشه انجام داد میزنین؟

وحید صالحی

مهم ترین ویژگیش امکان تعریف متغییر برای استایل دهی به عناصر هست…

sabzikamal replyپاسخ

باسلام میشه لینک نسخه 1.9.3رابرادان بزارید من این نسخه روپیدانکردم.

مهشاد کلانتری

سایت رو باز کنید، از منوی بالا روی گزینه دانلود کلیک کنید اونجا هست!

n.j replyپاسخ

بسییییییییییار عالی
ولی من یه مشکلی دارم میشه بگید چرا برنامه kola باز نمیشه؟؟؟؟؟؟؟؟؟؟؟؟؟

مهشاد کلانتری

از یه کامپایلر دیگه مثلا prepros استفاده کنید

صیفی replyپاسخ

سلام چقدر بیان خوب و مفیدی داره این آموزش 🙂 واقعاً بهتون خدا قوت میگم و خیلی ممنونم از شما و تیم سون لرن

hamed_z2001 replyپاسخ

خوب این چه کاربردی داره؟؟
من نیاز دارم بعد از هر بار تغییر در css صفحه رو ببینم و از دست بودن تغییرات مطمئن شم.اینجوری که هربار اول باید کامپایلش کنم که!! خیلی سخت تر میشه که!! میشه یکی بگه چرا لقمه رو دوره دهن میپیچونید؟؟

ارسال نظرات

کاربر گرامی، امکان ارسال نظر و پشتیبانی برای دوره های مجازی فقط برای دانشجویان این دوره امکان پذیر می باشد.