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

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



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

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

9766 ۹ بهمن ۹۲

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

عملگرها

عملیات اعداد

انجام عملیات ریاضی در css میتونه خیلی مفید باشه. Sass عملگرهای اصلی ریاضی مثل + و - و * و / و % رو داره. در این مثال از عملیات ساده ریاضی برای محاسبه عرض article و aside استفاده میشه.

الان یک fluid grid بر اساس 960پیکسل ساختیم. ما دو نوع grid یا همون شبکه بندی داریم. یکی fixed grid و یکی fluid grid.

Fixed grid یعنی شبکه بندی شما ثابت هست و با تغییر سایز مرورگر تغییری نمیکنه. این حالت وقتی اتفاق میفته که برای تقسیم بندی صفحه خودتون از واحدهایی مثل px یا cm یا em استفاده کنید. ولی fluid grid یعنی سایز شبکه های شما با تغییر سایز مرورگر عوض میشه و این حالت وقتی اتفاق میفته که شما از واحد اندازه گیری درصد یا همون % استفاده کنید.

خب فایل css تولید شده ما به این صورت در میاد:

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

نکته ای که هنگام استفاده از / وجود داره اینه که بعضی جاها عملیات تقسیم رو انجام میده ولی بعضی جاها فقط بین مقادیر یک خاصیت ظاهر میشه و یه جور راه جداسازی اعداد هستش. در Sass هم علامت / در حالت پیش فرض عملیات تقسیم رو انجام نمیده!

ولی سه حالت وجود داره که باعث میشه علامت / معنی تقسیم بده:

1- اگر مقدار یا قسمتی از اون داخل متغیر ذخیره شده باشه.

2- اگر مقدار داخل پرانتز قرارگرفته باشه. پرانتز ها برای مشخص کردن نوبت اجرای عملیات هم کاربرد دارند.

3- اگر مقدار به عنوان بخشی از عبارت حسابی دیگر استفاده بشه.

برای مثال:

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

میبینید که علامت / در خط اول معنی تقسیم رو نداشت!

حالا اگر شما دو تا متغیر دارید و میخواید علامت / به همون معنی که داخل css وجود داره (یعنی فقط جداکننده و نه تقسیم) بینشون استفاده بشه میتونید متغیرهاتون رو داخل #{} قرار بدید، مثلا:

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

عملیات رنگها

همه ی این عملگرهایی که بالا گفتیم برای عملیات حسابی روی رنگ ها هم کاربرد داره. مثلا:

به این صورت حساب میشه که 01+04=05، 02+05=07 و 03+06=09. پس نتیجه کامپایل ما میشه:

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

یک مثال دیگه از کاربرد عملگرها در رنگها:

و اینطوری حساب میشه که 01*2=02، 02*2=04 و 03*2=06. پس نتیجه کامپایل میشه:

عملیات رشته ها

حتی تو sass ما عمل الحاق رشته رو هم داریم که با عملگر + هستش:

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

داخل رشته میتونید از #{} استفاده کنید تا مقادیر داینامیک رو درون رشته قرار بدید:

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

عملیات boolean

Sass از عملگرهای and، or و not برای مقادیر Boolean پشتیبانی میکنه

ایمپورت کردن

Css یه گزینه import داره که به شما این امکانو میده تا فایل css خودتون رو به بخش های کوچکتری تقسیم کنید. فقط مساله ای که هست اینه که هر زمان که از @import در css استفاده کنید یه درخواست HTTP دیگه میسازه. Sass هم همین گزینه @import که در css هست رو داره با این تفاوت که درخواست HTTP نمیسازه و محتوای همه فایلهایی که شما در sass ایمپورت کردین رو با فایلی که داخلش از @import استفاده کردین ترکیب میکنه و درنهایت بعد از کامپایل شما فقط یک فایل css رو در مرورگر وب بارگذاری میکنید.

فرض کنید که ما دو فایل reset.scss و base.scss داریم که میخوایم محتوای فایل reset.scss رو داخل base.scss ایمپورت کنیم.

محتویات فایل reset.scss:

و محتویات فایل base.scss:

میبینید که ما تو فایل base.scss برای ایمپورت کردن فایل reset.scss از @import 'reset'; استفاده کردیم پس وقتی میخواید به فایلی رو ایمپورت کنید نیازی نیست که پسوند .scss رو براش بیارید چون خود sass انقدر باهوشه که این چیزارو میفهمه :)

وقتی فایل css رو تولید کنید میبینید که کدهاتون به این صورت درمیاد:

یادآوری : وقتی میخواید فایلی رو ایمپورت کنید برای اینکه sass بفهمه نیازی نیست این فایل رو به صورت جداگانه هم کامپایل کنه، کافیه اول اسم فایلی که قراره ایمپورت بشه علامت _ بذارین یعنی اسم فایل باید _reset.css باشه اما موقع ایمپورت کردن فقط بنویسید @import 'reset'; یعنی نیازی نیست موقع ایمپورت کردن اون فایل علامت _ که در اول اسم فایل هست نوشته بشه.

 کامنت گذاری با استفاده از /* */ و //

نحوه نوشتن توضیحات و کامنت در sass دقیقا شبیه نوشتن توضیحات در css هست یعنی برای توضیحات تک خطی از // و برای توضیحات چند خطی از /* */ استفاده میشه. تنها نکته اینجاست که توضیحاتی چند خطی به هنگام کامپایل در فایل css نوشته میشه ولی توضیحات تک خطی حذف میشه. یعنی اگر همچین چیزی داشته باشیم:

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

نکته : وقتی سبک فایل خروجی شما compressed باشه کامنتهایی که با /* */ درج شدند باز هم نشون داده نمیشه. برای اینکه بتونید کامنتتون رو تو حالت compressed هم نشون بدید باید بعد از /* علامت ! بذارین یعنی مثلا بنویسید /*! this is a comment */

راجع به سبک خروجی فایل هم جلسه آخر صحبت میکنیم.

این جلسه از آموزش sass هم تموم شد و امیدوارم بدردتون خورده باشه. در جلسه بعدی راجع به توابع، میکسین ها و وراثت در sass صحبت میکنیم.

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

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

  • ‏‏
    ناشناس(۹ بهمن ۱۳۹۲)

    سلام.ممنون از مطالب خوبتون.من برای انجام قسمت کوچیکی از یک پروژه به کمک احتیاج دارم و فقط تا جمعه 11 بهمن وقت دارم،اگه کسی می تونه کمک کنه لطفا با ایمیل olive3822014 در جیمیل با من تماس بگیرید.مرسی.

  • ‏‏

    سلام نوروزتون خجسته
    با تشکر از آموزش مفیدتون و وقتی که گذاشتید یکم سوال پیش اومده که امیدوارم با راهنمایی شما حل بشه.
    1- من role رو نمیدونم چیه که داخل کد ها هست اگه ممکنه توضیح بدین. مثل [role=”main”]
    2- مگه چند خط کامنت یا چند بایت اندازه یک عکس یا چند بایت کد اضافه چقدر تو سرعت سایت تاثیر داره که موقع کمپرس حذف میشه یا اینقد رعایت میشه در سایر موارد. چون سایز یک فایل متنی که معمولا از بایت بیشتر نمیشه و این نباید زیاد تاثیر داشته باشه. چون دیدم اینجا مطرح شد و چند وقت بود واسم سوال بود گفتم بپرسم. با تشکر مجدد

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

      سلام.
      1.به این شکل گزینشگرها در CSS، گزینشکرهای صفت، یا attribute selectors گفته میشه، منظور از [role=”main”] در کدهای فوق، انتخاب تگی که دارای صفت rol با مقدار main است.
      2. تائیر چندان زیادی ندارن. در حد چند میلی ثانیه، ولی خب، اگه همه ی فایل ها بهینه باشن بهتره.

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram