چطوری باید در فایل های 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 این رنگ تغییر خواهد کرد و به رنگ سبز نمایش داده خواهد شد.
تاریخ :
1404/01/03
- ساعت :
12:18:00 PM
- بازدید :
78
- پاسخ :
1
|
تاریخ :
1404/01/02
- ساعت :
05:05:00 PM
- بازدید :
121
- پاسخ :
1
|
تاریخ :
1398/10/18
- ساعت :
10:26:00 PM
- بازدید :
3271
- پاسخ :
2
|
تاریخ :
1403/10/20
- ساعت :
12:45:00 AM
- بازدید :
209
- پاسخ :
0
|
تاریخ :
1402/08/01
- ساعت :
06:25:00 PM
- بازدید :
1128
- پاسخ :
1
|
تاریخ :
1398/09/21
- ساعت :
09:53:00 AM
- بازدید :
6351
- پاسخ :
7
|
تاریخ :
1399/06/16
- ساعت :
07:18:00 PM
- بازدید :
8371
- پاسخ :
4
|
تاریخ :
1400/11/14
- ساعت :
12:23:00 AM
- بازدید :
2800
- پاسخ :
2
|
تاریخ :
1402/07/25
- ساعت :
09:15:00 PM
- بازدید :
1313
- پاسخ :
1
|
تاریخ :
1399/01/11
- ساعت :
02:02:00 PM
- بازدید :
3195
- پاسخ :
3
|
تاریخ :
1404/02/04
- ساعت :
04:31:00 PM
- بازدید :
18
- پاسخ :
0
|
تاریخ :
1404/01/28
- ساعت :
09:29:00 PM
- بازدید :
61
- پاسخ :
1
|
تاریخ :
1404/01/29
- ساعت :
10:55:00 AM
- بازدید :
37
- پاسخ :
1
|
تاریخ :
1404/01/28
- ساعت :
10:46:00 AM
- بازدید :
58
- پاسخ :
1
|
تاریخ :
1404/01/28
- ساعت :
10:27:00 AM
- بازدید :
40
- پاسخ :
1
|
تاریخ :
1404/01/26
- ساعت :
05:27:00 PM
- بازدید :
105
- پاسخ :
1
|
تاریخ :
1404/01/24
- ساعت :
07:09:00 AM
- بازدید :
97
- پاسخ :
0
|
تاریخ :
1404/01/25
- ساعت :
03:09:00 PM
- بازدید :
57
- پاسخ :
1
|
تاریخ :
1404/01/16
- ساعت :
07:20:00 PM
- بازدید :
271
- پاسخ :
1
|
تاریخ :
1404/01/07
- ساعت :
05:02:00 AM
- بازدید :
173
- پاسخ :
1
|