3.6 KiB

Raw Blame History

id	title	challengeType	forumTopicId	dashedName
587d7dbd367417b2b2512bb6	Creare CSS riutilizzabile con i mixin	0	301455	create-reusable-css-with-mixins

--description--

In Sass, un mixin è un gruppo di dichiarazioni CSS che possono essere riutilizzate in tutto il foglio di stile.

Ci vuole tempo prima che le nuove funzionalità di CSS siano completamente adottate e utilizzabili in tutti i browser. Poiché le funzionalità vengono inizialmente aggiunte ai singoli browser, le regole CSS che le utilizzano potrebbero avere bisogno di prefissi del fornitore. Considera box-shadow:

div {
  -webkit-box-shadow: 0px 0px 4px #fff;
  -moz-box-shadow: 0px 0px 4px #fff;
  -ms-box-shadow: 0px 0px 4px #fff;
  box-shadow: 0px 0px 4px #fff;
}

Ci sarebbe molto da digitare per riscrivere questa regola per tutti gli elementi che hanno una box-shadow, o per modificare ogni valore per testare effetti differenti. I mixin sono come funzioni per il CSS. Ecco come scriverne uno:

@mixin box-shadow($x, $y, $blur, $c){ 
  -webkit-box-shadow: $x $y $blur $c;
  -moz-box-shadow: $x $y $blur $c;
  -ms-box-shadow: $x $y $blur $c;
  box-shadow: $x $y $blur $c;
}

La definizione inizia con @mixin seguito da un nome personalizzato. I parametri ( $x, $y, $blure $c nell'esempio sopra) sono opzionali. Ora ogni volta che è necessaria una regola box-shadow, invece di dover digitare tutti i prefissi dei venditori dovremo scrivere una singola linea che chiama il mixin. Un mixin è chiamato con la direttiva @include:

div {
  @include box-shadow(0px, 0px, 4px, #fff);
}

--instructions--

Scrivi un mixin per border-radius e dagli un parametro $radius. Dovrebbe usare tutti i prefissi del fornitore dell'esempio. Quindi usa il mixin border-radius per dare all'elemento #awesome un raggio di curvatura di 15px.

--hints--

Il tuo codice dovrebbe dichiarare un mixin chiamato border-radius che ha un parametro denominato $radius.

assert(code.match(/@mixin\s+?border-radius\s*?\(\s*?\$radius\s*?\)\s*?{/gi));

Il tuo codice dovrebbe includere il prefisso del fornitore -webkit-border-radius che utilizza il parametro $radius.

assert(
  __helpers.removeWhiteSpace(code).match(/-webkit-border-radius:\$radius;/gi)
);

Il tuo codice dovrebbe includere il prefisso del fornitore -moz-border-radius che utilizza il parametro $radius.

assert(
  __helpers.removeWhiteSpace(code).match(/-moz-border-radius:\$radius;/gi)
);

Il tuo codice dovrebbe includere il prefisso del fornitore -ms-border-radius che utilizza il parametro $radius.

assert(__helpers.removeWhiteSpace(code).match(/-ms-border-radius:\$radius;/gi));

Il tuo codice dovrebbe includere la regola generale border-radius che utilizza il parametro $radius.

assert(
  __helpers.removeWhiteSpace(code).match(/border-radius:\$radius;/gi).length ==
    4
);

Il tuo codice dovrebbe chiamare il border-radius mixin usando la parola chiave @include, con un raggio di 15px.

assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\)\s*;/gi));

--seed--

--seed-contents--

<style type='text/scss'>



  #awesome {
    width: 150px;
    height: 150px;
    background-color: green;

  }
</style>

<div id="awesome"></div>

--solutions--

<style type='text/scss'>
  @mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    border-radius: $radius;
  }

  #awesome {
    width: 150px;
    height: 150px;
    background-color: green;
    @include border-radius(15px);
  }
</style>

<div id="awesome"></div>

3.6 KiB Raw Blame History