Neu Struggling mit SCSS und CSS und Kompilieren

[atanke]

Moinsen,
ich habe in meinem Shop nun ein Child-Theme und den JTL-Theme-Editor. So weit, so gut.

Wenn ich nun die Farben im Admin unter Darstellung => Einstellungen => Templates und dann meinem Childtheme ändere, dachte ich, dass damit dann die Werte für $primary, ... neu gesetzt werden.
Das klappt auch eine Weile so ganz gut.
Aber nachdem ich dann mehrfach Änderungen im JTL-Theme-Editor (_variables.scss und ats-aquashop.scss) machte, diese speicherte und kompiliert und anschließend das Theme kompiliert, habe ich auf einmal wieder dieses Standard-Orange als Hover-Farbe drin und einige weitere Farben haben sich auch verändert.
Im Admin sind die Farben aber weiterhin eingetragen.

Darüber hinaus klappt es überhaupt noch nicht eine eigene google-Schriftart einzubinden.
_variables.scss

//
// Platz für eigene Variablen in SCSS-Notation
//
// Alle Änderungen hier müssen anschließend mit einem SCSS-Compiler
// (z.B. dem JTL-Theme-Editor Plugin) nach ats-aquashopa.css kompiliert werden
// --------------------------------------------------

// ats-aquashop Theme
// Hier können alle Variablen notiert werden, die nur Auswirkungen auf dieses Theme haben
// -------------------Beginn eigene Variablen----------------------------------

// Lädt Theme-Variablen, hier aus dem "clear"
// @import '../../../../NOVA/themes/blackline/sass/variables';
@import '../../../../NOVA/themes/clear/sass/variables';
// @import '../../../../NOVA/themes/midnight/sass/variables';

// passt die Pfade an
$nova-theme-path:                   "../../../NOVA/themes";
$fa-font-path:                      "../../../NOVA/themes/base/fontawesome/webfonts";

// font
$ats-font-path:                      "../base/fonts" !default;
$font-family-sans-serif:            'Alegreya Sans', sans-serif !default;
$font-accent:                       'Alegreya Sans', sans-serif !default;


// colors
$blue-light:                        #f2f8ff !default;
$blue-dark:                         #6693c1 !default;
$blue-medium:                       #a4c2e3 !default;

und die ats-aquashop.scss

//
// Platz für eigene Style Angaben in SCSS-Notation
//
// Alle Änderungen hier müssen anschließend mit einem SCSS-Compiler
// (z.B. dem JTL-Theme-Editor Plugin) nach ats-aquashop.css kompiliert werden
// --------------------------------------------------

// Lädt Core-Funktionen
@import '../../../../NOVA/themes/base/sass/functions';

// Lädt "ats-aquashop"-Variablen. Hier können Variablen aus Bootstrap und dem NOVA-Theme überschrieben werden.
@import "variables";

// Lädt Style Angaben des Themes, hier "clear".
@import '../../../../NOVA/themes/clear/sass/allstyles';
// Für die anderen Themes müssen neben der "allstyles" des Themes auch die jeweiligen Regeln aus der "theme.scss"
// (z.B. für blackline aus der blackline.scss) übernommen werden.
// @import '../../../../NOVA/themes/blackline/sass/allstyles';
// @import '../../../../NOVA/themes/midnight/sass/allstyles';


// ats-aquashop Theme
// Hier können alle Style-Angaben notiert werden, die nur Auswirkungen auf dieses Theme haben
// ------------------- Beginn eigenes CSS ----------------------------

@font-face{
    font-family: 'Alegreya Sans';
    src: url($ats-font-path + '/base/fonts/Alegreya_Sans/AlegreyaSans-Regular.ttf');
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    
}

@include font-face('Alegreya Sans', $ats-font-path + '/base/fonts/Alegreya_Sans/AlegreyaSans-Thin', 'AlegreyaSans-Thin' 'AlegreyaSans-Thin', normal, 100, '', ttf);
@include font-face('Alegreya Sans', $ats-font-path + '/base/fonts/Alegreya_Sans/AlegreyaSans-Light', 'AlegreyaSans-Light' 'AlegreyaSans-Light', normal, 300, '', ttf);
//@include font-face('Alegreya Sans', $ats-font-path + '/base/fonts/Alegreya_Sans/AlegreyaSans-Regular', 'AlegreyaSans-Regular' 'AlegreyaSans-Regular', normal, 400, '', ttf);
@include font-face('Alegreya Sans', $ats-font-path + '/base/fonts/Alegreya_Sans/AlegreyaSans-Medium', 'AlegreyaSans-Medium' 'AlegreyaSans-Medium', normal, 500, '', ttf);
@include font-face('Alegreya Sans', $ats-font-path + '/base/fonts/Alegreya_Sans/AlegreyaSans-Bold', 'AlegreyaSans-Bold' 'AlegreyaSans-Bold', normal, 700, '', ttf);
@include font-face('Alegreya Sans', $ats-font-path + '/base/fonts/Alegreya_Sans/AlegreyaSans-ExtraBold', 'AlegreyaSans-ExtraBold' 'AlegreyaSans-ExtraBold', normal, 800, '', ttf);
@include font-face('Alegreya Sans', $ats-font-path + '/base/fonts/Alegreya_Sans/AlegreyaSans-Black', 'AlegreyaSans-Black' 'AlegreyaSans-Black', normal, 900, '', ttf);



body * {
    font-family:$font-family-sans-serif;
}

#main-wrapper {
    background: $blue-light;
}

header {
    background-color: $blue-medium;
    color: $blue-light;
}
header a:not(.dropdown-item):not(.btn) {
    color: $blue-light;
}
#header-top-bar {
    background-color: $blue-light;
    color: $blue-dark;
}
#header-top-bar a:not(.dropdown-item):not(.btn) {
    color: $blue-dark;
}

header #mainNavigation {
    font-size: 2em;
    font-weight: bold;
}

header #mainNavigation .container.subcategory-wrapper span{
    font-size: 1.4em;
    font-weight: bold;
}


header .search-wrapper .form-control {
    color: $blue-dark;
    border-color: $white;
    background: $white;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
header .search-wrapper button.btn {
    border-top-right-radius: 10px!important;
    border-bottom-right-radius: 10px!important;
}

input::placeholder {
  color: $blue-medium!important;
  opacity: 1;
}

.beschreibung_gekapselt{
    display: grid;
    grid-template-columns: 35% 65%;
    grid-auto-flow: column;
    grid-column-gap: 2rem;
}

div.productbox-inner div.productbox-title a{    
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 1.7;
}
div.productbox-inner:hover div.productbox-title a,    
div.productbox-inner:hover div.price_wrapper{    
    color: $blue-medium;
}
div.productbox-inner div.productbox-title a, 
div.productbox-inner div.price_wrapper {    
    padding: 0 10px;
    color: $blue-dark;
}

div.product-attributes table td.h6 {
    width: 30%;    
}

.product-info-inner .product-title{
    color: $blue-dark;
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.5;
}

.price_wrapper .price{
    color: $blue-dark;
    font-size: 2rem;
    font-weight: bolder;
    line-height: 1.7;
}
.nav-tabs .nav-item a.active, .nav-tabs .nav-item a, .hr-sect,
.product-wrapper-product, .product-wrapper-product a {
    color: $blue-dark;
}
.product-wrapper-product, .product-wrapper-product a {
    font-weight: bold;
}
.product-wrapper-product .price_wrapper .price{
    font-size: 1.2rem;
}


.cart-dropdown-shipping-notice {
    color: inherit;
}
.cart-dropdown .cart-dropdown-total-item {
  color: inherit;
}
.cart-dropdown-shipping-notice .text-dark {
    color: inherit !important;
}


.opc-ProductStream-box-slider .card {
    background-color: transparent;
    border: none;
}
.opc-ProductStream-box-slider .card .product-wrapper-product a{
    padding: 0 10px;
    color: $blue-light;
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 1.7;
}
.opc-ProductStream-box-slider .card .product-wrapper-product .price_wrapper .price {
    color: $blue-light;
    font-size: 2rem;
    font-weight: bolder;
    line-height: 1.7;
}


@media (min-width: 768px) {

#footer .container .row .col:only-child {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}


#footer .container .row .col:only-child ul.nav {
    display: flex;
    flex-direction: row !important;
    justify-content: space-between;
}
#footer .container .row .col:only-child ul.nav li{
}

}



@media (max-width: 600px) {
.beschreibung_gekapselt{
    grid-template-columns: 100%;
    grid-auto-flow: row;
    grid-column-gap: 0;
}
    
}

@media (min-width: 768px) {
    .productbox.productbox-hover .productbox-inner::before {
        background-color: $blue-light;
    }
}

@media (min-width: 992px) {
    header .navbar-nav>.nav-item.active>.nav-link::before {
        border-color: $white;
    }
}

Kann mir jemand von Euch da ein paar Tipps geben? Bzgl. SCSS und SASS bin ich Anfänger. Ich hatte bisher nur mit CSS gearbeitet.

Danke und LG

Andreas

 

[css-umsetzung]

Deine Variablen werden zu spät definiert, bzw. hat dann das default da nichts zu suchen
https://thoughtbot.com/blog/sass-default

wenn du eigene Schriften verwendest, dann solltest du auch die header.tpl bearbeiten, damit diese vorgeladen werden, sonst hast du da nette Effekte wenn dein sass endlich passt.

 

[atanke]

Deine Variablen werden zu spät definiert,

hmm, aber ich habe doch nur diese Möglichkeiten?!
Ich habe nun nochmal alle Anpassungen aus meinem Child-Theme rausgenommen, sowohl die Dateien als auch das Theme neu kompiliert und es fehlen immer noch die Einstellungen aus dem Template aus dem Admin

statt den Blautönen habe ich weiß und orange...

bzw. hat dann das default da nichts zu suchen

hmm, ich hatte mich am mitgelieferten "Midnight" orientiert, da funktioniert es ja

wenn du eigene Schriften verwendest, dann solltest du auch die header.tpl bearbeiten, damit diese vorgeladen werden, sonst hast du da nette Effekte wenn dein sass endlich passt.

ich denke die Dateien aus meinem Theme werde dort automatisch eingeladen?


Was ist eigentlich der Unterschied zwischen "Datei kompilieren" und "Theme kompilieren" und wann verwende ich welches der beiden?

LG Andreas

 

[css-umsetzung]

Mit Theme compilen bist du immer auf der sicheren Seite, das beinhaltet dann eben die normale und die critical, wenn du etwas in der variables änderst, musst du das theme compilen, ansonsten könntest du auch nur die Datei compilen.

Ich bevorzuge es, Änderungen nur an den sass Dateien durchzuführen, du solltest nicht zweigleisig fahren, entweder du machst deine Änderungen in den Sass Dateien oder du machst alles in der Template Einstellung, dann lässt du die Finger vom Themeeditor.