Wie kürzt man eine Regel mit mehreren Hintergrundcss ab?

Hallo,Wie kürzt man eine Regel mit mehreren Hintergrundcss ab?

Ich habe diese CSS-Code:

.point1 {background:url(../images/top/pointback.png) no-repeat 0 110px/100% 35%,url(../images/top/point1back.jpg) no-repeat 0 0/100%;} 
.point2 {background:url(../images/top/pointback.png) no-repeat 0 110px/100% 35%,url(../images/top/point2back.jpg) no-repeat 0 0/100%;} 
.point3 {background:url(../images/top/pointback.png) no-repeat 0 110px/100% 35%,url(../images/top/point3back.jpg) no-repeat 0 0/100%;} 
.point4 {background:url(../images/top/pointback.png) no-repeat 0 110px/100% 35%,url(../images/top/point4back.jpg) no-repeat 0 0/100%;}

wie Sie sehen können, alle vier Regeln sind fast identisch mit Ausnahme des zweiten Hintergrundbild, das für jeden Fall ändert. Ich frage mich, ob es möglich ist, das zu vereinfachen, damit ich alles mit einer einzigen Regel erklären kann. Etwas wie dieses:

.point1, point2, point3, point4 {background:url(../images/top/pointback.png) no-repeat 0 110px/100% 35%} 

.point1 {url(../images/top/point1back.jpg) no-repeat 0 0/100%;} 
.point2 {url(../images/top/point2back.jpg) no-repeat 0 0/100%;} 
.point3 {url(../images/top/point3back.jpg) no-repeat 0 0/100%;} 
.point4 {url(../images/top/point4back.jpg) no-repeat 0 0/100%;}

Danke.

Quelle

2016-04-04 Cain Nuke

Es scheint, dass Sie für SASS oder weniger Variablen suchen. –

Sorry, noch nie von denen gehört. –

Hier ist ein Tutorial für sass https://scotch.io/tutorials/getting-started-with-sass –

es kann getan werden, aber es ist wahrscheinlich nicht die vollständig terse Lösung, die Sie für

suchen Sie können die Eigenschaften wie alle die gleiche wie die erste Erklärung deklarieren und dann Überschreibung die spezifische background-image Eigenschaft/Wert in jeder Klasse verwendet werden.

Leider gibt es keine Methode, dies zu tun nur für das zweite Hintergrundbild oder kombinieren Sie dies zu einer einzigen Eigenschaft.

.point1, 
.point2, 
.point3, 
.point4{ 
    background: url(../images/top/pointback.png) no-repeat 0 110px/100% 35%, url(../images/top/point1back.jpg) no-repeat 0 0/100%; 
} 

.point2 { 
    background-image: url(../images/top/pointback.png), url(../images/top/point2back.jpg); 
} 

.point3 { 
    background-image: url(../images/top/pointback.png), url(../images/top/point3back.jpg); 
} 

.point4 { 
    background-image: url(../images/top/pointback.png), url(../images/top/point4back.jpg); 
}

Quelle

2016-04-04 12:28:21

Danke. Es ist in Ordnung. Wenn das der minimale Ausdruck ist, ist es gut für mich. Ich möchte nur so viel Code wie möglich speichern. –

Wie kürzt man eine Regel mit mehreren Hintergrundcss ab?

Antwort

Verwandte Themen