Sass parent selector

Sass parent selector

Folosesc Sass la aproape orice proiect de vreo patru-cinci ani – poate mai mult. Îmi place flexibilitatea dată de mixins, de funcții, placeholders etc. De exemplu, pentru a introduce o regulă @media folosesc un mixin inspirat din bootstrap (parcă) ce-mi permite să scriu mult mai puțin cod și, mai important, îmi reduce locurile în care breakpoints sunt definite:

.header {
	color:#000;
	@include respondTo(md_up) {
		color:red;
	}
}

(cu toate astea, am început să prefer variabilele CSS)

Eh, faza e că Sass mai are niște funcționalități ce pot părea utile dar pot cauza și ceva probleme. Una dintre aceste capcane o reprezintă selectorul părinte &. Pe scurt, poți face ceva de genul:

.header {
  &-identity {}
  &-nav {
    &-item {}
}

Și va compila în .header-identity {}, respectiv header-nav-item {}. Ceea ce e mișto, reduce duplicarea numelor, îți permite refolosirea unei componente etc.

Doar că… reduci drastic posibilitățile de… căutare. De exemplu, ar reduce foarte mult posibilitatea de a căuta după numele unei clase și tot timpul va trebui să depui un efort mental suplimentar pentru a procesa ce-unde se află. Mai ales dacă vorbim despre un cod legacy, ce nu l-ai scris tu.

Prin urmare, eu am decis că folosesc selectorul & doar în situații foarte, foarte limitate, unde totul este atât de clar încât nu prezintă nici un fel de sursă de confuzie. &:before sau &:first-child fiind niște candidați foarte buni.


Sursa mixin-ului respondTo:

@mixin respondTo( $media ) {

	$screen-xs : 480px !default;
	$screen-sm : 768px !default;
	$screen-md : 992px !default;
	$screen-lg : 1300px !default;


	// usual stuff to match resolution intervals
  @if $media == xs {
    @media all and ( max-width: #{$screen-xs - 1} ) { @content; }
  }

  @else if $media == sm {
    @media all and ( min-width: $screen-xs ) and ( max-width:#{$screen-md - 1} ) { @content; }
  }

  @else if $media == md {
    @media all and ( min-width: $screen-md ) and ( max-width:#{$screen-lg - 1} ) { @content; }
  }

  @else if $media == lg {
    @media all and ( min-width: $screen-lg ) { @content; }
  }



  // special rules to match only max/min values
  @else if $media == upto_sm {
    @media all and ( max-width: #{$screen-sm - 1} ) { @content; }
  }

  @else if $media == upto_md {
    @media all and ( max-width: #{$screen-md - 1} ) { @content; }
  }

  @else if $media == upto_lg {
    @media all and ( max-width:#{$screen-lg - 1} ) { @content; }
  }



  @else if $media == xs_up {
    @media all and ( min-width: $screen-xs ) { @content; }
  }

  @else if $media == sm_up {
    @media all and ( min-width: $screen-sm ) { @content; }
  }

  @else if $media == md_up {
    @media all and ( min-width: $screen-md ) { @content; }
  }
}

Adaugă un comentariurăspuns pentru

Link-urile în context sunt binevenite. Comentariile fără nume/email valid sunt șterse.
PS: Comentariul NU este editabil.

Site-ul blog.iamntz.com utilizează cookie-uri. Continuarea navigării presupune acceptarea lor. Mai multe informații.

windows apple dropbox facebook twitter