Pamamana sa SASS

Ipinaliliwanag ng artikulong ito ang pamamana sa SASS.

Ipapaliwanag namin ang pamamana sa SASS gamit ang mga praktikal na halimbawa.

YouTube Video

Pamamana sa SASS

Ang pamamana sa SASS (@extend) ay isang mekanismo na nagbibigay-daan sa iyo na ilapat ang mga estilo ng isang selector sa iba pa nang walang pag-uulit. Dahil ang parehong mga estilo ay 'pinagsasama' at inilalapat sa maraming elemento sa markup, mas kakaunti ang dobleng CSS; ngunit kung hindi tama ang paggamit, maaari itong magdulot ng hindi inaasahang pagsasanib ng mga selector.

Pangunahing Kaalaman: Paano gamitin ang @extend

Narito ang isang pangunahing halimbawa kung saan minamana ng .btn--primary ang mga estilo ng .btn. Ang @extend ay direktiba para palawigin ang target na selector.

 1// Base button styles
 2.btn {
 3  padding: 0.5rem 1rem;
 4  border-radius: 4px;
 5  border: 1px solid #ccc;
 6  background: white;
 7  color: #333;
 8}
 9
10/* Primary button extends the base .btn */
11.btn--primary {
12  @extend .btn;
13  background: #007bff;
14  color: white;
15}

• Sa pamamagitan ng paggamit ng @extend, namamana ng .btn--primary ang base na mga estilo ng .btn at pinapalitan lamang ang kailangang bahagi.

Nabuong CSS

 1.btn, .btn--primary {
 2  padding: 0.5rem 1rem;
 3  border-radius: 4px;
 4  border: 1px solid #ccc;
 5  background: white;
 6  color: #333;
 7}
 8
 9.btn--primary {
10  background: #007bff;
11  color: white;
12}

Pinakamabisang Gawain: Paggamit ng Placeholders (%placeholder)

Ang mga placeholder selector (%name) ay mga selector na hindi inilalabas sa CSS. Malawak silang ginagamit lalo na kung nais mong ligtas na magbahagi ng mga karaniwang estilo para lamang sa inheritance sa iba't ibang mga component.

 1// %placeholder will not be output directly
 2%card-base {
 3  padding: 1rem;
 4  border-radius: 6px;
 5  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
 6  background: #fff;
 7}
 8
 9/* Components extend the placeholder */
10.card {
11  @extend %card-base;
12  border: 1px solid #eee;
13}
14
15.panel {
16  @extend %card-base;
17  border: 1px solid #ddd;
18}

• Parehong namamana ng .card at .panel mula sa %card-base, kaya nagkakaroon sila ng magkatulad na estilo habang maaaring magdagdag ng kaibahan kung kinakailangan.

Nabuong CSS

 1.card, .panel {
 2  padding: 1rem;
 3  border-radius: 6px;
 4  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
 5  background: #fff;
 6}
 7
 8.card {
 9  border: 1px solid #eee;
10}
11
12.panel {
13  border: 1px solid #ddd;
14}

Maramihang Pamamana (Maramihang @extend)

Maaari kang magmana ng maraming placeholder o klase ng sabay-sabay. Bagaman tumataas ang reusability ng istilo, mahalagang subaybayan kung aling mga tuntunin ang pinagsama sa aling mga selector.

 1%btn-base {
 2  display: inline-block;
 3  padding: 0.5rem 1rem;
 4  border-radius: 3px;
 5}
 6
 7%btn-large {
 8  padding: 0.75rem 1.5rem;
 9  font-size: 1.125rem;
10}
11
12/* Composite button that extends both placeholders */
13.btn--lg {
14  @extend %btn-base;
15  @extend %btn-large;
16  background: #222;
17  color: #fff;
18}

• Ito ay halimbawa kung saan ang isang button ay namamana ng dalawang placeholder: isa para sa 'base' at isa para sa 'laki'.
• Namamana ng .btn--lg pareho ang %btn-base at %btn-large, kaya pinagsasama ang basic layout at mas malaking sukat.

Nabuong CSS

1.btn--lg {
2  display: inline-block;
3  /* %btn-large overrides the padding from %btn-base */
4  padding: 0.75rem 1.5rem;
5  border-radius: 3px;
6  font-size: 1.125rem;
7  background: #222;
8  color: #fff;
9}

Pag-uugali ng @extend (Paraan ng Pagsasanib) at Pag-iingat sa 'Selector Explosion'

Ang @extend ay nagpapalabas ng lahat ng tumutugmang selector na pinagsama-sama, kung kaya't minsan ay nagkakaroon ng hindi inaasahang pagsasanib.

Ipinapakita ng sumusunod na halimbawa kung paano dumarami ang output kapag ang parehong base class ay namamana sa iba't ibang lugar.

 1/* Many components extend .utility */
 2/* A generic utility class */
 3.utility {
 4  margin-bottom: 1rem;
 5}
 6
 7/* Nested selectors that extend .utility */
 8.header {
 9  @extend .utility;
10  .title {
11    font-weight: bold;
12  }
13}
14
15.footer {
16  @extend .utility;
17  .note {
18    color: #888;
19  }
20}
21
22.article {
23  @extend .utility;
24  .content {
25    line-height: 1.6;
26  }
27}
28
29.sidebar {
30  @extend .utility;
31  .section {
32    padding: 1rem;
33  }
34}

• Kapag maraming component ang namamana ng .utility, pinagsasama ang mga selector sa isa, at sa malalaking proyekto, pwedeng lumobo ang CSS.

Nabuong CSS

 1.utility,
 2.header,
 3.footer,
 4.article,
 5.sidebar {
 6  margin-bottom: 1rem;
 7}
 8
 9.header .title {
10  font-weight: bold;
11}
12
13.footer .note {
14  color: #888;
15}
16
17.article .content {
18  line-height: 1.6;
19}
20
21.sidebar .section {
22  padding: 1rem;
23}

@extend at .class kumpara sa Element Selector (Tags) — Prayoridad at Side Effects

Maaaring gamitin ang @extend hindi lang sa mga klase kundi pati din sa mga element selector. Gayunpaman, ang pag-extend ng mga elemento ay nagpapalawak ng saklaw na apektado, na nagdudulot ng panganib na maipataw ang mga tuntunin sa mga hindi inaasahang lugar.

Narito ang isang halimbawa ng pag-extend sa element selector at ang maaaring epekto nito.

 1/* Extending an element selector (not recommended) */
 2h1 {
 3  font-size: 2rem;
 4  margin-bottom: 0.5rem;
 5}
 6
 7/* If you extend h1, the resulting selector will include your class with h1 */
 8.title {
 9  @extend h1;
10  color: #333;
11}
12
13/* Output becomes:
14h1, .title { font-size: 2rem; margin-bottom: 0.5rem; }
15*/

• Sa halimbawang ito, ang pagmana ng element selector na h1 ay nagiging dahilan upang ang .title ay magsanib sa parehong estilo tulad ng h1.
• Maaring mukhang maginhawa ito sa maliliit na proyekto, ngunit habang lumalaki ang iyong proyekto, posibleng magkasama ang mga tuntunin ng h1 at .title nang hindi inaasahan, na nagpapakomplika ng mga estilo at nagpapababa ng maintainability. Samakatuwid, mas madaling mapanatili ang mga estilo kung idinisenyo ang mga ito gamit ang mga klase at placeholder.

Nabuong CSS

1h1,
2.title {
3  font-size: 2rem;
4  margin-bottom: 0.5rem;
5}
6
7.title {
8  color: #333;
9}

Mga Pagkakataong Gamitin ang @extend at !optional

Kung gagamitin ang !optional kasabay ng @extend, maaari mong pigilan ang error kapag hindi umiiral ang target ng inheritance. Ito ay partikular na kapaki-pakinabang sa code na parang library, o sa mga sitwasyong ang mga placeholder ay tinutukoy lang kapag kinakailangan.

Narito ang isang halimbawa ng ligtas na pag-try magmana ng klase na maaaring wala gamit ang !optional.

1/* Try to extend a class that might not exist */
2.component {
3  @extend .maybe-existing !optional;
4  padding: 1rem;
5}

• Kung hindi umiiral ang .maybe-existing, walang mangyayari at lalaktawan ito. Maaari itong gamitin kung gusto mong subukan ang extension nang ligtas.

Nabuong CSS

1.component {
2  padding: 1rem;
3}

Paghahambing ng @extend at Mixins (@mixin / @include)

Minsan, parehong layunin ang @extend at @mixin, ngunit magkaiba ang kanilang output at gamit.

• @extend

  • Ang nabuong CSS ay binabawasan ang pag-uulit sa pamamagitan ng pagsasanib ng mga selector.
  • Dahil pinagsasama ang mga selector pagkatapos buuin, maaaring maganap ang hindi inaasahang mga kombinasyon.
  • Hindi pwedeng magpasa ng parameter (pero pwede ito masolusyunan gamit ang pinagsamang mga placeholder).

• @mixin / @include

  • Bawat paggamit ay nagdudulot ng pag-uulit ng mga estilo (nagiging sanhi ng redundant na output).
  • Pwedeng magpasa ng mga parameter at maglagay ng lohika tulad ng conditionals o loops.
  • Mas mahuhulaan ang output, ngunit lumalaki ang laki ng file.

Narito ang paghahambing ng paggamit ng parehong @mixin at @extend para magpatupad ng katulad na button style.

 1/* Mixin approach */
 2@mixin btn-styles($bg, $color) {
 3  display: inline-block;
 4  padding: 0.5rem 1rem;
 5  background: $bg;
 6  color: $color;
 7  border-radius: 4px;
 8}
 9
10/* Use mixin */
11.btn {
12  @include btn-styles(white, #333);
13}
14
15.btn--primary {
16  @include btn-styles(#007bff, white);
17}
18
19/* Extend approach (shared placeholder) */
20%btn-base {
21  display: inline-block;
22  padding: 0.5rem 1rem;
23  border-radius: 4px;
24}
25
26.btn2 {
27  @extend %btn-base;
28  background: white;
29  color: #333;
30}
31
32.btn2--primary {
33  @extend %btn-base;
34  background: #007bff;
35  color: white;
36}

• Pinapayagan ka ng @mixin na flexible mong idagdag ang mga style, habang pinagsasama-sama naman ng @extend ang output nang efficient, kaya maaari mong gamitin ang alinman base sa pangangailangan.

Nabuong CSS

Output mula sa @mixin

 1.btn {
 2  display: inline-block;
 3  padding: 0.5rem 1rem;
 4  background: white;
 5  color: #333;
 6  border-radius: 4px;
 7}
 8
 9.btn--primary {
10  display: inline-block;
11  padding: 0.5rem 1rem;
12  background: #007bff;
13  color: white;
14  border-radius: 4px;
15}

Output mula sa @extend

 1.btn2,
 2.btn2--primary {
 3  display: inline-block;
 4  padding: 0.5rem 1rem;
 5  border-radius: 4px;
 6}
 7
 8.btn2 {
 9  background: white;
10  color: #333;
11}
12
13.btn2--primary {
14  background: #007bff;
15  color: white;
16}

Praktikal na Gabay

Ang inheritance sa SASS ay isang makapangyarihang tampok upang mapataas ang reusability ng mga istilo. Gayunman, kapag mali ang paggamit maaari itong gawing komplikado ang pagsasanib ng style at mabawasan ang kadalian ng maintenance. Narito ang ilang mahalagang puntos para sa ligtas at mabisang paggamit ng inheritance.

• Gamitin ang mga placeholder para sa mga karaniwang istilo ng component tulad ng structure at layout. Dagdag pa rito, kung kinakailangan ng dynamic na parameterization, maaari kang gumamit ng @mixin.
• Dapat iwasan ang direktang pag-inherit ng mga HTML element tulad ng h1. Maaring maganap ang mga hindi sinasadyang pagsasama-sama ng mga selector, na posibleng magresulta sa hindi inaasahang CSS.
• Ang paggamit ng naming conventions gaya ng BEM o malinaw na prefix ay makatutulong para maging ligtas at madaling maintindihan kung para saan ang bawat placeholder.
• Mas ligtas gamitin ang @extend sa loob ng parehong file. Lalo na sa malalaking proyekto, mainam na idisenyo ang inheritance sa loob lamang ng saklaw ng bawat component upang mas madaling subaybayan ang mga relasyon ng inheritance.

Buod

Ang tampok na @extend sa SASS ay isang maginhawang pamamaraan upang magamit muli ang mga karaniwang istilo at tiyakin ang consistency ng disenyo. Gayunpaman, dahil madaling maging kumplikado ang mga kombinasyon ng selector, kinakailangang gamitin ang tampok na ito nang maingat at sa limitadong saklaw. Sa pamamagitan ng pagsasama-sama ng mga shared style gamit ang placeholder selector (%placeholder) at paggamit ng @mixin para sa mga bahagi na nangangailangan ng dynamic na parameter, mapananatili mong simple at madaling i-maintain ang disenyo.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video