SASS да миксинлардан фойдаланиш
Миксинни эълон қилганимиздан сўнг
биз уни @include директиваси билан чақирамиз,
бу эса миксин номини мутлақо ўз ичига олиши керак.
Шунингдек, унда ихтиёрий равишда
параметрлар ва uslublar бўлиши мумкин.
Келтирилган мисолни кўриб чиқамиз:
@mixin mix{
width: 100px;
height: 100px;
}
div {
@include mix;
padding: 4px;
margin-top: 10px;
}
Компиляция натижаси:
div {
width: 100px;
height: 100px;
padding: 4px;
margin-top: 10px;
}
Миксинларни ҳужжатнинг илдизида ҳам чақириш мумкин, лекин фақатгина улар қоидаларни тасвирламаганда ва уларда ота-онага ишора бўлмаганда. Келтирилган мисолни кўринг:
@mixin active {
p {
color: #161618;
background-color: red;
}
}
@include active;
Компиляциядан кейин биз кўрамиз:
p {
color: #161618;
background-color: red;
}
Келтирилган кодни компиляция натижаси қандай бўлишини тушантиринг:
@mixin font {
font-family:'Courier New', Courier, monospace;
font-size: 12px;
}
#product-card {
@include font;
color: #090957;
font-weight: 600px;
}
Келтирилган кодни компиляция натижаси қандай бўлишини тушантиринг:
@mixin style {
color:#090957;
}
button, link {
@include style;
font-size: 10px;
padding: 4px;
}
Келтирилган кодни компиляция натижаси қандай бўлишини тушантиринг:
@mixin active-text {
font-size: 14px;
font-weight: bold;
text-decoration: underline;
color: blue;
}
#product-card, .active, .content {
@include active-text;
padding: 4px;
}
Келтирилган кодни компиляция натижаси қандай бўлишини тушантиринг:
@mixin size {
font-size: 14px;
padding: 10px;
margin: 4px;
}
@mixin color {
color: #580909;
background-color: #e9e5ab;
}
#product-card {
@include size;
@include color;
width: 600px;
}