Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Impara Estensione degli Stili con la Direttiva @extend | Preprocessori CSS e Sass
Tecniche CSS Avanzate

bookEstensione 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.

question mark

Cosa fa la direttiva @extend in Sass?

Select the correct answer

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 7. Capitolo 6

Chieda ad AI

expand

Chieda ad AI

ChatGPT

Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione

Suggested prompts:

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.04

bookEstensione 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.

question mark

Cosa fa la direttiva @extend in Sass?

Select the correct answer

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 7. Capitolo 6
some-alt