Vue führt weltweit SCSS (Mixin) ein

// Farbdefinitionsspezifikation $color-background: #FFFFFF;

$color-background-d: rgba (0, 0, 0, 0,3);

$Farbhighlight-Hintergrund: #333;

$color-dialog-background: #666;

$Farbthema: #ffcd32;

$color-theme-d: rgba (255, 205, 49, 0,5);

$Farbunterthema: #d93f30;

$color-text-d: rgba(255, 255, 255, 0,3);

$color-text-l: rgba (255, 255, 255, 0,5);

$color-text-ll: rgba(255, 255, 255, 0,8);



$font-gray: #999;

//Spezifikation der Schriftdefinition $font-size-small-s : 10px;

$Schriftgröße-klein: 12px;

$Schriftgröße-medium: 14px;

$Schriftgröße-medium-x: 16px;

$Schriftgröße-groß: 18px;

$Schriftgröße-groß-x: 22px;



$Schriftstärke: 600;
Textkörper,html{

  //Hintergrund: rgb(239, 242, 249);

}

//Hintergrundbild 100%

@mixin bkgMaxSize($url) {

 

  Hintergrundbild: URL ($URL);

  Hintergrundwiederholung: keine Wiederholung;

  Hintergrundgröße: 100 % 100 %;

}

@mixin Schrifteinstellungsgruppe($Schriftgröße,$Schriftfamilie,$Schriftstärke,$Farbe,$Zeilenhöhe){


  Schriftgröße: $font-size;

  Schriftfamilie: $font-family;

  Schriftstärke: $font-weight;

  Farbe: $farbe;

  Zeilenhöhe: $Zeilenhöhe;

}

//Randradius @mixin borderRadius($radius) {

 

  -webkit-border-radius: $radius;

  -moz-border-radius: $radius;

  -ms-border-radius: $radius;

  -o-border-radius: $radius;

  Rahmenradius: $radius;

}

//Positionierung oben, unten, links und rechts in der Mitte @mixin positionCenter {

   Position: absolut;

  oben: 50 %;

  links: 50%;

  transformieren: übersetzen(-50 %, -50 %);

}

// Positionierung oben und unten in der Mitte @mixin ct {

  Position: absolut;

  oben: 50 %;

  transformieren: verschiebeY(-50%);

}

// Position links und rechts mittig @mixin cl {

  Position: absolut;

  links: 50%;

  transformieren: übersetzenX(-50%);

}

// Positionierung Vollbild @mixin allcover {
 Position: absolut;

  oben: 0;

  rechts: 0;

}

//Relative Positionierung @mixin my-absolute($left, $top,$z) {


  Position: absolut;

  z-Index: $z;

  Rand links: $links;

  Rand oben: $top;

}

//Unterschiedliche Breite und Höhe @mixin widthHeightN($width, $height){


  Breite: $Breite;

  Höhe: $höhe;

}

//Breite und Höhe - gleich @mixin widthHeightY($number){

 

  Breite: $Zahl;

  Höhe: $Zahl;

}

//Schriftgröße, Farbe @mixin sizeColor($size, $color){

 

  Schriftgröße: $size;

  Farbe: $farbe;

}

//flexibles Layout @mixin center_none{

 

  Anzeige: Flex;

  Inhalt ausrichten: zentriert;

  Elemente ausrichten: zentrieren;

}

@mixin Zentrum_Zentrum{

  Anzeige: Flex;

  Inhalt ausrichten: zentriert;

  Elemente ausrichten: zentrieren;

}

@mixin flex-start_center{

  Anzeige: Flex;

  Inhalt ausrichten: Flex-Start;

  Elemente ausrichten: zentrieren;

}

@mixin Raum-zwischen_Mitte{

  Anzeige: Flex;

  Inhalt ausrichten: Abstand dazwischen;

  Elemente ausrichten: zentrieren;

}

@mixin Raum-um-Mitte{

 

  Anzeige: Flex;

  Inhalt ausrichten: Abstand herum;

  Elemente ausrichten: zentrieren;

}

@mixin flex-end_center{

  Anzeige: Flex;

  Inhalt ausrichten: Flex-Ende;

  Elemente ausrichten: zentrieren;

}
@mixin wrap_flex-start{

 

  Anzeige: Flex;

  flex-wrap:wrap;

  Inhalt ausrichten: Flex-Start;

}

@mixin flex-start_column{

  Anzeige: Flex;

  Inhalt ausrichten: Flex-Start;

  Flex-Richtung: Spalte;

}

@mixin keine_Mittelspalte{

 

  Anzeige: Flex;

  Elemente ausrichten: zentrieren;

  Flex-Richtung: Spalte;

}

@mixin Mitte_Mitte_Spalte{

  Anzeige: Flex;

  Elemente ausrichten: zentrieren;

  Inhalt ausrichten: Flex-Start;

  Flex-Richtung: Spalte;

}

npm installiere Sass-Ressourcen-Loader

modul.exporte = {

  outputDir: 'mbb',/*Ausgabeverzeichnis*/

  publicPath: '/',/*Zugriffspräfix*/

  lintOnSave: false, // Eslint-Erkennung deaktivieren chainWebpack: config => {

    const oneOfsMap = config.module.rule('scss').oneOfs.store

    oneOfsMap.fürJeden(Element => {

      Artikel

          .use('sass-resources-loader')

          .loader('sass-resources-loader')

          .Optionen({

            // Pfad zur Datei mit Ressourcen angeben

            // Der Pfad der SCSS-Ressourcen, die gemeinsam genutzt werden sollen: „src/assets/stylus/mixin.scss“

          })

          .Ende()

    })

  }

}