Teknologian jakaminen

scss-käsitteet ja käyttö

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Sisällysluettelo

mikä on scss

Sccs:n ja css:n vertailu

scss:n käyttö

ilmoittaa muuttujat

Erota oletusmuuttujat

Erota globaalit muuttujat ja paikalliset muuttujat

Sisäkkäinen syntaksi

Valitsin sisäkkäin

perus pesintä

Sisäkkäisen vanhemman valitsimen viite (&)

Pesiytysnäkökohdat

sisäkkäinen sisäkkäinen

Kiinteistöjen pesintä

Perusattribuuttien sisäkkäisyys

Pesiytysnäkökohdat

periä

Peruskäyttö

Huomautuksia perinnöstä

Sovellusskenaariot

Paikanpitäjä%

määrittele paikkamerkki

perinnön paikkamerkki

Edut ja soveltuvat skenaariot

Varotoimenpiteet

Sekoita @mixin

Määrittele sekoitus

soita sekoitus

esimerkki

Edut ja soveltuvat skenaariot

Varotoimenpiteet

SCSS käyttää ehdollisia lausekkeita

@if-lause

@else ja @else if -lauseet

Ehdollisten lauseiden sisäkkäisyys

tiivistettynä

Kolme tyyppistä silmukkaa SCSS:ssä

@for silmukka

@jokainen silmukka

@while silmukka

Tee yhteenveto

Mukautetut toiminnot ja käyttö

Määritä mukautetut toiminnot

Käytä mukautettuja toimintoja

Varotoimenpiteet

Kotitehtävät

mikä on scss

SCSS (Sassy CSS) on CSS:n esiprosessorikieli. Se tarjoaa enemmän toimintoja ja joustavuutta CSS-pohjaisena, mikä tekee tyylisivujen kirjoittamisesta ja hallinnasta tehokkaampaa ja kätevämpää.

Tässä on joitain SCSS:n etuja:

  • Muuttujat: SCSS mahdollistaa muuttujien käytön arvojen, kuten värien, kirjasinkokojen jne., tallentamiseen, mikä tekee näiden arvojen säätämisestä tasaisesti koko tyylisivun ajan helpompaa ja ylläpidettävämpää.
  • Sisäkkäiset säännöt: Sisäkkäisiä sääntöjä voidaan käyttää SCSS:ssä tyylien järjestämiseen koodirakenteen selkeyttämiseksi. Voit esimerkiksi kirjoittaa elementin pseudoluokkatyylin sen pääelementin tyylilohkoon sen sijaan, että kirjoittaisit sen useisiin paikkoihin.
  • Mixiinit: Mixinit ovat tapa yhdistää tyyliominaisuuksia uudelleen käytettäväksi lohkoksi. Tämä välttää saman tyylikoodin toistuvan kirjoittamisen ja parantaa koodin uudelleenkäytettävyyttä ja luettavuutta.
  • Tuo (Inline Imports): Useita SCSS-tiedostoja voidaan yhdistää yhdeksi tiedostoksi @import-säännön avulla. Tämä lähestymistapa auttaa jakamaan tyylisivun loogisiin yksiköihin, ja se voidaan järjestää ja hallita joustavasti tarpeen mukaan.
  • Periytys (Extend): SCSS tukee tyylin periytymistä @extend-avainsanan kautta, mikä voi tehdä tyylitaulukosta modulaarisemman ja ylläpidettävämmän.
  • Toiminnot: SCSS mahdollistaa matemaattiset toiminnot tyylitaulukoissa, kuten yhteen-, vähennys-, kerto- ja jakolaskutoimet, joista on apua joidenkin dynaamisten tyylilaskutoimitusten käsittelyssä.
  • Modulaarisuus: SCSS:n ominaisuudet tekevät tyylisivuista modulaarisempia ja jäsenneltympiä, mikä voi paremmin hallita ja ylläpitää tyylejä erityisesti suurissa projekteissa.

Yhteenvetona voidaan todeta, että SCSS ei ainoastaan ​​säilytä kaikki CSS:n toiminnot, vaan se sisältää myös edistyneitä ominaisuuksia, kuten muuttujia, sisäkkäisyyttä, miksausta, tuontia jne. Näiden toimintojen avulla kehittäjät voivat kirjoittaa ja hallita tyylisivuja tehokkaammin, ja niitä käytetään yleisesti nykyaikaisissa etu- yksi työkaluista.

Sccs:n ja css:n vertailu

kielioppi:

  • CSS: CSS:n perussyntaksi, säännöt määritellään valitsimien, attribuuttien ja arvojen avulla.
  • SCSS: SCSS on CSS:n esiprosessorikieli. Se tarjoaa enemmän toimintoja ja syntaksia, kuten muuttujia, sisäkkäisiä sääntöjä, sekoituksia, tuontia jne., jotka tekevät tyylisivujen kirjoittamisesta joustavampaa ja tehokkaampaa.

Luettavuus ja ylläpidettävyys:

  • CSS: Suuremmissa projekteissa CSS-tiedostot voivat muuttua hyvin monisanaisiksi ja vaikeita ylläpitää, koska niistä puuttuu jäsennelty ja modulaarinen ominaisuuksia.
  • SCSS: SCSS tukee muuttujia ja sisäkkäisiä sääntöjä. Nämä ominaisuudet tekevät koodista luettavamman ja ylläpidettävämmän. Muuttujia ja mixinejä käyttämällä voidaan vähentää toistuvaa koodin kirjoittamista ja sisäkkäiset säännöt voivat ilmaista selkeämmin HTML-rakenteen hierarkkisen suhteen.

Toiminnon laajennus:

  • CSS: Vakio-CSS voi tehdä vain perustyylimäärittelyn ja valitsinsovituksen.
  • SCSS: SCSS esittelee edistyneitä toimintoja, kuten miksauksen, periytymisen ja laskelmat. Nämä toiminnot tekevät tyylisivuista joustavampia ja tehokkaampia, ja ne pystyvät paremmin selviytymään monimutkaisista tyylivaatimuksista.

yhteensopivuus:

  • CSS: Selaimet tukevat CSS:ää suoraan, muita käännösvaiheita ei tarvita.
  • SCSS: Kääntäjän on muutettava SCSS normaaliksi CSS-tiedostoksi, ennen kuin selain voi ymmärtää ja käyttää sitä.

oppimiskäyrä:

  • CSS: CSS:n oppiminen on suhteellisen yksinkertaista, ymmärrät vain valitsimien, ominaisuuksien ja arvojen perusyhdistelmän.
  • SCSS: SCSS:n oppiminen vaatii sen ainutlaatuisen syntaksin ja toimintojen, kuten muuttujien, miksauksen, sisäkkäisyyden jne., hallitsemista, mikä vaatii tietyn oppimis- ja sopeutumisprosessin.

Yhteenvetona voidaan todeta, että tavalliseen CSS:ään verrattuna SCSS tarjoaa enemmän työkaluja ja ominaisuuksia tyylisivujen kirjoittamisen ja ylläpidon yksinkertaistamiseksi, ja se sopii erityisen hyvin suurten ja monimutkaisten projektien kehittämiseen. Pienissä projekteissa tai yksinkertaisissa muotoilutarpeissa tavallinen CSS voi kuitenkin olla yksinkertaisempi ja kätevämpi.

scss:n käyttö

Ennen kuin opit scss:n, asenna ensin kaksi vscode-laajennusta, jotta scss muunnetaan tavallisiksi CSS-tiedostoiksi myöhempää oppimista varten!

Etsi sass laajennuskaupasta, lataa seuraavat kaksi laajennusta ja käynnistä vscode uudelleen!

ilmoittaa muuttujat

Muuttujien ilmoittaminen SCSS:ssä on hyvin yksinkertaista, voit käyttää $-symbolia muuttujien määrittämiseen.

Tässä on yksinkertainen esimerkki muuttujien ilmoittamisesta ja käytöstä SCSS:ssä:

  1. // 定义变量
  2. $primary-color: #3498db;
  3. $secondary-color: #2ecc71;
  4.  
  5. // 使用变量
  6. body {
  7.   background-color: $primary-color;
  8. }
  9.  
  10. a {
  11.   color: $secondary-color;
  12. }

Yllä olevassa esimerkissä määritimme kaksi muuttujaa $primary-color ja $secondary-color tallentamaan ensisijaisen värin ja toissijaisen värin. Voimme sitten käyttää näitä muuttujia tyylisäännöissä pitääksemme värit yhtenäisinä ja helposti muokattavissa koko tyylisivun ajan.

Kun SCSS-tiedosto käännetään normaaliksi CSS-tiedostoksi, kaikki muuttujat korvataan niitä vastaavilla arvoilla, joten lopullinen luotu CSS-tiedosto ei sisällä muuttujamäärityksiä.

Erota oletusmuuttujat

SCSS:ssä voit käyttää oletusmuuttujia varmistaaksesi, että muuttujalla on vaihtoehtoinen arvo, jos sitä ei ole määritetty. Tämä on erityisen hyödyllistä, kun työskentelet teeman kanssa tai määrität tyylejä.

Tässä on esimerkki oletusmuuttujien ilmoittamisesta ja käytöstä:

  1. // 声明变量，并设置默认值
  2. $primary-color: #3498db !default;
  3. $secondary-color: #2ecc71 !default;
  4.  
  5. // 使用变量
  6. body {
  7.   background-color: $primary-color;
  8. }
  9.  
  10. a {
  11.   color: $secondary-color;
  12. }

Yllä olevassa esimerkissä käytimme !default-tunnistetta oletusarvon määrittämiseen. Tämä tarkoittaa, että jos $primary-color tai $secondary-color ei ole määritelty muualla ennen kuin ne lisätään kyseiseen SCSS-tiedostoon, ne käyttävät määritettyjä oletusarvoja (#3498db ja #2ecc71). Jos nämä muuttujat on määritetty ennen tiedoston tuontia, oletusarvot ohitetaan.

Oletusmuuttujien käytön etuna on, että sen avulla voit antaa muuttujille vaihtoehtoisia arvoja ilman, että jo määritettyjä muuttujia korvataan. Tämä on erityisen hyödyllistä luotaessa teemoja tai jaettaessa muuttujia useiden tyylitiedostojen välillä.

Erota globaalit muuttujat ja paikalliset muuttujat

  • Yleiset muuttujat: Yleiset muuttujat ovat muuttujia, jotka on ilmoitettu valitsimen tai mikserin/toiminnon ulkopuolella. Ne ovat käytettävissä koko tyylitaulukossa, ja jos sama globaali muuttuja on määritetty useissa tiedostoissa, niiden arvot pysyvät yhtenäisinä.
  • Paikalliset muuttujat: Paikalliset muuttujat ovat valitsimen tai mikserin/toiminnon sisällä määritettyjä muuttujia. Niitä voidaan käyttää vain siinä laajuudessa, jossa ne on määritelty, eivätkä ne ole enää voimassa kyseisen soveltamisalan ulkopuolella.

Huomautus: paikalliset muuttujat ohittavat globaalit muuttujat

Kun muuttuja, jolla on sama nimi kuin globaalilla muuttujalla, ilmoitetaan uudelleen paikallisessa laajuudessa, paikallinen muuttuja korvaa globaalin muuttujan arvon. Tämä mahdollistaa eri muuttuja-arvojen määrittämisen tietylle valitsimelle tai sekoittimelle vaikuttamatta globaaliin tilanteeseen.

Käytä avainsanaa !global muuttaaksesi paikalliset muuttujat globaaleiksi muuttujiksi

SCSS tarjoaa !global-avainsanan paikallisten muuttujien ilmoittamiseksi globaaleiksi muuttujiksi. Tämä saa paikallisen muuttujan arvon nousemaan globaaliin laajuuteen, jossa se on ilmoitettu, ja korvaa kaikki olemassa olevat samannimiset globaalit muuttujat.

Esimerkki:

  1. // 全局变量
  2. $primary-color: #3498db;
  3.  
  4. .button {
  5.   // 局部变量，覆盖全局变量
  6.   $primary-color: #cc582e;
  7.   background-color: $primary-color; // 使用局部变量值
  8. }
  9.  
  10. // 使用 !global 将局部变量变为全局变量
  11. $primary-color: #cddb34;
  12.  
  13. .button {
  14.   // 使用 !global 将局部变量变为全局变量
  15.   $primary-color: #2ecc71 !global;
  16. }
  17.  
  18. body {
  19.   background-color: $primary-color; // 这里使用的是已变为全局的 $primary-color
  20. }

Ensimmäisessä esimerkissä paikallinen muuttuja $primary-color .button-valitsimen sisällä ohittaa globaalin muuttujan arvon. Toisessa esimerkissä !global-avainsanaa käyttämällä .button-valitsimen sisällä olevat paikalliset muuttujat muunnetaan globaaleiksi muuttujiksi, mikä vaikuttaa muuttujien arvoihin globaalissa laajuudessa.

Sisäkkäinen syntaksi

Valitsin sisäkkäin

perus pesintä

Valitsin sisäkkäin mahdollistaa alavalitsimien tyylisääntöjen sisäkkäisyyden ylävalitsimien sisään, esimerkiksi:

  1. // SCSS代码
  2. .navbar {
  3.   background-color: #333;
  4.   padding: 10px;
  5.  
  6.   ul {
  7.     list-style: none;
  8.     margin: 0;
  9.     padding: 0;
  10.  
  11.     li {
  12.       display: inline-block;
  13.       margin-right: 10px;
  14.  
  15.       a {
  16.         text-decoration: none;
  17.         color: #fff;
  18.  
  19.         &:hover {
  20.           text-decoration: underline;
  21.         }
  22.       }
  23.     }
  24.   }
  25. }

Yllä olevassa koodissa .navbar-valitsin sisältää sisäkkäisen ul-, li- ja alivalitsimen. Tämä sisäkkäinen rakenne tekee tyylisäännöistä selkeämpiä ja helpompia hallita.

Sisäkkäisen vanhemman valitsimen viite (&)

SCSS:ssä &-symbolia käytetään viittaamaan päävalitsimeen, mikä on erityisen hyödyllistä pseudoluokkien tai pseudoelementtien tapauksessa. Käytä esimerkiksi &:hover-näppäintä viitataksesi nykyisen valitsimen päävalitsimeen ja lisäämällä :hover-tilan tyyli.

  1. .button {
  2.   background-color: #3498db;
  3.   color: #fff;
  4.   padding: 8px 16px;
  5.   border: none;
  6.   text-align: center;
  7.   text-decoration: none;
  8.   display: inline-block;
  9.  
  10.   &:hover {
  11.     background-color: #2980b9;
  12.   }
  13. }

Pesiytysnäkökohdat
  • Valitsinsyvyys: Vältä liian syvää valitsimen sisäkkäisyyttä, koska se voi lisätä tyylin prioriteettia ja vaikeuttaa tyylien ohittamista ja ylläpitoa.
  • Luettavuus: Kun käytät valitsimen sisäkkäisyyttä, kiinnitä huomiota siihen, että koodi on luettavissa ja selkeä, ja vältä liian monimutkaisia ​​sisäkkäisiä rakenteita.
  • Suorituskyky: Sisäkkäiset rakenteet voivat suurentaa luodun CSS-tiedoston kokoa, mutta ne voidaan yleensä optimoida asianmukaisella tyylijärjestelyllä ja kirjoittamisella.
sisäkkäinen sisäkkäinen

SCSS mahdollistaa usean tasoisen valitsimen sisäkkäisyyden, esimerkiksi:

  1. .container {
  2.   .row {
  3.     .col {
  4.       width: 100%;
  5.     }
  6.   }
  7. }

Kiinteistöjen pesintä

SCSS:ssä valitsimien sisäkkäisyyden lisäksi on myös attribuuttien sisäkkäistoiminto, joka on toinen ominaisuus, joka tekee tyylitaulukoista selkeämpiä ja helpompia hallita. Kiinteistöjen sisäkkäisyyden ansiosta toisiinsa liittyvät ominaisuudet voidaan järjestää yhteen objektin muodon tapaan.

Perusattribuuttien sisäkkäisyys

Kiinteistöjen sisäkkäisyyttä voidaan käyttää vastaavien ominaisuuksien sijoittamiseen koodilohkoon, esimerkiksi:

  1. .navbar {
  2.   font: {
  3.     family: Arial, sans-serif;
  4.     size: 16px;
  5.     weight: bold;
  6.   }
  7.   margin: {
  8.     top: 10px;
  9.     bottom: 15px;
  10.   }
  11.   padding: {
  12.     left: 20px;
  13.     right: 20px;
  14.   }
  15. }

Yllä olevassa esimerkissä fontti-, marginaali- ja täytelohkot sisältävät toisiinsa liittyviä attribuutteja. Tämä organisaatio tekee kunkin lohkon ominaisuuksista selkeämpiä ja helpompia muokata ja ylläpitää.

Pesiytysnäkökohdat
  • Tuetut ominaisuudet: Kaikki CSS-ominaisuudet eivät tue sisäkkäisyyttä, yleensä ne, jotka voivat hyväksyä avainarvopareja, kuten fontin, marginaalin, täytön, reunuksen jne.
  • Luettavuus: Kun käytät attribuuttien sisäkkäisyyttä, varmista koodin luettavuus ja selkeys ja vältä liiallista sisäkkäisyyttä ja monimutkaisia ​​rakenteita.
  • Sisäkkäinen sisäkkäisyys: Voit myös sijoittaa muita kiinteistöjä sisäkkäisiin kiinteistöpesäkkeisiin, mikä voi edelleen järjestää ja jäsentää tyylejäsi.

periä

SCSS:ssä periytyminen (Extend) on erittäin hyödyllinen ominaisuus, jonka avulla yksi valitsin voi periä toisen valitsimen tyylisäännöt. Tämä ominaisuus vähentää päällekkäistä CSS-koodia ja tekee tyylitaulukoista modulaarisempia ja helpompia ylläpitää.

Peruskäyttö

Valitsin periytyminen voidaan saavuttaa @extend-avainsanalla. Esimerkiksi:

  1. %message-shared {
  2.   border: 1px solid #ccc;
  3.   padding: 10px;
  4.   color: #333;
  5. }
  6.  
  7. .success-message {
  8.   @extend %message-shared;
  9.   background-color: lightgreen;
  10. }
  11.  
  12. .error-message {
  13.   @extend %message-shared;
  14.   background-color: lightcoral;
  15. }

Yllä olevassa esimerkissä %message-shared on paikkamerkkivalitsin (Placeholder Selector), joka määrittää yleisen tyylijoukon. .success-message ja .error-message perivät %message-shared-tyylin ja lisäävät omat taustavärinsä.

Huomautuksia perinnöstä

  • Valitsinjärjestys: Periytys voi luoda pitkän luettelon valitsimia, mikä voi vaikuttaa tyylien prioriteettiin. Varmista, että valitsimien järjestys ja sijainti ovat oikein, kun käytät @extendia tarpeettomien prioriteettiongelmien välttämiseksi.
  • Rajoitus: Perittyjen valitsimien tulee näkyä perityn valitsimen jälkeen. Tämä tarkoittaa, että jos määrität valitsimen SCSS-tiedostoosi ja käytät @extend-komentoa sen tyylin perimiseksi myöhemmässä koodissa, tämä perintö tulee voimaan vasta sen määrittämisen jälkeen.
  • Paikkamerkkivalitsimet vs. luokkavalitsimet: %:lla alkavat paikkamerkkivalitsimet ovat yleensä parempia tavoitteita periytymiselle kuin suorat luokkavalitsijat, koska ne eivät tuota redundantteja valitsimia kääntämisen jälkeen. Luokkavalitsin luo päällekkäisiä tyylejä kaikkialla, missä sitä käytetään, mikä lisää tiedostokokoa ja monimutkaisuutta.

Sovellusskenaariot

Periytys sopii erityisen hyvin valitsimille, joilla on yhteisiä ominaisuuksia, kuten painikekomponentit, viestilaatikot jne. Perinnön avulla voit käyttää samoja tyylisääntöjä uudelleen eri skenaarioissa ja pitää koodisi puhtaana ja ylläpidettävänä.

Yhteenvetona voidaan todeta, että periytyminen SCSS:ssä on tehokas työkalu, jonka avulla voit välttää tyylien päällekkäisyyksiä ja ylläpitää koodin modulaarisuutta ja selkeyttä. Sitä käytettäessä on kuitenkin kiinnitettävä huomiota valitsimien järjestykseen ja sijaintiin sekä järkevään käyttämällä paikkamerkkiä sen vaikutuksen maksimoimiseksi.

Paikanpitäjä%

Paikkamerkki % on SCSS:n erityinen valitsin, jota käytetään usein määrittämään tyylisääntöjä, jotka voidaan periä, mutta jotka eivät tuota todellista CSS-tulostetta. Erityisesti:

määrittele paikkamerkki

  1. %placeholder-selector {
  2.   // 样式规则
  3. }

Yllä olevassa esimerkissä %placeholder-selector on paikkamerkkivalitsin, joka alkaa %:lla. Se määrittelee joukon tyylisääntöjä, mutta vastaava valitsimen nimi ei näy käännetyssä CSS:ssä.

perinnön paikkamerkki

  1. .some-class {
  2.   @extend %placeholder-selector;
  3.   // 可选的额外样式
  4. }

@extend-avainsanan avulla .some-class voi periä %placeholder-selectorin tyylin. Tämä tarkoittaa, että .some-class soveltaa kaikkia %placeholder-selctorissa määritettyjä tyylisääntöjä ja luo vastaavan CSS-tulosteen.

Edut ja soveltuvat skenaariot

  • Vähennä päällekkäisyyttä: Paikkamerkkivalitsimet mahdollistavat yhteisen tyylisääntöjen määrittämisen ja niiden uudelleenkäytön tarvittaessa periytymisen kautta välttäen koodin päällekkäisyyttä.
  • Modulaarisuus: Paikkamerkkivalitsimet lisäävät koodin modulaarisuutta ja ylläpidettävyyttä erityisesti suurissa projekteissa ja voivat parantaa tyylitaulukoiden rakenteellista selkeyttä.
  • Vältä redundanssia: Verrattuna luokkavalitsimien käyttöön, paikkamerkkivalitsimet eivät luo redundantteja valitsimia, mikä pienentää CSS-tiedostojen kokoa.

Varotoimenpiteet

  • Järjestys ja sijainti: Kun käytät @extendiä paikkamerkkivalitsimien perimiseen, peritty paikkamerkkivalitsin on määritettävä ennen sen valitsimen käyttöä, muuten voi ilmetä odottamattomia tyylihierarkiaongelmia.
  • Sekoitus: Voit yhdistää paikkamerkkivalitsimia tavallisiin luokkavalitsimiin, mutta sinun on käsiteltävä niitä huolellisesti välttääksesi odottamattoman CSS-tulostuksen.

Yhteenvetona voidaan todeta, että paikkamerkkivalitsin% on tehokas työkalu SCSS:ssä, joka voi auttaa kehittäjiä parantamaan tyylisivujen uudelleenkäytettävyyttä ja ylläpidettävyyttä ja vähentämään samalla tarpeetonta CSS-redundanssia.

Sekoita @mixin

Mixiinit ovat toinen erittäin tehokas ominaisuus SCSS:ssä, joka mahdollistaa tyylisääntöjen joukon kapseloinnin uudelleenkäytettävään koodilohkoon ja viitata niihin tarvittaessa. Toisin kuin paikkamerkkivalitsin %, mixinit voivat tuottaa suoraan CSS-tulosteen, joten se sopii tilanteisiin, joissa samaa tyyliä on käytettävä useissa paikoissa.

Määrittele sekoitus

  1. @mixin mixin-name($parameter1, $parameter2, ...) {
  2.   // 样式规则使用参数
  3. }

Yllä olevassa esimerkissä @mixin-avainsana määrittää mixinin nimeltä mixin-name, joka voi hyväksyä useita argumentteja (tarvittaessa) ja määrittää sen sisällä joukon tyylisääntöjä.

soita sekoitus

  1. .some-class {
  2.   @include mixin-name(value1, value2, ...);
  3.   // 可选的额外样式
  4. }

Käytä @include-avainsanaa kutsuaksesi mixin valitsimessa ja välittääksesi sille parametreja. Tällä tavalla .some-class soveltaa mixinissä määriteltyjä tyylisääntöjä ja siirtää välitetyt parametriarvot vastaaviin parametrimuuttujiin.

esimerkki

  1. @mixin button-style($background-color, $text-color) {
  2.   display: inline-block;
  3.   padding: 10px 20px;
  4.   border: none;
  5.   border-radius: 4px;
  6.   background-color: $background-color;
  7.   color: $text-color;
  8.   text-align: center;
  9.   text-decoration: none;
  10.   font-size: 16px;
  11.   cursor: pointer;
  12.   transition: background-color 0.3s ease;
  13.  
  14.   &:hover {
  15.     background-color: darken($background-color, 10%);
  16.   }
  17. }
  18. .button-primary {
  19.   @include button-style(#3498db, #fff);
  20. }
  21.  
  22. .button-secondary {
  23.   @include button-style(#2ecc71, #fff);
  24. }

 

Edut ja soveltuvat skenaariot

  • Joustavuus: Sekoitus mahdollistaa parametrien välittämisen ja eri tyylitulosteita voidaan generoida dynaamisesti tarpeen mukaan, mikä tekee tyylistä joustavamman ja muokattavamman.
  • Luettavuus: Yleisesti käytettyjen tyylisääntöjen kapselointi mixinissä voi parantaa koodisi luettavuutta ja ylläpidettävyyttä, varsinkin jos samaa tyyliä vaaditaan useissa paikoissa.
  • Uudelleenkäytettävyys: Sama sekoitus voidaan kutsua useita kertoja eri valitsimissa ja tiedostoissa, jotta vältetään toistuva tyylien määrittely ja vähennetään koodin määrää.

Varotoimenpiteet

  • Nimeämisristiriidat: Varmista, että mixinit eivät ole ristiriidassa olemassa olevien CSS-luokkien nimien tai muiden sekoitusten kanssa, jotta vältytään odottamattomilta tyylin ohituksilta tai virheiltä.
  • Parametrien välitys: Kun kutsut mixiniä, varmista, että parametrityypit ja välitetty järjestys ovat yhteensopivia mixin-määritelmän vaatimusten kanssa, jotta vältetään käännösvirheet tai odottamaton toiminta.
  • Vaikutus suorituskykyyn: Mixiinien laaja käyttö voi kasvattaa luotujen CSS-tiedostojen kokoa, joten ole varovainen suorituskyvyn vaikutuksen suhteen.

Yhteenvetona voidaan todeta, että mix @mixin on tehokas työkalu tyylisääntöjen kapseloimiseen ja uudelleenkäyttöön SCSS:ssä. Se voi parantaa merkittävästi CSS:n ylläpidettävyyttä ja joustavuutta ja sopii erilaisiin monimutkaisiin ja toistuviin tyylivaatimuksiin.

SCSS käyttää ehdollisia lausekkeita

SCSS:ssä ehdollisten lausekkeiden avulla CSS-tyylejä voidaan luoda dynaamisesti tiettyjen ehtojen perusteella. SCSS:n ehdolliset käskyt ovat samanlaisia ​​kuin muiden ohjelmointikielten ehdolliset käskyt, mukaan lukien @if, @else if ja @else.

@if-lause

@if-lause sallii tyylien luomisen ehdon perusteella. Syntaksi on seuraava:

  1. $use-rounded-corners: true;
  2.  
  3. .button {
  4.   @if $use-rounded-corners {
  5.     border-radius: 4px;
  6.   }
  7. }

Jos yllä olevassa esimerkissä muuttujan $use-rounded-corners arvo on tosi, luodaan .button-luokan tyyli, mukaan lukien border-radius: 4px;. Jos ehto on epätosi, tätä tyylin osaa ei luoda.

@else ja @else if -lauseet

@if:n lisäksi voit myös käyttää @else if ja @else lisätäksesi ehdollisia haaroja.

  1. $button-size: medium;
  2.  
  3. .button {
  4.   @if $button-size == small {
  5.     padding: 5px 10px;
  6.   } @else if $button-size == medium {
  7.     padding: 10px 25px;
  8.   } @else if $button-size == large {
  9.     padding: 15px 30px;
  10.   } @else {
  11.     padding: 10px 20px; // 默认值
  12.   }
  13. }

Tässä esimerkissä $button-size-muuttujan arvosta riippuen valitaan erilaisia ​​täytearvoja käytettäväksi .button-luokkaan. Jos vastaavaa ehtoa ei ole, @else-koodilohko suoritetaan.

Ehdollisten lauseiden sisäkkäisyys

Ehdolliset lauseet voidaan myös upottaa monimutkaisempaa logiikkaa varten.

  1. $button-style: flat;
  2. $button-size: medium;
  3.  
  4. .button {
  5.   @if $button-style == flat {
  6.     background-color: transparent;
  7.     color: #333;
  8.     border: 1px solid #333;
  9.  
  10.     @if $button-size == small {
  11.       padding: 5px 10px;
  12.     } @else if $button-size == medium {
  13.       padding: 10px 25px;
  14.     } @else if $button-size == large {
  15.       padding: 15px 30px;
  16.     } @else {
  17.       padding: 10px 20px; // 默认值
  18.     }
  19.   } @else if $button-style == raised {
  20.     background-color: #3498db;
  21.     color: #fff;
  22.     padding: 10px 20px;
  23.     border-radius: 4px;
  24.   } @else {
  25.     // 默认样式
  26.     background-color: #db6334;
  27.     color: #fff;
  28.     padding: 10px 20px;
  29.   }
  30. }

Tässä esimerkissä eri tyylejä on valittu käytettäväksi $button-style- ja $button-size arvojen perusteella. Tämä sisäkkäinen lähestymistapa mahdollistaa monimutkaisten tyylisääntöjen luomisen useisiin ehtoihin perustuen.

tiivistettynä

Ehdollisten lausekkeiden avulla voit saavuttaa joustavamman ja dynaamisemman tyylimäärittelyn SCSS:ssä ja luoda erilaisia ​​CSS-sääntöjä eri ehtojen perusteella, mikä parantaa tyylisivun ylläpidettävyyttä ja skaalautuvuutta.

Kolme tyyppistä silmukkaa SCSS:ssä

SCSS:ssä on kolme pääsilmukkarakennetta, joita voidaan käyttää toistuvien CSS-sääntöjen luomiseen: @for, @each ja @while.

@for silmukka

@for-silmukkaa käytetään toistuvasti luomaan tyylejä tiettyjen vaiheiden ja ehtojen mukaan.

perus kielioppi：

  1. @for $i from <start> through <end> {
  2.   // 循环体
  3. }
  • alkaen<start> kautta<end> : Määritä silmukan alku- ja loppuarvo (mukaan lukien loppuarvo).
  • $i-muuttujaa voidaan käyttää silmukan rungossa edustamaan nykyisen silmukan indeksiarvoa.

Esimerkki：

  1. @for $i from 1 through 3 {
  2.   .item-#{$i} {
  3.     width: 100px * $i;
  4.   }
  5. }

Yllä olevassa esimerkissä luodaan kolme luokkaa .item-1, .item-2 ja .item-3, joiden leveydet on asetettu vastaavasti 100 pikseliä, 200 pikseliä ja 300 kuvapistettä.

@jokainen silmukka

@each-silmukkaa käytetään luettelo- tai karttatyyppitietojen läpikulkuun ja tyylien luomiseen kullekin elementille.

perus kielioppi：

  1. @each $var in <list or map> {
  2.   // 循环体
  3. }
  • $var: edustaa nykyisen silmukan muuttujaa.
  • <list or map>: Voi olla luettelo (kuten $lista: nimike1, nimike2, kohde3;) tai kartta (avain-arvo-pari).

Esimerkki：

  1. $colors: (red, green, blue);
  2.  
  3. @each $color in $colors {
  4.   .text-#{$color} {
  5.     color: $color;
  6.   }
  7. }

 

Tässä esimerkissä luodaan kolme luokkaa .text-red, .text-green ja .text-blue, ja niiden tekstin värit on asetettu vastaaviin väriarvoihin.

@while silmukka

@while-silmukka luo toistuvasti tyylejä ehdon perusteella, kunnes ehto ei täyty.

perus kielioppi：

  1. $i: 1;
  2. @while $i < 4 {
  3.   // 循环体
  4.   $i: $i + 1; // 更新条件
  5. }
  • $i: silmukkalaskurina tai ehtomuuttujana.
  • Mikä tahansa SCSS-koodi voidaan suorittaa silmukan rungossa, ja ehtomuuttujat on yleensä päivitettävä silmukan rungon lopussa, jotta vältetään loputtomat silmukat.

Esimerkki：

  1. $i: 1;
  2. @while $i < 4 {
  3.   .item-#{$i} {
  4.     width: 100px * $i;
  5.   }
  6.   $i: $i + 1;
  7. }

Tämä koodi luo kolme luokkaa .item-1, .item-2 ja .item-3 ja asettaa niiden leveydeksi 100 pikseliä, 200 pikseliä ja 300 pikseliä.

Tee yhteenveto

Kolmea SCSS-silmukkarakennetta @for, @each ja @while käytetään silmukointiin indeksi-, lista- tai karttatyyppitiedon perusteella ja ehdollisiin silmukoihin perustuvien tyylien luomiseen. Nämä silmukkarakenteet tekevät SCSS:stä tehokkaamman ja joustavamman, pystyen luomaan monimutkaisia ​​CSS-sääntöjä tarpeiden mukaan.

Mukautetut toiminnot ja käyttö

SCSS:ssä tyylisivuja voidaan parantaa mukautetuilla funktioilla, jotka hyväksyvät parametrit ja palauttavat käsitellyt arvot.

Määritä mukautetut toiminnot

SCSS:ssä käytä @function-avainsanaa määrittääksesi funktioita, joilla voi olla parametreja ja palautusarvoja. Määritämme esimerkiksi funktion elementin laatikkomallin kokonaisleveyden laskemiseksi:

  1. @function total-width($padding, $border, $margin, $content-width) {
  2.   @return $padding + $border + $margin + $content-width;
  3. }

Yllä olevassa esimerkissä:

  • Total-width on funktion nimi.
  • Funktio hyväksyy neljä parametria: $täyte, $border, $margin, $content-width.
  • @return-lausetta käytetään lasketun arvon palauttamiseen.

Käytä mukautettuja toimintoja

Kun funktio on määritetty, sitä voidaan käyttää tyyleissä vaadittujen arvojen laskemiseen ja luomiseen. Esimerkiksi:

  1. .element {
  2.   width: total-width(10px, 1px, 5px, 100px);
  3. }

 

Tässä esimerkissä kokonaisleveysfunktiota kutsutaan parametreilla 10px, 1px, 5px ja 100px. Toiminnon palauttama tulos (116px) otetaan käyttöön .elementin leveysominaisuuteen.

Varotoimenpiteet

  • Funktiot voidaan sisällyttää mihin tahansa SCSS-tiedostoon, ja ne voidaan järjestää ja tuoda muiden tyylisääntöjen tapaan.
  • Kaikkia SCSS:n ominaisuuksia, kuten ohjauskäskyjä (kuten @if, @for, @each, @while) ja sisäänrakennettuja toimintoja, voidaan käyttää funktioissa.
  • Funktion parametrit voivat olla mitä tahansa SCSS-tietotyyppiä, mukaan lukien numerot, merkkijonot, värit jne.

Kotitehtävät

Käytä SCSS:ää vaihtaaksesi sivun mustavalkoista teemaa

html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <link rel="stylesheet" href="main.css">
  7.   <title>黑白色主题切换</title>
  8. </head>
  9. <body>
  10.   <div class="container">
  11.     <button id="theme-toggle">切换主题</button>
  12.     <div class="box">
  13.       <div class="content">
  14.         <p>这是一些文本内容。</p>
  15.         <p>这是一些文本内容。</p>
  16.         <p>这是一些文本内容。</p>
  17.         <p>这是一些文本内容。</p>
  18.         <p>这是一些文本内容。</p>
  19.         <p>这是一些文本内容。</p>
  20.         <p>这是一些文本内容。</p>
  21.       </div>
  22.     </div>
  23.   </div>
  24.  
  25.   <script src="main.js"></script>
  26. </body>
  27. </html>

scss

  1. // 定义轻主题的样式变量
  2. $light-theme: (
  3.   background-color: white,
  4.   text-color: black,
  5.   highlight-color: #f0f0f0
  6. );
  7.  
  8. // 定义暗主题的样式变量
  9. $dark-theme: (
  10.   background-color: black,
  11.   text-color: white,
  12.   highlight-color: #333333
  13. );
  14.  
  15. // 定义一个混合（mixin）来应用主题样式
  16. // 参数 $theme: 要应用的主题，是一个包含背景色、文本颜色和高亮颜色的映射（map）
  17. @mixin theme($theme) {
  18.   background-color: map-get($theme, background-color);
  19.   color: map-get($theme, text-color);
  20.  
  21.   // 为 .box 类应用主题的高亮颜色
  22.   .box {
  23.     background-color: map-get($theme, highlight-color);
  24.   }
  25. }
  26.  
  27. // 应用轻主题样式到 body 元素，并添加过渡效果
  28. body {
  29.   @include theme($light-theme);
  30.   transition: all 0.3s ease;
  31. }
  32.  
  33. // 为 body 的 dark 类应用暗主题样式
  34. body.dark {
  35.   @include theme($dark-theme);
  36. }
  37.  
  38. // 设置容器的文本居中和顶部间距
  39. .container {
  40.   text-align: center;
  41.   margin-top: 20px;
  42. }
  43.  
  44. // 配置主题切换按钮的样式
  45. #theme-toggle {
  46.   padding: 10px 20px;
  47.   cursor: pointer;
  48.   border: none;
  49.   outline: none;
  50.   background-color: #007bff;
  51.   color: white;
  52.   font-size: 16px;
  53.   border-radius: 5px;
  54. }
  55.  
  56. // 鼠标悬停在主题切换按钮上时改变背景色
  57. #theme-toggle:hover {
  58.   background-color: #0056b3;
  59. }
  60.  
  61. // 定义 .box 类的基本样式和过渡效果
  62. .box {
  63.   margin: 20px auto;
  64.   padding: 20px;
  65.   width: 50%;
  66.   border: 1px solid #ccc;
  67.   transition: all 0.3s ease;
  68.  
  69.   // 内容区域的样式配置
  70.   .content {
  71.     p {
  72.       margin: 10px 0;
  73.     }
  74.   }
  75. }

js

  1. /**
  2.  * 为主题切换按钮添加点击事件监听器
  3.  * 当按钮被点击时，切换文档主体的黑暗主题样式
  4.  * 
  5.  * 该函数通过toggle方法动态切换body元素的'dark'类，从而实现主题的切换。
  6.  * 如果body已经应用了'dark'类，那么点击按钮将移除这个类，反之亦然。
  7.  * 这种方式允许用户在黑暗主题和默认主题之间自由切换。
  8.  */
  9. document.getElementById('theme-toggle').addEventListener('click', () => {
  10.   document.body.classList.toggle('dark');
  11. });

Henkilökohtainen profiili

Hän on omistautunut teknologian tutkimukselle yli kolmenkymmenen vuoden ajan ja hallitsee useita kieliä, kuten java, linux, javascript, php, css jne., ja hän on tehnyt monia panoksia avoimen lähdekoodin alalla Kehittäjän dokumentaatioasema, jossa voit jakaa joitakin teknologian kehityksen ongelmia tulevaa käyttöä varten

yhteystietoni

Mail