Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Oppiskele Tyylien Laajentaminen @extend-Direktiivillä | CSS-Esiprosessorit ja Sass
Edistyneet CSS-tekniikat

bookTyylien Laajentaminen @extend-Direktiivillä

Neljäs hyödyllinen ominaisuus mahdollistaa ennalta määriteltyjen CSS-ominaisuuksien soveltamisen yhdestä elementistä toiseen, luoden yhteyden valitsimien välille. Tämä tarkoittaa, että yksi valitsin voi periä toisen valitsimen ominaisuudet.

Tarkastellaan nyt alla olevaa kuvaa, jossa näkyy kaksi painiketta:

Meillä on kaksi painiketta: "send" ja "submit." Näiden elementtien ainoa ero on background-color-ominaisuuden arvo. Voimme siis määritellä tyylit "send"-painikkeelle ja antaa "submit"-painikkeen periä nämä tyylit.

HTML-koodi on:

<button class="send-button">send</button>
<button class="submit-button">submit</button>

Katsotaan, miten voimme periä tyylejä sass:n avulla.

.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;
}

.submit-button-valitsin perii kaikki tyylit .send-button-valitsimelta käyttämällä @extend-direktiiviä.

question mark

Mitä @extend tekee Sassissa?

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 7. Luku 6

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Awesome!

Completion rate improved to 2.04

bookTyylien Laajentaminen @extend-Direktiivillä

Pyyhkäise näyttääksesi valikon

Neljäs hyödyllinen ominaisuus mahdollistaa ennalta määriteltyjen CSS-ominaisuuksien soveltamisen yhdestä elementistä toiseen, luoden yhteyden valitsimien välille. Tämä tarkoittaa, että yksi valitsin voi periä toisen valitsimen ominaisuudet.

Tarkastellaan nyt alla olevaa kuvaa, jossa näkyy kaksi painiketta:

Meillä on kaksi painiketta: "send" ja "submit." Näiden elementtien ainoa ero on background-color-ominaisuuden arvo. Voimme siis määritellä tyylit "send"-painikkeelle ja antaa "submit"-painikkeen periä nämä tyylit.

HTML-koodi on:

<button class="send-button">send</button>
<button class="submit-button">submit</button>

Katsotaan, miten voimme periä tyylejä sass:n avulla.

.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;
}

.submit-button-valitsin perii kaikki tyylit .send-button-valitsimelta käyttämällä @extend-direktiiviä.

question mark

Mitä @extend tekee Sassissa?

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 7. Luku 6
some-alt