Estensione degli Stili con la Direttiva @extend
La quarta funzionalità utile consente di applicare proprietà CSS predefinite da un elemento a un altro, creando una relazione tra i selettori. Questo significa che un selettore può ereditare le proprietà di un altro selettore.
Ora, osserviamo l'immagine qui sotto, che mostra due elementi button:
Abbiamo due pulsanti: "send" e "submit". L'unica differenza tra questi elementi è il valore della proprietà background-color. Pertanto, possiamo definire gli stili per il pulsante "send" e far ereditare tali stili al pulsante "submit".
Il codice html è:
<button class="send-button">send</button>
<button class="submit-button">submit</button>
Vediamo come possiamo ereditare gli stili con l'aiuto di sass.
.send-button {
padding: 10px 20px;
border: 2px solid #4f5e77;
border-radius: 10px;
color: white;
background-color: #ff8a00;
}
.submit-button {
@extend .send-button;
background-color: #9bbaee;
}
Il selettore .submit-button eredita tutti gli stili dal selettore .send-button utilizzando la direttiva @extend.
Grazie per i tuoi commenti!
Chieda ad AI
Chieda ad AI
Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione
Can you explain how the @extend directive works in more detail?
Are there any limitations or drawbacks to using @extend in Sass?
Can you show an example of how to override other properties besides background-color?
Awesome!
Completion rate improved to 2.04Estensione degli Stili con la Direttiva @extend
Scorri per mostrare il menu
La quarta funzionalità utile consente di applicare proprietà CSS predefinite da un elemento a un altro, creando una relazione tra i selettori. Questo significa che un selettore può ereditare le proprietà di un altro selettore.
Ora, osserviamo l'immagine qui sotto, che mostra due elementi button:
Abbiamo due pulsanti: "send" e "submit". L'unica differenza tra questi elementi è il valore della proprietà background-color. Pertanto, possiamo definire gli stili per il pulsante "send" e far ereditare tali stili al pulsante "submit".
Il codice html è:
<button class="send-button">send</button>
<button class="submit-button">submit</button>
Vediamo come possiamo ereditare gli stili con l'aiuto di sass.
.send-button {
padding: 10px 20px;
border: 2px solid #4f5e77;
border-radius: 10px;
color: white;
background-color: #ff8a00;
}
.submit-button {
@extend .send-button;
background-color: #9bbaee;
}
Il selettore .submit-button eredita tutti gli stili dal selettore .send-button utilizzando la direttiva @extend.
Grazie per i tuoi commenti!
