SCSS: Sende Attribut und Wert zur Funktion

Hinweis:SCSS: Sende Attribut und Wert zur Funktion

Ich bin neu in Web-Entwicklung und objektorientierte Programmierung. Ich bin brandneu bei SCSS und habe noch kein solides Verständnis der Syntax verstanden. Ich habe ein grundlegendes Verständnis davon, wie man functions in SCSS benutzt.

Lassen Sie mich beginnen, indem Sie das Ergebnis definieren, das ich erreichen möchte.

Option 1:: Schreiben Sie eine Reihe von HTML-Code und ersetzen Sie den vorhandenen HTML-Tag konnte ich

_body.scss

body { 

    background-color: red; 

}

Jetzt weiß ich, wenn ich dieses Ergebnis in Javascript erhalten wollte.

Nicht um dies zu kodieren, wie dies eine chaotische Art ist, Javascript zu schreiben, aber im Wesentlichen mit der Methode document.write().

Option 2: Verwenden Sie den „setAttribute()“ Methode

// assuming <head> and <body> are the only tags within <html> 

var bodyTag = document.firstElementChild.lastElementChild; 

bodyTag.setAttribute("bgcolor", "red");

ich weiß, gibt es zusätzliche Möglichkeiten, dies in Javascript zu tun, aber für dieses Beispiel werde ich auf diese beiden konzentrieren.

Also ich möchte eine SCSS-Funktion erstellen, die sowohl das Attribut und den Wert zurückgeben kann.

_body.scss (Pseudocode-String Beispiel)

@function makeAttribute($attribute, $value) 

{ 

    @return $attribute + ":" + $value + ";"; 

} 

body { 

    makeAttribute(background-color, red); 

}

ich noch eine eingebaute Funktion zu finden, die über diese (ähnlich dem "setAttribute()" Methode in Javascript) oder die Zeichenfolge Beispiel Adressen .

Ich weiß, dass Funktionen nehmen können: Nummer, String, Bool, Farbe, Liste, Karte oder Null; aber was ich nicht weiß ist, ob ein Attribut in einen dieser Werttypen passt (zum Beispiel: string).

Ich fühle mich, als ob der Artikel: Bringing Configuration Objects To Sass kann erklären, was ich versuche zu tun, aber ich habe Schwierigkeiten, diesen Artikel zu verstehen (so kann es keine Erklärung für eine Lösung sein).

Mein Endziel ist es, eine Funktion zu erstellen, die die folgenden CSS schreiben würde. Ich habe die Browserunterstützung bisher nicht erwähnt, da sie eine weitere Komplexitätsebene hinzufügt, die leicht erklärt werden kann oder auch nicht.

body { 

    background-color: red; 

    -o-background-color: red; 

    -ms-background-color: red; 

    -moz-background-color: red; 

    -webkit-background-color: red; 

}

Quelle

2016-05-28 Josh Balsillie

Sie verwechseln CSS, Javascript und HTML - sie sind sehr unterschiedliche Sprachen, und "setAttribute" -Funktionen wären in CSS nicht sehr sinnvoll, da 'background: red;' _ im Wesentlichen setAttribute_ ist. Versuchen Sie nicht, Ihr CSS aus Javascript zu übersetzen oder umgekehrt - die Dinge werden schnell unübersichtlich werden. – somethinghere

Ja, ich habe nur Beispiele für Javascript und HTML angegeben. Ich habe in keiner Weise vorgeschlagen, Code aus einer Sprache zu nehmen und in einen anderen zu stecken. Ich versuche herauszufinden, ob SASS/SCSS entweder Methoden/Funktionen eingebaut hat oder wie man eine benutzerdefinierte Funktion schreiben kann, um die gewünschte Ausgabe zu erzeugen. –

Nun, hier ist ein guter Einstieg Artikel: http://thesassway.com/advanced/pure-sass-functions - und ich upvoted die Antwort unten, wie es auch die Prämisse erklärt. – somethinghere

ich weiß nicht, ob dies eine Funktion sein muss, fand ich es mehr Logik stattdessen eine mixin verwenden:

// Option 1 

@mixin makeRule($value: red, $property: background-color) { 
    #{$property}: $value; 
} 

// Option 2: 

@mixin makeRuleWithPrefixes($value: red, $property: background-color) { 
    #{-ms- + $property}: $value; 
    #{-o- + $property}: $value; 
    #{-moz- + $property}: $value; 
    #{-webkit- + $property}: $value; 
    #{$property}: $value; 
} 


///////// 

body { 
    @include makeRule; 
} 

article { 
    @include makeRule(black); 
} 

p { 
    @include makeRule(2px solid blue, border) 
} 


span { 
    @include makeRuleWithPrefixes; 
}

i den Namen geändert, weil es kein Recht sagen - makeAttribute, wenn Sie einen CSSRule (Selektor + Eigenschaftsname + Eigenschaftswert) zu schaffen, und das ist bis zu Ihnen;)

ok die ersten, you need interpolation to use a variable as a property name. Der Wert ist das erste Argument, so jetzt können Sie die Standardeigenschaft verwenden, und nur unterschiedliche Werte übergeben (wie der Artikel :))

oder Sie können nun alle Eigenschaften festgelegt Sie es wollen, nur passieren die Eigenschaft als der zweite Wert (wie p)

body { 
    background-color: red; 
} 

article { 
    background-color: black; 
} 

p { 
    border: 2px solid blue; 
} 

span { 
    -ms-background-color: red; 
    -o-background-color: red; 
    -moz-background-color: red; 
    -webkit-background-color: red; 
    background-color: red; 
}

ich die Möglichkeit, zwei gemacht, weil Sie es fragen, aber ich warne Sie, das ist kein guter Ansatz ist. Sie könnten ein Build-Tool (webpack, gulp, grunt .. was auch immer) verwenden, als ein autoprefixer-Paket zu verwenden, das dieses Präfix automatisch ausführt. Dies ist ein Problem, weil Sie @mixin eventuell aktualisieren müssen.

Quelle

2016-05-30 08:09:32

Genau das habe ich gesucht. Ich hatte die # {} Syntax noch nicht entdeckt. Dokumentation: http://sass-lang.com/documentation/file.ASSASS_REFERENCE.html#interpolation_ Dank Héctor León. –

froh, dir zu helfen, weiter zu codieren;) –

SCSS: Sende Attribut und Wert zur Funktion

Antwort

Verwandte Themen