چطوری میتونم از دستورات css به صورت sass به صورت تو در تو استفاده کنم.
نوشتن دستورات و استایل های css توسط دستورات sass به صورت تو در تو کار بسیار ساده ای هست. به عنوان مثال فرض کنید که تگ های HTML زیر را داریم :
<div class="nesting">
<a>
<span>
myText
</span>
</a>
</div>
خب حالا اگر بخواهیم به این تگ های استایل بدیم می تونیم در CSs به صورت زیر عمل کنیم :
.nesting a {
font-size:13px;
}
.nesting a span {
color:red;
}
در دستورات بالا توسط دستورات css ساده به تگ a و تگ span که درون تگ div هستند استایل دادیم. اما اگر بخواهیم همین کار رو توسط sass انجام بدیم میتونیم به صورت زیر عمل کنیم :
$a-width: 100px;
$a-height : 80px;
$myFontSize:15px;
$myBackColor:green;
.nesting{
display: flex;
justify-content:center;
align-items:center;
a{
width:$a-width;
height:$a-height;
background-color:$myBackColor;
span{
font-size:$myFontSize;
}
}
}
تاریخ :
1404/01/03
- ساعت :
10:39:00 AM
- بازدید :
89
- پاسخ :
1
|
تاریخ :
1404/01/02
- ساعت :
05:05:00 PM
- بازدید :
120
- پاسخ :
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
- بازدید :
8370
- پاسخ :
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
- بازدید :
104
- پاسخ :
1
|
تاریخ :
1404/01/24
- ساعت :
07:09:00 AM
- بازدید :
97
- پاسخ :
0
|
تاریخ :
1404/01/25
- ساعت :
03:09:00 PM
- بازدید :
56
- پاسخ :
1
|
تاریخ :
1404/01/16
- ساعت :
07:20:00 PM
- بازدید :
271
- پاسخ :
1
|
تاریخ :
1404/01/07
- ساعت :
05:02:00 AM
- بازدید :
172
- پاسخ :
1
|