Ajout de compass au template par default

[slwsu]

Salut a tous,
je viens de finir la transformation des fichiers .css (template par default) en fichier .scss pour permettre l'utilisation du système compass: http://compass-style.org/

Pour pouvoir l'utiliser, vous devez installer Ruby et compass via l'invite de commandes
Installation: http://pioupioum.fr/compass-sauvez-integrateur/
Syntax scss: http://sass-lang.com/guide

En suite, copier et coller le dossier sass et le fichier config.rb a la racine de votre site, au même niveau que les dossiers admin et catalog...

Puis via l'invite de commande, rendez vous dans le dossier racine et lancer compass...

ATTENTION: Dés le lancement, la 1er action sera de compiler les fichier, si par erreur vous lanciez le compilateur sur un dossier au quel vous auriez déjà appliqué des modifications, tous serait définitivement perdu

Le dossier sass est créer de sorte que le résultat final du css compilé soit identique a celui du template par default, la différence réside dans la structure des fichiers, tout et séparés en fonction des classes ou ids...

Je continu sur un exemple d'utilisation:
Dans le template par default, le css de la pagination est celui-ci:

Code: Tout sélectionner

.pagination {
   border-top: 1px solid #EEEEEE;
   padding-top: 8px;
   display: inline-block;
   width: 100%;
   margin-bottom: 10px;
}
.pagination .links {
   float: left;
}
.pagination .links a {
   display: inline-block;
   border: 1px solid #EEEEEE;
   padding: 4px 10px;
   text-decoration: none;
   color: #A3A3A3;
}
.pagination .links b {
   display: inline-block;
   border: 1px solid #269BC6;
   padding: 4px 10px;
   font-weight: normal;
   text-decoration: none;
   color: #269BC6;
   background: #FFFFFF;
}
.pagination .results {
   float: right;
   padding-top: 3px;
}

en scss il est comme ca:

Code: Tout sélectionner

.pagination {
    border-top: 1px solid #EEEEEE;
    padding-top: 8px;
    display: inline-block;
    width: 100%;
    margin-bottom: 10px;
    .links {
        float: left;
        a {
            display: inline-block;
            border: 1px solid #EEEEEE;
            padding: 4px 10px;
            text-decoration: none;
            color: #A3A3A3;
        }
        b {
            display: inline-block;
            border: 1px solid #269BC6;
            padding: 4px 10px;
            font-weight: normal;
            text-decoration: none;
            color: #269BC6;
            background: #FFFFFF;
        }
    }
    .results {
        float: right;
        padding-top: 3px;
    }
}


Il est aussi possible d'utiliser des variables, des fonctions ou des mixins, voici deux exemples de fonctions:

Code: Tout sélectionner

@function totalMarge($num) {
    @return (($num - 1) * 2%);
}

@function largueurColonne($num) {
    @return ((100 - totalMarge($num)) / $num);
}

elles servent a calculer certaines valeurs lors de le création de colonnes a la volée

voici une mixin qui permet de créer une mise en page sur 3 colonnes:

Code: Tout sélectionner

@mixin bloc-3($couleurFond, $fin: non){
    background: $couleurFond;
    position: relative;
    float: left;
    width: 32%;   
    @if $fin == "fin"{
        margin: 0;
    }
    @else{
        margin: 0 2% 0 0;
    }

}

Son utilisation est:

Code: Tout sélectionner

#gauche{
    @include bloc-3(red);
}
#center{
    @include bloc-3(#fff);
}
#droite{
    @include bloc-3(#dddddd, fin);
}

et la sortie est celle-ci:

Code: Tout sélectionner

#gauche { background: red; position: relative; float: left; width: 32%; margin: 0 2% 0 0; }

#center { background: white; position: relative; float: left; width: 32%; margin: 0 2% 0 0; }

#droite { background: #dddddd; position: relative; float: left; width: 32%; margin: 0; }

Normalement, vous devriez déjà vous rendre compte du potentiel a utiliser compass, il y a certainement d'autre possibilités. Je n'ai pas tester le rendu sur ie...

Voila, bon test !

[slwsu]

Voici un lien vers le téléchargement, hier le fichier joint n'est pas passé: http://annuaire.url.ph/, ne vous occupé pas de l'url, elle ne me servait a rien...