Comment assigner une valeur de variable CSS à scss Variable ou Expression

J'essaye de construire ma propre petite grille évolutive en CSS/scss. Jusqu'à présent, je trouve cette décision:Comment assigner une valeur de variable CSS à scss Variable ou Expression

: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); 
}

Alors j'ai essayé d'utiliser SCSS pour raccourcir les colonnes des classes description (qui en même temps me permettra de changer le nombre de colonnes dans un seul endroit dans le code tout - en CSS Variable --columns) comme ceci

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

mais cela n'a pas fonctionné. Le détail intéressant est que lorsque je change @for déclaration de @for $n from 1 throughvar(--columns) `` à @for $n from 1 through12 il compile bien. Et il n'y a aucun problème dans la compilation CSS-Variable à l'intérieur du corps @for. .col-#{$n} {width: calc(#{$n}/var(--columns) - var(--gutter) * 2); } compile bien dans les séries de classes nécessaires.

Si j'utilise la variable scss $columns au lieu de la variable CSS, j'aurai besoin d'importer mon fichier grid.scss dans tous les autres fichiers scss du projet.

C'est ma première question sur StackOverflow, alors laissez-moi savoir si d'autres détails sont nécessaires.

Source

2017-07-16 Andrii.Gaidai

double possible de [ Comment forcer un nombre entier en variable CSS?] (Https://stackoverflow.com/questions/44524527/how-to-force-integer-in-css-variable) –

Saurabh Gour, en fait, oui. La question que vous avez posée couvre mon problème. Mais je ne l'aurais jamais trouvé sous son en-tête actuel "Comment forcer un entier dans une variable CSS". –

J'ai presque pressé le bouton 'Cela a résolu mon problème! ', Mais j'ai lu le message expliquant. Il est dit que: «Ceci marquera votre question comme un doublon, dirigeant les futurs lecteurs vers la question originale et empêchant que d'autres réponses soient postées ici.» Cela ne me dérange pas de marquer ma question comme une copie en général. Mais dans ce cas concret, je crois que 'Comment forcer un nombre entier en CSS Variable?' N'est pas le point et non le sujet principal. Ma question restera-t-elle visible ou sera-t-elle cachée? Comment se fera la redirection? –

variables CSS et SCSS sont deux choses très différentes (s'il vous plaît voir this pen)

Pour le faire fonctionner, vous avez besoin d'une variable statique pour SCSS compiler

// 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); } 

}

Source

2017-07-16 11:45:46

Jacob E, merci beaucoup. Votre solution a fonctionné pour moi. De plus, j'ai vu votre stylo et cela m'a donné plus de compréhension. –

Vous devez utiliser l'interpolation (par exemple # {$ var}) sur votre variable pour que Sass la traite comme une propriété CSS. Sans cela, vous effectuez simplement l'affectation de variables.

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

Source

2017-07-16 08:43:05

Comment assigner une valeur de variable CSS à scss Variable ou Expression

Répondre

Questions connexes