چطوری باید در فایل های SASS متغیر تعریف کرد ؟ و چطوری از این متغیرها باید استفاده کرد ؟
برای تعریف متغیر در فایل های SASS و استفاده از آنها ابتدا یک فایل sass رو بوجود بیارید (نحوه افزودن و استفاده از فایل های sass در ویژوال استودیو). برای تعریف متغیر از علامت $ استفاده می شود. به عنوان مثال در فایل sass زیر ما 3 متغیر را تعریف و مقداردهی می کنیم.
$myColor:red;
$myFontSize:20px;
$myWidth:200px;
خب حالا برای استفاده از متغیرها به راحتی میتونیم مثل کد زیر عمل کنیم :
فایل site.scss
$myColor:red;
$myFontSize:20px;
$myWidth:200px;
a{
color:$myColor;
font-size:$myFontSize;
width:$myWidth;
}
در کدهای بالا فرض کردیم فایلی به نام site.scss داریم و کدهای بالا را در آن نوشته ایم. از این پس هر تگ a که داریم استایل بالا را به خود خواهد گرفت.
همچنین ما میتونیم مقادیر درون متغیرها رو هم تغییر بدیم. به مثال زیر توجه کنید :
$myColor:red;
h1 {
$myColor:green;
color:$myColor;
}
در کدهای بالا متغیر myColor در ابتدا شامل رنگ قرمز می باشد. اما در تگ های h1 این رنگ تغییر خواهد کرد و به رنگ سبز نمایش داده خواهد شد.
تاریخ :
1401/01/28
- ساعت :
04:04:00 PM
- بازدید :
2704
- پاسخ :
1
|
تاریخ :
1404/04/16
- ساعت :
06:22:00 PM
- بازدید :
47
- پاسخ :
1
|
تاریخ :
1404/01/03
- ساعت :
12:18:00 PM
- بازدید :
218
- پاسخ :
1
|
تاریخ :
1404/01/02
- ساعت :
05:05:00 PM
- بازدید :
276
- پاسخ :
1
|
تاریخ :
1398/10/18
- ساعت :
10:26:00 PM
- بازدید :
3385
- پاسخ :
2
|
تاریخ :
1403/10/20
- ساعت :
12:45:00 AM
- بازدید :
318
- پاسخ :
0
|
تاریخ :
1402/08/01
- ساعت :
06:25:00 PM
- بازدید :
1226
- پاسخ :
1
|
تاریخ :
1398/09/21
- ساعت :
09:53:00 AM
- بازدید :
6563
- پاسخ :
7
|
تاریخ :
1399/06/16
- ساعت :
07:18:00 PM
- بازدید :
8589
- پاسخ :
4
|
تاریخ :
1400/11/14
- ساعت :
12:23:00 AM
- بازدید :
2935
- پاسخ :
2
|
تاریخ :
1398/09/08
- ساعت :
11:21:00 PM
- بازدید :
5157
- پاسخ :
3
|
تاریخ :
1404/04/20
- ساعت :
12:20:00 PM
- بازدید :
46
- پاسخ :
1
|
تاریخ :
1401/01/28
- ساعت :
04:04:00 PM
- بازدید :
2704
- پاسخ :
1
|
تاریخ :
1404/04/16
- ساعت :
05:27:00 PM
- بازدید :
71
- پاسخ :
1
|
تاریخ :
1404/04/16
- ساعت :
06:22:00 PM
- بازدید :
47
- پاسخ :
1
|
تاریخ :
1404/03/22
- ساعت :
06:32:00 PM
- بازدید :
122
- پاسخ :
0
|
تاریخ :
1404/04/12
- ساعت :
01:15:00 PM
- بازدید :
61
- پاسخ :
1
|
تاریخ :
1399/12/17
- ساعت :
02:47:00 PM
- بازدید :
8068
- پاسخ :
4
|
تاریخ :
1404/04/04
- ساعت :
02:25:00 PM
- بازدید :
62
- پاسخ :
1
|
تاریخ :
1404/04/04
- ساعت :
03:35:00 PM
- بازدید :
73
- پاسخ :
1
|