Sass @mixin ja @include

Sass Mixin

@mixin ohje antaa sinulle mahdollisuuden luoda CSS-koodia, jota voidaan käyttää toistuvasti koko verkkosivustolla.

luoda @include ohjeen tarkoitus on antaa sinulle mahdollisuus käyttää (sitoutua) mixinia.

määrittää Mixin

Mixin on @mixin ohjeiden määrittämä.

Sass @mixin-grammatiikka:

@mixin nimi {
  ominaisuus: arvo;
  ominaisuus: arvo;
  ...
}

Esimerkki mixinin luomisesta nimellä "tärkeä-teksti":

SCSS-grammatiikka:

@mixin tärkeä-teksti {
  väri: punainen;
  fontti-koko: 25px;
  fontti-paino: bold;
  raja: 1px tiukka sininen;
}

Vinkki:

Vinkki Sassissa yhdistelmistä ja alaviivoista: Yhdistelmät ja alaviivat katsotaan samaksi.

tämä tarkoittaa @mixin tärkeä-text { } ja @mixin tärkeä_text { } katsotaan samaksi mixiniksi!

Mixinin käyttö

@include Ohjeet käytetään mixinin viittaamiseen.

Sass @include mixin syntaksi:

valitsin {
  @include mixin-nimi;
}

Joten, jos haluat sisällyttää yllä luodun tärkeä-teksti-mixinin:

SCSS-grammatiikka:

.vaara {
  @include tärkeä-teksti;
  taustaväri: vihreä;
}

Sass-kääntäjä muuntaa edellä olevan koodin tavalliseksi CSS:ksi:

CSS-ulostulo:

.vaara {
  väri: punainen;
  fontti-koko: 25px;
  fontti-paino: bold;
  raja: 1px tiukka sininen;
  taustaväri: vihreä;
}

Mixin voi sisältää myös muita mixin-ohjelmia:

SCSS-grammatiikka:

@mixin erityinen-teksti {
  @include tärkeä-teksti;
  @include linkki;
  @include erityinen-reuna;
}

Muuttujien siirtäminen mixinille

Mixinit hyväksyvät parametreja. Tällä tavalla voit siirtää muuttujia mixinille.

Seuraavassa on esimerkki parametrisoitetun mixinin määrittämisestä:

SCSS-grammatiikka:

/* Määritellään mixin, jolla on kaksi parametria */
@mixin reunus suojattu($color, $width) {
  raja: $width tiukka $color;
}
.myArticle {
  @include reunus suojattu(sininen, 1px);  // Kutsutaan mixinia kahdella arvolla
}
.myNotes {
  @include reunus suojattu(punainen, 2px); // Kutsutaan mixinia kahdella arvolla
}

Huomaa, että parametrit on asetettu muuttujiksi ja käytetty reunan ominaisuuden (väri ja leveys) arvona.

Käännettyyn CSS:ään tulee seuraavasti:

CSS-ulostulo:

.myArticle {
  raja: 1px tiukka sininen;
}
.myNotes {
  raja: 2px tiukka punainen;
}

Mixinin oletusarvot

Myös mixin muuttujille voidaan määrittää oletusarvot:

SCSS-grammatiikka:

@mixin reunusuojattu($color: sininen, $width: 1px) {
  raja: $width tiukka $color;
}

Sitten, sinun tarvitsee vain määritellä muuttujat, jotka haluat muuttaa mixinin käyttöä aikana:

SCSS-grammatiikka:

.myTips {
  @include bordered($color: orange);
}

Mixinin käyttö tarjoajan etuliitteinä

Mixinin toinen hyvä käyttötapa on (selaimen) tarjoajan etuliitteet.

Tämä on esimerkki muunnoksesta:

SCSS-grammatiikka:

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.myBox {
  @include transform(rotate(20deg));
}

Käännöksen jälkeen CSS näyttää tältä:

CSS-grammatiikka:

.myBox {
  -webkit-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  transform: rotate(20deg);
}