Variables Sass et gradient

Hy everyone! Je souhaite utiliser des variables Sass avec un projet Vaadin 7.1.0 pour un arrière-plan à gradient linéaire, mais pour une raison quelconque, cela ne fonctionne pas. Le code:Variables Sass et gradient

$topBarDarkBlue: #5F7FB7; 
$topBarLightBlue: #8EABE1; 

.title { 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $topBarDarkBlue), 
    color-stop(100%, $topBarLightBlue)); 
    background-image: -moz-linear-gradient(bottom, $topBarLightBlue 0%, $topBarDarkBlue 100%); 
    width: 100%; 
    height: 70px; 
}

Il semble être correct, mais pourquoi cela ne fonctionne pas?

Source

2013-07-05 Slenkra

Vous utilisez les propriétés de propriété, vous devez utiliser une propriété générale trop afinde pour rendre votre travail de gradient –

Qu'est-ce que « ne fonctionne pas »? Il y a une erreur (quelle est l'erreur?)? La sortie générée est fausse (qu'est-ce qui ne va pas?)? – cimmanon

Il ne montre aucune erreur, ne fait pas le dégradé. – Slenkra

Si vous copiez le code dans JSFiddle, le dégradé fonctionne. Il est également possible de mettre les variables dans la classe css:

.title { 
    $topBarDarkBlue: #5F7FB7; 
    $topBarLightBlue: #8EABE1; 

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $topBarDarkBlue), 
    color-stop(100%, $topBarLightBlue)); 
    background-image: -moz-linear-gradient(bottom, $topBarLightBlue 0%, $topBarDarkBlue 100%); 
    width: 100%; 
    height: 70px; 
}

Source

2013-07-05 08:16:54 Mathijs

La raison principale est d'utiliser ces couleurs dans tout le fichier css, car je les utilise dans de nombreux endroits du code. – Slenkra

Il semble que le compilateur SCSS dans Vaadin 7.1 n'est pas en mesure de remplacer correctement les variables que vous devez utiliser des valeurs de couleur au lieu des variables. Changer

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $topBarDarkBlue)

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5F7FB7)

etc ...

Source

2013-07-05 15:11:30

C'est triste. Je veux les utiliser dans beaucoup d'endroits dans le code, et si je veux changer d'entre eux, je dois écrire chacun d'entre eux. – Slenkra

Vous pouvez créer un billet sur le problème à http: //dev.vaadin. com/newticket –

Je le ferai, j'espère que les développeurs vaadin peuvent résoudre ce problème. :) – Slenkra

Vous pouvez en effet mettre les variables SASS entre parenthèses, comme la syntaxe du sélecteur de dégradé. Tout ce que vous avez à faire est de joindre votre variable avec une marque de hachage et des parenthèses puis précède, comme suit:

#{$myVar}

Ca y est!

Source

2014-06-25 17:47:57 PWM

Regardé vers le haut, cela s'appelle Interpolation http://sass-lang.com/documentation/file.SASS_REFERENCE.html#interpolation_ Merci @PWM –

La meilleure façon d'utiliser globalement les dégradés dans .sass/.scss est de les utiliser via des mixins.

vous pouvez créer un mixins de dégradé:

$topBarDarkBlue: #5F7FB7; 
$topBarLightBlue: #8EABE1; 

@mixin bg-gradient(){ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $topBarDarkBlue); 
background: -moz-gradient(linear, left top, left bottom, color-stop(0%, $topBarDarkBlue); 
background: -ms-gradient(linear, left top, left bottom, color-stop(0%, $topBarDarkBlue); 
}

Maintenant, il vous suffit de l'appeler dans votre principale .sass/fichier .scss. Je l'ai déjà fait dans un de mes projets récents, mais il n'était pas basé sur Vaadin. Vérifiez simplement cela fonctionne avec vaadin ou pas. Vérifiez la syntaxe une fois du code scss comme je suis un gars Sass.

espère que cela vous aidera

Source

2016-05-11 06:37:21 TheLiquidCharcoal

Variables Sass et gradient

Répondre

Questions connexes