Tyylien 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ä.
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Awesome!
Completion rate improved to 2.04
Tyylien 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ä.
Kiitos palautteestasi!