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

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



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

آموزش sass : قسمت سوم - توابع، میکسین ها و وراثت

6810 ۱۲ بهمن ۹۲

سلام خدمت تموم بچه های سون لرن. تو این جلسه یاد میگیریم چطور از توابع، میکسین ها و وراثت در sass استفاده کنیم و یکمی کار خودمون رو حرفه ای تر کنیم.

توابع

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

مثلا یکی از توابعی که از قبل توسط sass تعریف شده تابع lighten($color, $amount) هست با دو پارامتر. پارامتر اول کد رنگ شما رو میگیره، و پارامتر دوم اون درصدی که میخواد رنگتون رو روشن کنه.

مثلا:

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

توابعی مثل darken($color, $amount) که رنگ شما رو به اندازه مقدار درصدی که بهش میدین تیره تر میکنه، grayscale($color) که رنگ سیاه سفید معادل رنگی که بهش میدید رو براتون میسازه یا مثلا round($value) که عدد اعشاری رو به نزدیک ترین عدد صحیحش گرد میکنه و خیلی توابع دیگه وجود داره که شما میتونید لیست کامل از توابعی که توسط sass تعریف شده به همراه مثالش رو از اینجا ببینید.

و اما چطور خودمون یه تابع بسازیم و چطور ازش استفاده کنیم؟ کد زیر رو ببینید:

خط اول که متغیر تعریف کردیم تا رنگمون رو داخلش نگه داریم. خط سوم با استفاده از کلمه @function تابع light_color با یک پارامتر رو تعریف کردیم. پارامتر همون $arg داخل پرانتر هست. تابعی که تعریف کردیم این رنگی که ما به عنوان پارامتر به تابع میفرستیم رو میگیره و توسط تابع از پیش تعریف شده خود sass رنگ مارو 50درصد روشن تر میکنه و مقدارش رو برمیگردونه. خط 8 هم اومدیم از این تابعی که خودمون ساختیم استفاده کردیم. خروجی بعد از کامپایل:

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

میکسین ها (mixin)

نوشتن بعضی چیزها تو css یکم خسته کنندست، مخصوصا با css3 و اونهمه پیشوندهای مخصوص هر مرورگر. یک میکسین به شما اجازه میده یه گروهی از کدهای css که قراره چندین جا ازشون استفاده کنید رو آماده کنید. حتی میتونید به میکسین، پارامتر هم بدین تا انعطاف پذیری بیشتری تو استفاده داشته باشه.

برای اینکه یک میکسین بسازید باید از کلمه @mixin استفاده کنید و بعد اسم میکسین رو بنویسید. ما اینجا یه میکسین به اسم border-radius ساختیم. همچنین این میکسین ما یه پارامتر هم قبول میکنه که میتونیم هرجا که خواستیم توسط این پارامتر، مقداری رو به میکسین خودمون بفرستیم و اون این مقدار رو برامون جایگزین میکنه. وقتی میکسین رو ساختیم برای استفاده از اون باید اول بنویسیم @include و بعد جلوش اسم میکسین مد نظرمون رو به همراه مقداری برای پارامتر بنویسیم. نتیجه بعد از کامپایل به این صورت میشه:

البته اینم بگم که میکسین میتونه اصلا پارامتر نداشته باشه. مثلا:

که در این صورت برای استفاده کردن از میکسین باید اول @include و بعد اسم میکسین بیاد. حالا هرجا که از این میکسین استفاده کنیم مقدار ثابت 15px رو داره درصورتی که اگر براش پارامتر تعریف میکردیم میتونستیم مقادیر دلخواه خودمون رو هرجایی که لازم بود بهش بدیم.

پارامترها میتونند مقدار پیشفرض هم داشته باشند. یعنی اگر پارامتری به میکسین ارسال نشد، مقدار پیشفرضی که براش تعیین کردیم رو استفاده کنه:

الان پارامتر $width که در میکسین تعریف کردیم مقدار پیشفرض 1in رو داره. یعنی اگر موقع استفاده، این پارامتر ارسال نشه، میکسین خودکار مقدار 1in رو استفاده میکنه.

نتیجه بعد از کامپایل:

اینم یه مدل دیگه از میکسین که بهش میگن میکسین تو میکسین :)

اینم نتیجه بعد از کامپایل:

بعضی وقتا میکسین شما ممکنه تعداد نامعینی پارامتر بگیره. مثلا خصوصیت box-shadow میتونه چندین تا مقدار برای سایه داشته باشه. در این صورت شما مثل مراحل قبل میکسین رو تعریف میکنید و وقتی خواستین براش پارامتر تعریف کنید کافیه آخر پارامترتون ... بذارید. یعنی مثلا:

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

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

از این روش وقتی میخوایم یه میکسین رو صدا بزنیم و ازش استفاده کنیم هم میشه استفاده کرد. به این مثال توجه کنید:

میبینید که اینبار موقع صدا زدن میکسین، آخر پارامترمون ... گذاشتیم. این کار باعث میشه مقادیر رو خودش جدا کنه و به ترتیب هر مقدار رو به یک پارامتر از میکسین اختصاص بده.

نتیجه بعد از کامپایل:

وراثت

این هم یکی از مفیدترین ویژگی های sass هست. با استفاده از وراثت شما میتونید محتوای یک کلاس رو داخل یک کلاس دیگه خیلی راحت استفاده کنید. تنها کاری که باید انجام بدید اینه که تو کلاس مورد نظر خودتون بنویسین @extend و بعد اسم کلاسی که میخواین محتواش رو داخل این یکی کلاس هم استفاده کنید بنویسید. مثلا به این شکل:

با استفاده از کد بالا ما خصوصیات .message رو گرفتیم و اونهارو در .success و .error و .warning هم استفاده کردیم. اگر کد کامپایل شده خودتون رو نگاه کنید میبینید نتیجه به این صورت هست:

خب دوستان این هم از آموزش این جلسه. امیدوارم مفید بوده باشه.

جلسه ی بعد که جلسه آخر از این سری آموزش هست با کنترل کننده های @if، @for، @each، @while و سبک خروجی فایل و همچنین نحوه تعریف کوئری های media در sass آشنا میشید.

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

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

  • ‏‏

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


    چرا دوبار مقدار دادیم؟ اینجوری دوتا باکس ایجاد میشه؟ یا…؟

    • ‏‏
      سجاد دریس(۸ فروردین ۱۳۹۳)

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

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram