دوره جامع و پروژه‌محور طراحی وب با تمرکز روی JavaScript، Ajax و API! با طراحی ریسپانسیو و پروژه‌های حرفه‌ای مثل دیجی‌کالا و شمرون کباب مهارتت رو حرفه‌ای کن!
مشاهده بیشتر
با دوره رایگان "ساخت فریمورک CSS با Sass" حرفه‌ای شو! دیگه وقتشه کدهای شلوغ و تکراری رو کنار بذاری و فریمورک CSS اختصاصی خودتو بسازی. تو این دوره، از صفر تا صد Sass رو یاد می‌گیری و یاد می‌گیری چطور پروژه‌هات رو سریع‌تر و شگفت‌انگیزتر کنی!
مشاهده بیشترمشخصات مقاله
-
724
-
0.0
-
2284
-
0
-
0
آموزش Interpolation در selector و property در Sass
آموزش Sass – Interpolation یا درج متغیر در selector ها و property ها
می توانید با درج متغیر مورد نظر داخل دستور نگارشی #{} (سینتکس interpolation)، آن متغیر را در selector یا (اسم property) property دلخواه تزریق نمایید. نحوه ی استفاده از آن در قطعه کد زیر به نمایش گذاشته شده است:
1 2 3 4 5 6 | $name: foo;$attr: border;p.#{$name} { #{$attr}-color: blue;}<button></button> |
قطعه کد فوق به دستور زیر کامپایل می شود:
1 2 3 4 | p.foo { border-color: blue;}<button></button> |
این امکان نیز وجود دارد که با استفاده از ساختار نگارشی #{}، SassScript (برای مثال اسم متغیر) را داخل مقدار property ها تزریق نمایید. در بیشتر مواقع این کار تفاوت چندانی با استفاده ی مستقیم از خود متغیر ندارد، با این وجود زمانی که از #{} استفاده می شود، تمامی عملیات اطراف آن در کد به مثابه ی کد ساده ی CSS در نظر گرفته می شود. مثال:
1 2 3 4 5 6 | p { $font-size: 12px; $line-height: 30px; font: #{$font-size}/#{$line-height};}<button></button> |
قطعه کد فوق به دستور زیر کامپایل می شود:
1 2 3 4 | p { font: 12px/30px;}<button></button> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | < html > < head > < title >Interpolation< /title > < link rel="stylesheet" type="text/css" href="style.css" / > < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" > < /head > < body > < div class="container" > < h2 >Example using Interpolation< /h2 > < p >SASS stands for Syntactically Awesome Stylesheet...< /p > < /div > < /body >< /html ><button></button> |
حال فایل style.scss را ایجاد نمایید.
1 2 3 4 | p:after { content: "I have #{8 + 2} books on SASS!";}<button></button> |
می توانید با اجرای دستور زیر به SASS اعلان کنید که باید بر روی محتوا و تغییراتی که در فایل مورد نظر رخ می دهد، نظارت داشته و هرگاه بروز رسانی صورت گرفت، همزمان با آن CSS متناظر را نیز بروز آوری کند.
1 | sass --watch C:\ruby\lib\sass\style.scss:style.css<button></button> |
کد فوق را اجرا کنید. فایل style.css به صورت خودکار با محتوای زیر ایجاد می شود.
1 2 3 4 | p:after { content: "I have 10 books on SASS!";}<button></button> |
خروجی
مراحل زیر را جهت گرفتن خروجی از کد طی نمایید:
- کد html بالا را در فایل interpolation.html ذخیره نمایید.
- فایل HTML را با مرورگر مورد انتخاب خود باز نمایید. خروجی زیر را به نمایش می گذارد:
