So weisen Sie CSS-Variablenwert zu scss-Variable oder Ausdruck zu

Ich versuche, mein eigenes kleines skalierbares Raster in CSS/scss zu bauen. Bisher fand ich diese Entscheidung:So weisen Sie CSS-Variablenwert zu scss-Variable oder Ausdruck zu

:root { 
    --page-width: 1170px; 
    --gutter: 15px; 
    --columns: 12; 
} 

.wrapper { 
    max-width: var(--page-width); 
    margin-right: auto; 
    margin-left: auto; 
    padding-left: var(--gutter); 
    padding-right: var(--gutter); 
} 

.row { 
    margin-left: calc(-1 * var(--gutter)); 
    margin-right: calc(-1 * var(--gutter)); 
} 

.col { 
    display: block; 
    margin-left: var(--gutter); 
    margin-right: var(--gutter); 
}

Dann habe ich versucht SCSS zu verwenden, um Spalten Klassen Beschreibung (die mir Anzahl der Spalten in einem einzigen Ort in ganzem Code ändern kann zur gleichen Zeit zu verkürzen - in CSS Variable --columns) wie diese

@for $n from 1 through var(--columns) { 
    .col-#{$n} {width: calc(#{$n}/var(--columns) - var(--gutter) * 2); } 
}

aber es hat nicht funktioniert. Das interessantes Detail ist, dass, wenn ich @for Aussage von @for $n from 1 throughvar(--columns) `` zu @for $n from 1 through12 es kompiliert und ändern. Und es gibt kein Problem beim Kompilieren der CSS-Variable innerhalb @for Körper. .col-#{$n} {width: calc(#{$n}/var(--columns) - var(--gutter) * 2); } fügt sich gut in die benötigten Klassen ein.

Wenn ich scss-Variable $columns anstelle von CSS-Variable verwenden, dann muss ich meine Grid.scss-Datei in alle anderen scss-Dateien des Projekts importieren.

Es ist meine erste Frage zu StackOverflow, also lassen Sie mich wissen, wenn weitere Details benötigt werden.

Quelle

2017-07-16 Andrii.Gaidai

Mögliche Duplikat [kompilieren Wie erzwinge Integer in CSS Variable?] (Https://stackoverflow.com/questions/44524527/how-to-force-integer-in-css-variable) –

Saurabh Gour, eigentlich ja. Die von Ihnen vorgeschlagene Frage deckt mein Problem ab. Aber ich würde es niemals unter dem aktuellen Header "How to Force Integer in CSS Variable" finden. –

Ich habe fast gedrückt "Das hat mein Problem gelöst!" -Taste, aber dann lese ich die erklärende Nachricht. Es besagt, dass dies Ihre Frage als ein Duplikat markiert, zukünftige Leser auf die ursprüngliche Frage verweist und verhindert, dass weitere Antworten hier gepostet werden. Es macht mir nichts aus, meine Frage als ein Duplikat im Allgemeinen zu markieren. Aber in diesem konkreten Fall glaube ich, dass 'Wie man Integer in CSS Variable erzwingt?' Ist nicht der Punkt und nicht das Hauptthema. Bleibt meine Frage sichtbar oder wird sie versteckt? Wie erfolgt die Umleitung? –

CSS und SCSS Variablen sind zwei sehr verschiedene Dinge (siehe this pen)

Um es eine statische Variable zu machen arbeiten müssen für SCSS

// static (SCSS) variables used produce CSS output 
$page-width: 1170px; 
$gutter : 15px 
$columns: 12; 

// dynamic (CSS) variables used at run-time 
:root { 
    --page-width: $page-width; 
    --gutter : $gutter; 
    --columns: $columns; 
} 

// the for loop is aimed at producing CSS output 
// ... why you need the static variable 
@for $n from 1 through $columns { 

    // the content becomes CSS output 
    // ... why you can use dynamic variables 
    .col-#{$n} {width: calc(#{$n}/var(--columns) - var(--gutter) * 2); } 

}

Quelle

2017-07-16 11:45:46

Jacob E, vielen Dank. Deine Lösung hat für mich funktioniert. Außerdem habe ich deinen Stift angesehen und es hat mir mehr Verständnis gegeben. –

Sie müssen die Interpolation (zB # {$ var}) für Ihre Variable verwenden, damit Sass sie als CSS-Eigenschaft behandelt. Ohne es tun Sie nur variable Zuweisung.

@mixin w_fluid($property_name, $w_element, $w_parent:16) { #{$property_name}: percentage(($w_element/$w_parent)); }

Quelle

2017-07-16 08:43:05

So weisen Sie CSS-Variablenwert zu scss-Variable oder Ausdruck zu

Antwort

Verwandte Themen