Comment utiliser SASS et SCSS sur un serveur distant
Pour faire une histoire courte, j'ai toujours voulu utiliser SCSS et SASS pour mes projets web. J'ai acheté et installé Compass, super sympathique comme application. Mais j'ai souvent à travailler sur des projets distants. Je voulais donc pouvoir utiliser SCSS sans avoir à télécharger le CSS généré à chaque modification.
J'ai trouvé un moyen de travaillé sur un serveur distant, sur un SCSS, enregistrer mes modifications et que je puisse ensuite, tout de suite, rafraîchir ma page et que cette dernière marche avec le CSS généré.
Voici:
Télécharger PHamlP
L'installer sur votre serveur distant où vous aller avoir votre CSS.
Vous créer un fichier .scss et travailler dessus.
Vous créer un fichier .php avec ceci à l'intérieur:
<?php
header("Content-Type: text/css");
require_once('sass/SassParser.php'); //including Sass libary (Syntactically Awesome Stylesheets)
$sass = new SassParser(array('style'=>'compressed'));
$css = $sass->toCss('style.scss');
echo $css;
?>
Changer le style.scss par le nom de votre fichier .scss.
Dans votre projet vous mettez dans le header:
<link rel="stylesheet" href="/includes/css/style.php">Vous pourrez ainsi travailler, sauvegarder et ainsi avoir toujours vos dernières modifications dans le projet.
Merci bien pour cet exemple, il faut donc réécrire toutes les fonctions ?^^
ou bien on peut en @importer issu du répertoire PHamlP ?
Cdt
Dans mon exemple, j'ai écrit la fonction en haut du Css pour ensuite faire @import pour avoir rapidement mon gradient. Donc tu écris une fois ta fonction, ensuite tu n'as qu'a passé tes variables ou couleurs et tu peux le réutiliser rapidement.
Mais existe-t-il une autre façon ? Sûrement. Peut-être faut-il un update de phamip pour avoir une fonction plus complet du gradient avec un meilleur support. La documentation de ce dernier n'étant pas très élagoré. En fouillant dedans j'ai vu plein de fichier pour du gradient et colorstop, mais j'avoue ne pas trop savoir comment les utiliser. Pour ma part, j'utilise souvent phamip que pour les variables de couleur et grosseur de fonts, juste pour simplifier mon css, mais pas plus. Si tu trouves autre chose n'hésite pas à nous en faire part.
Merci bien en fait en créant une fonction et en la mettant dans le scss, cela fonctionne.
Le bémol est donc qu'il faut créer ces fonctions alors qu'il en existe déjà tout un tas disponible normalement via un @import ....
Et je n'arrive pas a faire ces import la ... aurais un exemple fonctionnel d'un scss contenant des imports , SVP ?
Merci pour ton aide
Voilà j'ai fait un petit test :
http://beta.rdsign.net/exemple/scss-test/
J'ai fait un gradient.
merci pour ce tuto :)
Je viens de l'essayer et ca fonctionne plutôt bien, par contre aurais tu un lien ou l'on pourrais retrouver les différentes syntaxes car en effet j'essai (par exemple) de faire un linear-gradient ... et rien a faire, ca ne veut pas ???
voici le codage de mon style.scss
$color:#FF0000 ;
$defaut-border-radius:15px;
$color:#E1E1E1 ;
$defaut-border-radius:15px;
$first : blue;
$second : yellow;
.test {
padding:10px;
margin:10px;
background:$color ;
border:1px solid darken($color, 20%) ;
border-radius :10px ;
background:linear-gradient($first,$second) ;
}
/************************************************************************/
Merci pour ton aide et bravo pour ton site :)
Cdt
Premièrement, un gros merci pour tes commentaires, c'est apprécié. Pour ce qui est de ton gradient. Essaie avec une formule du type :
background: -moz-linear-gradient(top, $first 0%, $second 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$first), color-stop(100%,$second)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, $first 0%,$second 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, $first 0%,$second 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, $first 0%,$second 100%); /* IE10+ */
background: linear-gradient(top, $first 0%,$second 100%); /* W3C */
Ensuite tu vas surement avoir un autre problème aussi parce que tu as deux fois la variable "$color" de définit.
Pour de la doc sur sass et SCSS, il y a beaucoup d'exemple sur leur site : http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html et http://sass-lang.com/tutorial.html
Tiens moi au courant si tu as d'autres soucis. Si oui, tu peux toujours mettre ton code sur une page, ou sur http://jsfiddle.net/
Ajouter un commentaire
ok merci BEAUCOUP pour ton aide .. !