یه تابستون متفاوت با یه تصمیم هوشمندانه! دوره هوش مصنوعی با تخفیف ویژه، فقط با کد AI84 دوره هوش مصنوعی با تخفیف ویژه، فقط با کد AI84
🎯 ثبت نام
بستن تبلیغات
دوره طراحی سایت حرفه‌ای با پروژه واقعی!

دوره جامع و پروژه‌محور طراحی وب با تمرکز روی JavaScript، Ajax و API! با طراحی ریسپانسیو و پروژه‌های حرفه‌ای مثل دیجی‌کالا و شمرون کباب مهارتت رو حرفه‌ای کن!

مشاهده بیشتر
دوره آموزش ساخت CSS Framework ( با SASS )

با دوره رایگان "ساخت فریمورک CSS با Sass" حرفه‌ای شو! دیگه وقتشه کدهای شلوغ و تکراری رو کنار بذاری و فریمورک CSS اختصاصی خودتو بسازی. تو این دوره، از صفر تا صد Sass رو یاد می‌گیری و یاد می‌گیری چطور پروژه‌هات رو سریع‌تر و شگفت‌انگیزتر کنی!

مشاهده بیشتر

آموزش SASS-Property های تودرتو Nested Properties

آموزش SASS – Property های تودرتو و مقداردهی شده به صورت یکجا در یک namespace واحد (Nested Properties)

CSS تعداد زیادی property دارد که همگی در قالب "namespace;" های خاصی سازمان دهی شده اند. برای مثال، ویژگی های font-family، font-size و font-weight همگی در namespace ای به نام font قرار دارند. در CSS خالص زمانی که شما می خواهید تعداد زیادی property را که متعلق به یک namespace واحد هستند، مقداردهی نمایید، بایستی هر یک را به صورت مجزا و جداگانه تایپ کنید و این امر زمان گیر و ملال آور است. SASS یک راه میانبر برای شما تعبیه کرده است: بدین صورت که شما یکبار namespace دلخواه را تایپ می کنید و سپس تمامی property های زیرمجموعه ی آن را داخل همین namespace مقداردهی می نمایید.

مثال 1

در مثال زیر مشاهده می کنید که کلیه ی property های زیر مجموعه ی font از قبیل font-family، font-size و غیره ... در بدنه ی یک namespace واحد تنظیم شده اند:

1
2
3
4
5
6
7
8
.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}
<button></button>

کامپایل می شود به:

1
2
3
4
5
.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; }
<button></button>

namespace میزبان property مربوطه نیز خود می تواند مقداردهی شود. مثال:

1
2
3
4
5
6
.funky {
  font: 20px/24px fantasy {
    weight: bold;
  }
}
<button></button>

کامپایل می شود به:

1
2
3
4
5
.funky {
  font: 20px/24px fantasy;
    font-weight: bold;
}
<button></button>
مثال 2

شما می توانید با استفاده از nested properties (مقداردهی چندین property از یک namespace واحد در یک قطعه کد به صورت یکجا) از تکرار دستورات CSS خودداری نمایید. به طور مثال، فرض بگیرید می خواهید از namespace ای به نام font که دارای property های زیرمجموعه ای به نام font-size، font-family و غیره می باشد. در CSS خالص شما بایستی این property ها را هر بار با namespace شان تکرار کنید. با استفاده از SASS شما قادر خواهید بود property ها را با نوشتن namepace مربوطه ی آن ها یکجا در یک قطعه کد واحد (که همان namespace هست) مقداردهی نمایید.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
< html >
 < head >
  < title >Nested Properties< /title >
    < link rel="stylesheet" type="text/css" href="style.css" / >
  < /head >
  < body >
    < div class="container" >
      < h1 >Example using Nested Properties< /h1 >
      < p class="line" >SASS stands for Syntactically Awesome Stylesheet< /p >
    < /div >
  < /body >
< /html >
<button></button>

فایل style.scss را ایجاد نمایید.

1
2
3
4
5
6
7
8
9
10
style.scss
.line {
   font: {
      family: Lucida Sans Unicode;
      size:20px;
      weight: bold;
      variant: small-caps;
   }
}
<button></button>

با استفاده از دستور زیر می توانید بر روی محتوای فایل مورد نظر نظارت داشته و هرگاه فایل SASS بروز رسانی شد، فایل CSS را نیز همزمان با آن بروز رسانی نمایید.

1
sass --watch C:\ruby\lib\sass\style.scss:style.css<button></button>

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

1
2
3
4
5
6
7
8
style.css
.line {
   font-family: Lucida Sans Unicode;
   font-size: 20px;
   font-weight: bold;
   font-variant: small-caps;
}
<button></button>

خروجی

مراحل زیر را جهت اجرای کد و گرفتن خروجی دنبال نمایید:

  • • کد html فوق را در فایل nested_properties.html ذخیره نمایید.
  • • فایل HTML را با مرورگر دلخواه باز نمایید. خروجی به صورت زیر به نمایش در می آید:آموزش SASS
1396/06/08 2159 829
رمز عبور : tahlildadeh.com یا www.tahlildadeh.com
نظرات شما

نظرات خود را ثبت کنید...