آموزش 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 دیدگاه کاربران
علی امینی

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

محمد

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

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

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

عالی ..

پارسا

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

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

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

محمد

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

سید علی

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

وحید صالحی

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

sabzikamal

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

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

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

n.j

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

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

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

صیفی

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

hamed_z2001

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

ارسال نظرات

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

1 2