Hvordan hekke regler og egenskaper i sass?

Sass-forkortelse for syntaktisk kjempebra stilark er en pre-prosessor og utvidelse av CSS som fungerer bra med alle versjonene av CSS. Det er kjent for sin rene og godt strukturerte syntaks som som et resultat forbedrer evnen til det grunnleggende språket. SASS letter brukerne sine ved å støtte bruken av variabler, hekking, mixins, arv osv. Emnet som diskuteres i denne artikkelen hekker i Sass. Her vil vi demonstrere hvordan du kan hekke regler og egenskaper i Sass.

Hvordan hekke regler i sass

Hekking blir sett på som prosedyren for å kombinere forskjellige regler. SASS lar brukerne sine hekke regler, og forhindrer å skrive ytre velger om og om igjen, og dermed gjøre koden klar og mer lesbar enn grunnleggende CSS.

Eksempel
Eksemplet demonstrert nedenfor viser hvordan hekking i sass gjøres.

Html

• Hjem
>

• Tjenester


• Om oss


• Kontakt oss

I koden ovenfor lager vi en sidefelt ved å lage en DIV -beholder og hekke en uordnet liste inne i den. Videre har vi også gitt koblingen til CSS -filen generert etter å ha samlet SASS -filen vår til HREF -attributtet til taggen.

Sass

div
FLOAT: Venstre;
Bredde: 25%;
Bakgrunnsfarge: Rosybrown;
polstring: 25px 15px;
ul
List-stil-type: Ingen;
Margin: 0;
polstring: 0;

li
polstring: 8px;
Margin-Bottom: 15px;
Bakgrunnsfarge: Plum;
Farge: Hvit;

Nå vil du legge merke til at i SASS -filen styler vi først vår Div Container og deretter hekker våre velgere UL, og Li inne i DIV -velgeren. Imidlertid vil den samme koden ovenfor i standard CSS se ut som dette.

CSS

div
FLOAT: Venstre;
Bredde: 25%;
Bakgrunnsfarge: Rosybrown;
polstring: 25px 15px;

div ul
List-stil-type: Ingen;
Margin: 0;
polstring: 0;

div li
polstring: 8px;
Margin-Bottom: 15px;
Bakgrunnsfarge: Plum;
Farge: Hvit;

I koden ovenfor vil du se at vi må bruke DIV -velgeren med alle andre velger for å style våre forskjellige elementer. I CSS kan du ikke hekke velger/regler i hverandre, snarere må du definere dem en etter en.

Dette er fordelen som Sass har over CSS at det forhindrer brukerne i å gjenta overflødige utvalgere, noe som gjør koden klar og mer lesbar. Utgangen fra eksemplet ovenfor er vist nedenfor.

Produksjon

En sidefelt ble generert og stylet ved hjelp av hekkende i Sass.

Hvordan du hekker egenskaper i sass

En annen fordel med Sass er at det også tillater hekking av egenskaper. Du må ha lagt merke til at prefikset til forskjellige CSS-egenskaper er det samme som, fontstørrelse, font-family, fontvekt osv. Prefiksfonten er den samme i disse egenskapene.

Nå for å unngå å bruke dette prefikset igjen og igjen i stilarket ditt, kan du hekke disse egenskapene i Sass. Du må lure på hvordan du gjør det. Kontakt eksemplet nedenfor.

Eksempel
Dette eksemplet viser hvordan du hekker egenskaper i sass.

Html

Dette er noe avsnitt.

I koden ovenfor har vi ganske enkelt opprettet et avsnitt.

Sass

kropp
bakgrunn:

Farge: rosa;
vedlegg: fast;


P
font:

Familie: Verdana;
Størrelse: 20px;
Vekt: Fet;

Nå vil du legge merke til i ovennevnte kode at når vi styler elementene våre med forskjellige CSS -egenskaper, skrev vi prefikset en gang og deretter nestet egenskapene relatert til det prefikset inne i velgeren. På denne måten unngikk vi å skrive det samme prefikset om og om igjen.

CSS

Dette er den transpilerte CSS -utgangen.

Produksjon

Elementer ble vellykket stylet ved hjelp av hekking i sass.

Konklusjon

For å hekke regler i Sass må du bare skrive den ytre velgeren en gang og hekke resten av velgerne inni den. I mellomtiden lar hekkegenskaper i Sass deg skrive prefikset til egenskaper en gang og hekke de relaterte egenskapene inni den. Hekkelegler og egenskaper i Sass forhindrer deg i å skrive overflødige CSS -verdier gjentatte ganger og dermed gjøre koden din klar og mer lesbar. Denne artikkelen guider deg om hvordan du hekker regler og egenskaper i Sass.