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

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



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

آشنایی با زبان Stylus ( قسمت چهارم ) : سلکتورها ( Selectors )

0 1832 ۳ آبان ۹۳

در این جلسه میخوام در مورد گزینشگرها ( Selectors ) در Stylus براتون توضیح بدم.

اگر با CSS کار کرده باشین ، میدونید که در مقابل گزینشکرها باید آکلاد ( { } ) بزاریم و کدهای مورد نظر رو درونش بنویسیم. ولی در Stylus کار ما راحتتر شده و تنها کاری که ما باید بکنیم ، اینه که یک تورفتگی ( Indent ) ایجاد کنیم. بعبارت دیگه Stylus بر پایه ی Indent بنا شده. برای ایجاد تورفتگی هم کافیه که فقط یکبار کلید Tab رو فشار بدین. مثلا کد زیر رو در نظر بگیرین :

میبینید که خط دوم ، نسبت به خط اول تورفتگیش بیشتره. کد بالا رو اگه کامپایل کنید ، بصورت زیر خواهد شد :

همچنین در کدهای Stylus استفاده از کالون ( : ) اختیاری هست. به این معنی که میتونین استفاده کنید یا نه.

حالا اگر بخواین به مجموعه ای از عناصر کدهای مشابه ای رو نسبت بدین ، میتونین از دو روش اینکارو بکنید :

  • هر عنصر رو با کاما از عنصر دیگه جدا کنید :
  • بعد از هر عنصر Enter بزنید :

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

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

با استفاده از کاراکتر & میتونین به پدر ( Parent ) اشاره کنید. مثلا کد زیر رو در نظر بگیرید :

در اینجا از کاراکتر & استفاده کردیم ، پس به پدرش که همون textarea هست اشاره میکنه. پس میشه گفت بجایی اینکه عبارت textarea:hover رو بنویسیم ، عبارت &:hover رو نوشتیم. این کار باعث میشه که کدمون خلاصه تر بشه. اگر کد بالا رو کامپایل کنید ، بصورت زیر خواهد شد :

حالا اگر بخواید میتونین چندتا عنصر هم قرار بدین. بصورت زیر :

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

میبینید که چقد کارتون راحتتر و سریعتر پیش میره.

در بعضی از مواقع شما به خود کاراکتر & نیاز دارید و نمیخواید که پدرش بیاد و جایگزینش بشه. در این مواقع باید اونو اصطلاحا escape کنید. یعنی قبل از اون باید یک بک اسلش ( \ ) قرار بدین ، بصورت زیر :

  • کاراکتر & که به پدر اشاره میکنه :
  • کاراکتر & که به پدر اشاره نمیکنه :

     

با استفاده از اسلش ( / ) میتونین به عنصر ریشه اشاره کنید. مثلا کد زیر رو در نظر بگیرین :

کد بالا در خروجی بصورت زیر در میاد :

شاید بعضی مواقع نخواید که مثلا اون .is-hovered بیاد و زیرمجموعه ی عناصر پدرش بشه. برای اینکار میتونین قبل از اون علامت اسلش رو بزارین تا بصورت عنصر ریشه باهاش برخورد بشه :

حالا اگه دوباره کامپایل کنید ، بصورت زیر خواهد بود :

توضیحات ( Comment ) :

سه نوع توضیحات در Stylus مورد استفاده قرار میگیره :

  • Single-Line
  • Multi-Line
  • Multi-Line Buffered

نوع اول : توضیحات بصورت تک خطی هست و فقط یک خط رو بصورت کامنت در میاره ، بصورت زیر :

همونطور که دیدید باید از دو تا اسلش استفاده کنید. این نوع کامنت بعد از کامپایل شدن در خروجی CSS نمایش داده نمیشه.

نوع دوم : توضیحات بصورت چند خطی هستند و بصورت زیر تعریف میشن :

اگر این کد رو کامپایل کنید ، توضیحات در خروجی هم نمایش داده میشه. اما اگه بصورت فشرده ( Compress ) کامپایل کنید ، در خروجی نمیان.

نوع سوم : این نوع توضیحات ، دقیقا مثل توضیحات نوع دوم هست ، با این تفاوت که در هر شرایطی در خروجی ظاهر میشه و بصورت زیر هست:

میبینید که باید یک علامت تعجب ( ! ) قرار بدیم.

خب دوستان خسته نباشید.

موفق باشید. یا علی

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

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram