28112 sujets

CSS et mise en forme, CSS3

Bonjour,
Je viens d'installer sass, donc je ne maitrise pas les possibilités.
Et j'avoue que j'ai pas trop envie d'y passer des heures, donc je fais appelle aux connaisseurs
J'aimerais obtenir ce code une fois compilé par SASS.
body { 
  color: [[COLOR]];
}
.toto{ background-image : url([[URL_SITE]]/img/monimage.gif)}

A la compilation [[URL_SITE]] passe, mais pas [[COLOR]] sauf si [[COLOR]] est entre guillemet, ce que je ne veux pas.
Est-il possible d'obtenir le code Css ci-dessus avec Sass et comment faire ?
Ne vous posez pas la question du pourquoi, cela serait trop long à expliqué, j'ai juste besoin de savoir si c'est possible de mettre des "VARIABLE" ([[COLOR]]) dans le code Sass.
Pour l'abc du sass tu peux regarder sur ce site : http://sass-lang.com/guide

Pour répondre directement à ta question la syntaxe des variables avec sass est la suivante:

Déclaration et utilisation des variables dans un .scss :


$color: red;
$monfichier: "unebellephoto.jpg"

Utilisation des variables :

.test {
    color: $color;
}

.unephoto {
    url: "monchemin/"+$monfichier;
}

Avec sass il est aussi très utile d'utiliser l'import de fichier scss dans d'autre fichier scss :

@import "monscss.scss";


ainsi que la syntaxe hiérarchique :


.laclasse {
        background: blue;
        span {
                   color: white;
                 }
}

etc...

Très facile à mettre en oeuvre avec un IDE comme Netbean on ne peut plus s'en passer...

Cordialement,
GJboba
J'ai bien peur que ce ne soit pas possible ce que tu demandes aliasdmc. Je suis quand même curieux de pourquoi vouloir cela ?
Modifié par bzh (04 Dec 2017 - 09:56)
Je n'avais pas saisi ce que tu voulais faire!!!

Si tu es sur linux un shell (avec awk, sed ou autre) devrait te permettre de faire ce que tu veux...Et en faisant tourner ce process en arrière plan (ghost) tu automatiserais le tout!
Encore plus simple : tu utilises sass et tu supprimes les guillemets avec un shell

Bonne nuit,
GJbobba
Bonjour,

Merci pour les réponses.

Bon, je vais quand même expliquer le pourquoi de la chose, on sait jamais je pars peut être dans une mauvaise direction.

J'ai 5 sites chez OVH (Mutualise) qui sont identiques qui utilisent 5 css identiques hormis les couleurs et certaine url d'image (qui pointe sur un site static.com/img/repertoireN°y/)
Mon idée est de mettre une seule CSS pour l'ensemble des sites (parce que cela me soule de mettre 5 fichiers, c'est trop fatigant Smiley cligne ! ) que l'on mettra dans un répertoire /static/css/tpl_css.css (à l'extérieur des répertoires des sites).
Chaque soir ou manuellement suivant le besoin, je lance un programme qui vérifie si /static/css/tpl_css.css a changée :
- si elle a changée, je remplace les variables de type [[VARIABLE]] en fonction du site et l'enregistre dans /site_N°y/www/css/mafeuille.css.
Chacun des 5 sites appelleront site_N°y.com/css/mafeuille.css.

Le langage SASS ne me pause pas vraiment de problème pour le moment, je suis capable approprie en "local" de générer 5 Css (via Eclipse sur Window 10), pour chaque site avec les bonnes couleurs et url.
Je pourrais le faire sans SASS, mais comme je désires apprendre SASS, j'aimerai pouvoir faire
tpl_css.css en SASS.
Et si il faut changer "[[VARIABLE]]" au lieu de [[VARIABLE]] cela n'est pas trop grave

Voila l'idée Smiley biggrin
Salut,

Ce que tu peux faire, c'est faire ton CSS principal avec tes variables [[VARIABLE]], et lorsque tu vérifies si le CSS a changé, avant de le copier vers tes 5 sites, avec la fonction PHP str_replace(), tu remplaces tes [[VARIABLE]] par la valeur de chaque site.

Ca fait quelque chose comme (je me suis servi d'une class que j'utilise pour mes templates, que j'ai épuré au max pour ton besoin) :

<?php

final class template{

  private $template;
  private $vars;

  public function start($tpl, array $vars){
    $this->setTemplate($tpl);

    $this->vars      = $vars;
    $this->template  = $this->replaceVars($this->template);

    return $this->template;
  }

  private function replaceVars(&$str){
    $patterns     = array();
    $replacements = array();

    foreach($this->vars as $key => $val){
      $patterns[]     = '[['.$key.']]';
      $replacements[] = $val;
    }

    return str_replace($patterns, $replacements, $str);
  }

  private function setTemplate($tpl){
    $this->template = file_get_contents($tpl);
  }

}

$template = new template();

$tplVars  = array(
                  'site1' => array(
                                   'COULEUR1'  => 'black',
                                   'COULEUR2'  => 'white',
                                   'FONT_SIZE' => '1.1em'
                                  ),
                  'site2' => array(
                                   'COULEUR1'  => 'green',
                                   'COULEUR2'  => 'white',
                                   'FONT_SIZE' => '1.2em'
                                  ),
                  'site3' => array(
                                   'COULEUR1'  => '#ffffff',
                                   'COULEUR2'  => 'yellow',
                                   'FONT_SIZE' => '1.3em'
                                  ),
                  'site4' => array(
                                   'COULEUR1'  => '#ffffff',
                                   'COULEUR2'  => '#000000',
                                   'FONT_SIZE' => '1.4em'
                                  ),
                  'site5' => array(
                                   'COULEUR1'  => '#ffffff',
                                   'COULEUR2'  => '#000000',
                                   'FONT_SIZE' => '1.4em'
                                  )
                 );

$sites    = array(
                  'site1' => array(
                                   'local'   => 'lien_vers_css_site1.css',
                                   'ftp'     => 'ftp.url_site1',
                                   'login'   => 'username',
                                   'pwd'     => 'password'
                                   'distant' => 'lien_vers_css_site1.css',
                                  ),
                  'site2' => array(
                                   'local'   => 'lien_vers_css_site2.css',
                                   'ftp'     => 'ftp.url_site2',
                                   'login'   => 'username',
                                   'pwd'     => 'password'
                                   'distant' => 'lien_vers_css_site2.css',
                                  ),
                  'site3' => array(
                                   'local'   => 'lien_vers_css_site3.css',
                                   'ftp'     => 'ftp.url_site3',
                                   'login'   => 'username',
                                   'pwd'     => 'password'
                                   'distant' => 'lien_vers_css_site3.css',
                                  ),
                  'site4' => array(
                                   'local'   => 'lien_vers_css_site4.css',
                                   'ftp'     => 'ftp.url_site4',
                                   'login'   => 'username',
                                   'pwd'     => 'password'
                                   'distant' => 'lien_vers_css_site4.css',
                                  ),
                  'site5' => array(
                                   'local'   => 'lien_vers_css_site5.css',
                                   'ftp'     => 'ftp.url_site5',
                                   'login'   => 'username',
                                   'pwd'     => 'password'
                                   'distant' => 'lien_vers_css_site5.css',
                                  )
                 );

foreach($tplVars as $site => $vars){
  $css = $template->start('lien_vers_tpl_css.css', $vars);
  $fh  = fopen($sites[$site]['local'], 'w');
  fwrite($fh, $css);
  fclose($fh);

  $ftp   = ftp_connect($sites[$site]['ftp']);
  $login = ftp_login($ftp, $sites[$site]['login'], $sites[$site]['pwd']);
  ftp_put($ftp, $sites[$site]['distant'], $sites[$site]['local'], FTP_ASCII);
  ftp_close($ftp);
}

?>


A noter que j'ai pas testé le code concernant la partie FTP ^^
Je te laisse le plaisir d'essuyer les platres Smiley lol

A noter également qu'il te faut une copie des 5 fichiers CSS en local (là où s'exécute le script php)

Puis je ne sais pas pourquoi, je sens que j'ai fait tout ce code pour rien parce que tu ne t'en serviras probablement pas Smiley lol
Mais c'est pas grave je me suis amusé quand meme!
Modifié par taspeur (10 Dec 2017 - 11:16)
Modérateur
Mais pourquoi ne pas utiliser SASS et les variables pour générer les cinq fichiers CSS.

Comme ça à partir d'un fichier SASS, une commande et paf, 5 fichiers css direct dans les bon dossiers. (elle est pas belle la vie ?)
Bonjour,
taspeur : super, je sais pas encore si je vais le faire mais quoi qu’il arrive , merci pour le script
kustolovic : c'est ce que je voulais éviter, et comme je l'ai dis ça je sais faire
GJboba : je vais regarder, merci
Modifié par aliasdmc (09 Dec 2017 - 15:01)