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

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



  آیا می دانید تا کنون 6253 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

آموزش sass : قسمت چهارم - کنترل کننده ها، media و سبک خروجی

7738 ۱۴ بهمن ۹۲

سلام دوستان. همونطور که گفتم در قسمت آخر از سری آموزشی sass قراره با کنترل کننده ها، کوئری media و سبک خروجی فایل آشنا شوید.

کنترل کننده ها

Sass از چند کنترل کننده اصلی پشتیبانی میکنه برای اینکه ببینه اگر مثلا یه شرطی برقرار بود چه استایلی رو استفاده کنه و یا اینکه چندین بار یک استایل رو با تغییرات جزئی استفاده کنه.

@if

کنترل کننده @if یک عبارت رو بررسی میکنه و درصورتی که این عبارت هرچیزی به جز false یا null رو برگردونه، دستوری که براش تعریف شده رو پردازش میکنه. به این مثال ساده دقت کنید:

اگر این کد رو کامپایل کنید چنین نتیجه ای داره:

حالا بیاین مقدار متغیر $boolean رو به false تغییر بدیم و فایل رو کامپایل کنیم. میبینید که دیگه اصلا خبری از .some-selector هم نیست. چون برای .some-selector خصوصیتی تعریف نکردیم (جز همون خصوصیت که در صورت درست بودن شرط برای ما اجرا میشد)، وقتی فایل رو کامپایل کنیم دیگه اثری از .some-selector نیست. اما اگر شما یه خصوصیت دیگه بیرون از قسمت شرطی داشته باشین و مقدار متغیر $boolean شما false باشه:

چون $boolean در اینجا false هست پس قسمت بلاک شرط اجرا نمیشه و بعد از کامپایل به این صورت در میاد:

sass از else if و else هم به صورت های @else if و @else هم پشتیبانی میکنه. اگر شرط @if درست نباشه میره سراغ @else if بعدی، اگه اونم درست نباشه میره سراغ @else if بعدیش و همینطور ادامه داره تا وقتی هیچکدوم از @else if ها هم درست نباشه اونوقت میره و دستورات مخصوص بلاک @else رو پردازش میکنه:

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

@for

@for مجموعه از بدنه ی دستورات رو چندین بار تکرار میکنه. برای هر بار تکرار هم از متغیر شمارنده تو خروجی استفاده میکنیم تا خروجی های متفاوت رو تولید کنیم. کنترل کننده @for دو شکل داره:

یکی @for $var from <start> through <end>

یکی هم @for $var from <start> to <end>

به تفاوت بین کلمه ی through و to دقت کنید. $var هر اسمی میتونه داشته مثلا $mahshad ولی چون این متغیر همون شمارنده هست و بعد از یکبار اجرا شدن حلقه یکی بهش اضافه میشه بهتره اسمش رو $i بذارید.

این دو شکل استفاده از @for باهم یه فرقی دارند. اگر از شکل from … through استفاده کنید مقدار <end> هم تو بازه ی اعداد حساب میشه ولی اگر از شکل from … to استفاده کنید مقدار <end> دیگه تو بازه نیست. برای اینکه بهتر متوجه منظورم بشین مثال هارو ببینید.

استفاده از شکل @for $var from <start> through <end> :

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

استفاده از شکل @for $var from <start> to <end> :

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

اگر براتون این سوال پیش اومد که چرا نوشتیم #{$i} یادتون بیاد که جلسه های قبل گفتیم اگر خواستیم مقدار یه متغیری چاپ بشه اون متغیر رو داخل #{} میذاریم.

@each

@each یه شکل استفاده داره، @each $var in <list> که $var متغیر هست و میتونه هر اسمی داشته باشه. <list> هم یه عبارت هستش که باید به صورت لیست نوشته بشه یعنی مثلا به این صورت: one, two, three. به این میگن لیست. تعداد دفعات اجرا شدن @each بستگی به تعداد مقادیر لیست شما داره. مثلا تو این لیست بالایی که من نوشتم، @each سه بار اجرا میشه و تو هربار اجرا شدنش شما میتونین از اسم متغیر استفاده کنید. اسم متغیر هم تو هربار اجرا برابر با یکی از مقدارهای موجود تو لیست هست. یه مثال ببینید بهتر متوجه میشید:

کامپایل کد بالا چنین کدی دراختیارتون میذاره:

@while

@while هم تا وقتی که شرط جلوش false نشده بدنه حلقه رو تکرار میکنه. دستورات @while رو میتونیم به تعداد مشخصی که خودمون میخوایم تکرار کنیم. دستور @while از دستور @for بهتره و انعطاف پذیری بیشتری داره چون در @for بعد از هربار اجرا شدن حلقه یکی به عدد شمارنده اضافه میشه ولی در @while میتونیم هر تعدادی که خواستیم مثلا دوتا دوتا به شمارنده اضافه کنیم.

نحوه استفاده از @while:

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

دقت کنید که موقع استفاده از @while باید شمارنده رو قبل از حلقه تعریف کنیم و تو هر بار اجرای حلقه مقداری رو به شمارنده اضافه یا ازش کم کنیم.

تو این مثال مقدار شمارندمون (که همون متغیر $i هست) رو اول برابر با 6گذاشتیم. بعد گفتیم تا زمانیکه $i بزرگتر از صفر هست بیا دستورات رو اجرا کن و در آخر حلقه 2تا از مقدار شمارنده کم کردیم. شمارنده میشه 4. 4بزرگتر از صفره پس دوباره دستوارت اجرا میشه و آخر سر باز 2تا از مقدار شمارندمون که این بار 4بود کم کردیم و شمارنده شد 2. به همین ترتیب ادامه داره تا وقتی که درستی شرط دیگه برقرار نباشه که دیگه حلقه اجرا نمیشه.

کوئری های media

کوئری های media در sass دقیقا به همون شکلی هستند که در css هم هستند، فقط یک قابلیت اضافه دارند، اونم اینه که میتونیم به صورت تو در تو بنویسیمشون. به مثال زیر دقت کنید:

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

این روش باعث میشه استایل های مخصوص media رو خیلی راحت و بدون اینکه بخوایم دوباره انتخابگرها رو تکرار کنیم، اضافه کنیم.

کوئری های @media میتونند داخل همدیگه هم قرار بگیرند که در این صورت این کوئری ها با استفاده از عملگر and ترکیب میشوند. مثلا:

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

و آخرین مورد اینکه کوئری های @media میتونند از عبارت های sass (شامل متغیرها، توابع و عملگرها) برای اسم خصوصیت و مقدار خصوصیت هم استفاده کنند. مثلا:

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

سبک خروجی

اگر دقت کرده باشید تو آموزش، کدهای کامپایل شده ی ما یه همچین شکلی داشت:

منظورم محل قرارگرفتن این آکولاد ها، خصوصیات و مقدارهاشونه.

تو sass میتونیم 4تا استایل برای خروجیمون انتخاب کنیم. استایلهای nested، expanded، compact و compressed.

Nested همینی میشه که تو این آموزش استفاده کردیم:

ولی Expanded میشه این شکلی:

Compact میشه این شکلی:

و Compressed هم که حالت فشرده کردن میشه:

از نرم افزار koala که استفاده میکنید وقتی میخواین فایلی رو کامپایل کنید، بعد از انتخاب کردن فایل مد نظرتون، یه منو سمت راست باز میشه که دکمه compile داره. یخورده بالاتر از این دکمه نوشته output style و یه لیست کشویی داره که هر 4تا استایلی که معرفی کردیم رو داره و میتونید هرکدوم که دوست دارید رو انتخاب کنید و بعد compile رو بزنید.

این هم قسمت آخر این سری. اگر نظری دارید خوشحال میشم بدونم.

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

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

  • ‏‏

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

  • ‏‏

    ممنون خیلی عالی بود

  • ‏‏
    سیامک(۸ آبان ۱۳۹۳)

    عالی بود.
    سر حوصله توضیح میدین خیلی خوبه.

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram