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

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



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

شناخت Placeholder Selector در SASS

5 4765 ۲۲ آبان ۹۳

به نام خدا

logo-235e394c

SASS راه های مختلفی را برای به اشتراک گذاشتن کدها بین دستور(rule)های CSS فراهم میکند. شما میتوانید از mixinها استفاده کنید و یا با استفاده از @extend کدهایی را بین سلکتورها به اشتراک بگذارید. SASS در نسخه ی 3.2 یک مفهوم جدید با نام "placeholder"ها را معرفی کرد که @extend را قدرتمند تر میکند.

قبل از اینکه به placeholderها بپردازیم ابتدا در مورد نحوه‌ی کار با دستور @extend صحبت میکنیم.

@extend چگونه کار میکند


دستور @extend اجازه میدهد تا به صورت ساده‌تری استایل های نوشته شده‌ی خود را بین سلکتور ها به اشتراک بگذاریم. به مثال زیر توجه کنید.

کد بالا خروجی زیر را تولید خواهد کرد.

همانطور که مشاهده کردید دستور @extend به ما اجازه میدهد تا به صورت آسان‌تری از وراثت استفاده کنید. در کد بالا توسط دستور @extend اعلام کردیم که .error-icon و .info-icon استایل .icon را به ارث ببرد. همانطور که میبینید کدمان بسیار زیبا و بهینه شد.

اگر با کمی دقت به کد بالا نگاه کنید درمیابید که ما هیچوقت از سلکتور .icon  استفاده نمیکنیم و فقط منظورمان از تعریف این سلکتور آن است که توسط دستور @extend استایلی را که از قبل تعریف کردیم با چندین سلکتور دیگر به اشتراک بگذاریم؛ بنابراین ما یک استایل خواهیم داشت که هرگز از آن استفاده نمیکنیم.

ورود به placeholder selectorها


سلکتورهای placeholder معرفی شدند تا این مشکل را حل کنند. آن‌ها مانند کلاس هستند تنها با این تفاوت که برای تعریف آنها به‌جای استفاده از نقطه(.) از علامت درصد(%) استفاده میکنیم. سلکتورهای placeholderی یک ویژگی بیشتر از کلاس ها دارند و آن این است که بعد از تولید کد CSS(کامپایل شدن) در خروجی نمایش داده نخواهند شد و فقط سلکتورهایی که به آنها @extend شده باشند در خروجی قرار میگیرند.

حالا برمیگردیم به مثال قبلی و آن را با استفاده از سلکتور placeholder مینویسیم.

کدهای CSS  زیر تولید خواهد شد.

همونطور که در کدهای بالا میبینید دیگر خبری از سلکتور اضافی نیست.

 @extend در برابر @include


در نگاه اول شاید placeholder selectorها مانند mixin ها باشند؛ درحالی که از یک دیدگاه تقریبا مانند هم هستند(خروجی آن‌ها در مرورگر یکسان است) ولی وقتی کد CSS تولید میشود تفاوت بسیاری وجود دارد. بیایید این بار مثال قبلی را با یک mixin بازنویسی کنیم.

کد CSS تولید شده:

از یک دیدگاه این روش هم همانند @extend خوب و خواناست ولی اگر به کد تولید شده‌ی CSS نگاه کنیم درمیابیم که خروجی این روش به خوبی خروجی روش قبل نیست زیرا خاصیت ها تکرار شده اند و حجم کد نسبت به مثال قبلی افزایش یافته است. بنابراین در این گونه مواقع روش @extend بهینه تر است.

محدودیت ها


یکی از محدودیت های @extend این است که نمیتوان از داخل بلوک های @media سلکتورها را به یک placeholder selector که بیرون از آن بلوک @media است، extend کنیم و در اینصورت با ارور مواجه میشویم.

خروجی:

همانطور که مشاهده کردید با ارور مواجه شدیم. از آنجاییکه @extend به وسیله ی اضافه کردن یک سلکتور به سلکتور دیگر و بدون تکرار در خاصیت ها کار میکند، اضافه کردن سلکتور ها در بلوک های مدیا مختلف واقعا غیر ممکن است.

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

و کد CSS کامپایل شده به صورت زیر خواهد بود.

 سخن پایانی


@extend و @include هر دو ویژگی های خیلی قدرتمندی دارند که تفاوت اندکی باهم دارد. هنگامی که میخواهید از یکی از این دو دستور استفاده کنید باید از خود بپرسید که آیا کدهای تولید شده‌ی CSS برای شما اهمیت دارد یا نه. در بعضی مواقع @extend میتواندخروجی ساده و بهینه تری را به شما بدهد.

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

موفق باشید.

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

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

  • ‏‏

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

  • ‏‏
    حسین حسنی(۱۸ بهمن ۱۳۹۳)

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

    • ‏‏
      علی امینی(۸ اسفند ۱۳۹۳)

      سلام
      تنها برای افزایش سرعت نیست بلکه میتونید با SASS مدیریت بهتری روی کدها داشته باشید و همچنین از ماژول ها و کدهایی که قبلا نوشتید به راحتی دوباره استفاده کنید. و اگه اهل برنامه نویسی باشید میتونید توابع و میکیسین های کاربردی زیادی برای خودتون بنویسید و در همه ی پروژه ها از اونها استفاده کنید.

      موفق باشید.

  • ‏‏

    سلام و احترام
    از آموزش هاتون ممنون ! اما نگاهی به خودتون و تمام سایت های آموزشی دیگه بندازید و ببینید که این شما هستید که بازار کار طراحی وب ایران رو مفت و به قیمت ناچیز نابود کردید. زمانی داشتن علم طراحی وب ارزش داشت و هرکسی از پسش برنمیومد و حتی یک سایت ساده با قیمت 1.5 میلیون تومن فروش می رفت اما حالا اتفاقی که افتاده اینه که سایتی مثل دیجیکالا رو با قیمت 250 هزار تومن میفروشن و فکر میکنید دلیلش چیه که بازار کار ایران رو به نابودیه ؟ آیا دلیلش این نیست که در عرض 1 ماه هر وبسایت آموزشی پول کلانی از دانشجوها میگیره و به اونا آموزش میده و همه اونها بعد از آموزش به کار رجوع میارن و با کمترین قیمت ها میخوان خودشون رو محک بزنن و از این طریق بازار رو نابود میکنن !
    و واقعا خودتون بگید اگه طراحی وب توی ایران در حال حاضر درامد مناسب برای چرخوندن یک زندگی رو داشت آیا شما به دوره گذاشتن و پول دراوردن از این طریق مراجعه می کردید ؟ واقعا چند صد دولوپر رو به شما نشون بدم که تا چند سال پیش زندگی خونوادگیشون رو با وب می چرخوندن اما الان متاسفانه اگه ماهی 1 تومن هم در بیارن هنر کردن !!
    واقعا چرا همه سایت هایی که زمانی تصمیم داشتن فروشگاه قالب راه بندازن و یا کارهاشون رو تبلیغ کنن ، الان به یک باره همگی در حال گذاشتن دوره های اموزشی کردن و هر سایت حدقل داره ماهانه چندصد دانشجو رو وارد حوزه طراحی وب میکنه و این یعنی نابود شدن این حوزه ! این یعنی دانشجوها فکر میکنن با طراحی وب میلیاردر خواهند شد و وقتی دوره رو دیدن و میخوان وارد بازار کار بشن ، تازه متوجه میشن صدها نفر مثل خودشون وجود داره و بهترین پروژه ها با کمترین قیمت به فروش میرسن !
    امیدوارم واقع بین باشید…اینکه ما میخوایم علممون رو منتقل کنیم و صواب ببریم و این شعارها زیاد میدن و در کنار این شعارها پول کلانی هم به جیب میزنن. و در حال حاضر انقدر بازار ایران خراب شده که وب نویس ها مجبور شدن مهارتشون رو برای خارجی ها بزارن و از اون طریق کسب درامد کنن ! واقع بین باشید…این شما و امثال شما و استادهای دانشگاه بودید که میلیون ها تومن پول گرفتن و بعد از آموزش دانشجوهارو رها کردن گفتن حالا خودتون برید وارد بازار کار بشید…در حالیکه بازار کاری در کار نبود…
    موفق باشید

    • ‏‏
      وحید صالحی(۲۹ اسفند ۱۳۹۴)

      سلام دوست عزیز اینطور که شما می فرمایید منظورتون اینه که یک حرفه تنها در انحصار یک عده باشه که فقط اونها درآمد بالا داشته باشن و بتونن زندگی کنن و بقیه بیکار و بی سواد در رشته مورد نظرشون بمونن (مثل قدیم ها که درس خواندن حق اشرافزادگان بود و طبقات متوسط و ضعیف حق درس خواندن نداشتن چون اگر دانششون بالا می رفتم اشراف فکر می کردند که دیگه نموتونن به زیرر دستات و ضعیفان حکم کنند )این در یک کلام یعنی ایجاد دیکتاتوریسم و انحصار منابع موجود در اختیار یک عده… دیکتاتوریسم واژش این نیست که فقط به یک ملت ظلم بشه بلکه در هر زمینه می تونه بوجود بیاد…در ضمن ادم هایی که به خودشون اعتقاد ندارن و دوست ندارن وارد بازار رقابت بشن اینگونه صحبت می کنن که چرا یک چیزی اینقدر عمومی میشه و به عبارتی دست زیاد میشه و اونها دیگه نمی تونن نرخ کارشون رو به دلخواه تعیین کنن و دستمزد های پرت و بالا بدن چرا که مدعی هستند کارشون تک هست و به عبارتی کار هر کسی نیست بجای اینگونه انتقادها و نطرات مونوپولیسمی وانحصار طلبی بهتر سعی کنیم با دیگران رقابت کنیم و محصول باکیفیت تری تولید کنیم اما با قیمت پایین تر اما فروش بالاتر در حالی که ما از روی طمع می خوایم یک محصول رو چون کم و انحصاری هست رو چند صد برابر بفروشیم و یک شبه ره صد ساله بریم پس بهتره بجای این گونه فکر کردن انحصار طلبی دانش خودمون رو بیشتر کیفیت کارمون رو بالاتر ببریم مطمُن باشید اگر محصول با کیفیت ارایه بدید مشتری حتما سراغتون خواهد اومد یک مقدار بهتره تلاشمون رو بیشتر کنیم و کارمون رو بهتر…
      موفق باشید

  • ارسال دیدگاه

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram