Überschreiben von Variablen in SASS

Thema wurde von andyhaiger, 3. Mai 2016 erstellt.

  1. andyhaiger

    andyhaiger Aktives Mitglied

    Registriert seit:
    31. März 2016
    Beiträge:
    35
    Danke erhalten:
    4
    Danke vergeben:
    9
    Hallo,

    wie kann man die Variablen "$brand-primary" global überschreiben, wenn einem im Honeygrid nur angeboten wird, seine Änderungen nach allen anderen einzufügen:

    // Add your own SCSS by creating a _usermod.scss file in this directory.
    // It will be executed at the end of all standard SCSS code so you can overwrite any style.


    So wie ich das in SASS verstehe, ist es nicht möglich nachträglich eine Variable zu überschreiben, wenn diese nach dem gesamten Code kommt, außer ich definiere alle Elemente neu, in welchen diese Variable steht. Ich komme aus der LESS-Ecke und kenne das nur so, dass auch am Ende definierte Variablen den gesamten Code überschreiben und beim Kompilieren der letzte definierte Variablen-Wert verwendet wird. In SASS ist das anders.


    Beispiel LESS:
    Code:
    @color: blue;
    .foo {
    color: @color;
    }
    @color: white;
    // foo color is white
    Beispiel SASS:
    Code:
    $color: blue;
    .foo {
    color: $color;
    }
    $color: white;
    // foo color is blue
    
    
    
    $color: blue;
    .foo {
    color: $color;
    }
    $color: white;
    .foo {
    color: $color;
    }
    // foo color is white
    
    
    
     
  2. Moritz (Gambio)

    Moritz (Gambio) Administrator

    Registriert seit:
    26. April 2011
    Beiträge:
    5.786
    Danke erhalten:
    2.692
    Danke vergeben:
    903
    Hallo,

    updatesicher können Variablen tatsächlich nicht mittels SCSS-Datei überschrieben werden. Die Variable kann aktuell nur im StyleEdit 3 angepasst werden. Wenn es darum geht ein eigenes Template zu entwickeln, das nicht mehr Honeygrid heißt, stellt sich die Frage, inwiefern Updatesicherheit in diesem Bereich überhaupt noch gegeben sein kann und muss.
     
  3. andyhaiger

    andyhaiger Aktives Mitglied

    Registriert seit:
    31. März 2016
    Beiträge:
    35
    Danke erhalten:
    4
    Danke vergeben:
    9
    #3 andyhaiger, 3. Mai 2016
    Zuletzt bearbeitet: 3. Mai 2016
    Heißt für mich als Entwickler, dass ich letztlich doch auf den StyleEdit angewiesen bin, wenn ich die (Bootstrap und Gambio) Variablen weiterhin nutzen möchte um beispielsweise im einfachsten Fall nur mal $brand-primary global von blau zu rot zu ändern... ... oder mal die Schriftgrößen aller Schriften von h1-h6 neu definieren möchte... und wenn ich den StyleEdit geöffnet habe, habe ich Probleme beim Kompilieren, bis ich diesen wieder geschlossen habe...

    Möchte ich dann beim Kunden mein lokal entwickeltes Theme aufspielen, habe ich erneut die Klickerei durch den StyleEdit 3 bzw. muss dort den Style auch noch hochladen, welchen ich mir zuvor zusammengeklickt habe... ?


    EDIT: Kann ich nicht auch irgendwie meine Änderungen der Variablen dem StyleEdit auf Code-Basis beibringen? Ich sehe ja, dass dieser in die _bootstrap_variables.scss schreibt oder in die _template_variables.scss. Ich selbst kann dort jedoch keine Änderungen machen... und später im StyleEdit haben, speichern und beim Live-System des Kunden aufspielen?
     
  4. Moritz (Gambio)

    Moritz (Gambio) Administrator

    Registriert seit:
    26. April 2011
    Beiträge:
    5.786
    Danke erhalten:
    2.692
    Danke vergeben:
    903
    Wenn man als Entwickler ein Template bauen möchte, dass StyleEdit-kompatibel ist, ist man darauf angewiesen selbst mit StyleEdit(-Dateien) zu arbeiten.

    Angenommen das Template heißt nicht Honeygrid, sondern Dupp und soll für den Kunden StyleEdit-kompatibel sein, so muss im StyleEdit im Ordner templates ebenfalls ein Dupp-Ordner sein, der die gleichen Dateien enthalten sollte, wie im Honeygrid. Sofern im StyleEdit im Browser noch kein eigener Style angelegt wurde, werden die Variablen aus der ersten Vorlage style_1.json geladen. In der Datei kann man dann z. B. für brand-primary rot statt blau als Standard setzen.

    Falls das Template nicht eigenständig ist, sondern weiterhin das Honeygrid genutzt wird, ist es tatsächlich sinnvoll den lokal erstellen Style beim Kunden hochzuladen. Dafür gibt es die Download- und Uploadfunktion im StyleEdit.
     
  5. andyhaiger

    andyhaiger Aktives Mitglied

    Registriert seit:
    31. März 2016
    Beiträge:
    35
    Danke erhalten:
    4
    Danke vergeben:
    9
    okay, das klingt doch ganz gut, Werte direkt in einer style_1.json zu tätigen.

    Habe jetzt mein Theme umbenannt... führt mich aber zur nächsten Frage... wie kompiliere ich nun? gulp honeygrid:watch watched ja nur das honeygrid
     
  6. andyhaiger

    andyhaiger Aktives Mitglied

    Registriert seit:
    31. März 2016
    Beiträge:
    35
    Danke erhalten:
    4
    Danke vergeben:
    9
    Habe vom Support die Antwort bekommen, dass man vorerst nur das Honeygrid kompilieren kann. Das ist aber nicht weiter schlimm.

    Man kann ja für den StyleEdit eine eigene Vorlage erstellen und dann die Variablen in der json-Datei bearbeiten. Beim Speichern einer SCSS-Datei und Reload der Seite wird dann der neue Wert übernommen.

    Damit löst sich das SCSS-Problem des Variablen-Überschreibens ;) läuft!