• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

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

20652 ۸ بهمن ۹۲

سلام به همه بچه های سون لرن. امروز قراره باهم 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 کنید فایل رو براتون کامپایل میکنه و دیگه نیازی نیست هربار دکمه کامپایل رو بزنید.

نکته :

در صورتی که بعد از کلیک کردن روی گزینه 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 رو بزنید نباید خطایی به شما بده.

نکته : دقت کنید که در صورتی که از سینتکس 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 و همچنین نحوه نوشتن کامنت ها آشنا خواهید شد.

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 39 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏
    علی امینی(۳۱ فروردین ۱۳۹۳)

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

  • ‏‏

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

    • ‏‏
      مهشاد کلانتری(۲۲ اردیبهشت ۱۳۹۳)

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

  • ‏‏
    Nasser Niroumandi(۳۱ خرداد ۱۳۹۳)

    عالی ..

  • ‏‏

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

    • ‏‏
      مهشاد کلانتری(۳۱ خرداد ۱۳۹۳)

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

  • ‏‏

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

  • ‏‏
    سید علی(۱۳ مرداد ۱۳۹۳)

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

    • ‏‏
      وحید صالحی(۷ آبان ۱۳۹۳)

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

  • ‏‏

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

    • ‏‏
      مهشاد کلانتری(۳۰ مرداد ۱۳۹۳)

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

  • ‏‏

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

  • ‏‏

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

  • ‏‏
    hamed_z2001(۸ آذر ۱۳۹۳)

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

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram