Problème de @extend qui refuse de fonctioner

Jonathan Gleyze
Les bases HTML/CSS

Bonjour, Bonsoir

j'ai crée un code qui permet d’inséré un bouton avec une class,avec le combo compass/scss. dans se code il y a une partie qui gère la taille des bouton "/*size btn*/" , pour éviter de répéter le code jais voulu utiliser un @extend mais il refuse obstinément a fonctionner.

Partie qui gère la talle des bouton 

/*Extends*/
.btn
    {
    font-size: $btn_size_font;
    height: $btn_px_height;
        span{
        @include border-radius(4px, 4px); 
        background-color: $btn_color;
        line-height: $btn_px_height;
        display: inline;
        margin: $btn_margin;
        color: $btn_color_font;     
    }
/*size btn*/
.btn-small span{@extend .btn; padding: $btn_padding_size_small};

.btn-medium span{@extend .btn; padding: $btn_padding_size_medium};

.btn-large span{@extend .btn; padding: $btn_padding_size_large};

Code Complet: 

/* Import this file using the following HTML or equivalent:
 * <link href="/css/style_btn.css" rel="stylesheet" type="text/css" /> */
/*Importer ce fichier en utilisant le HTML ou équivalent suivant:
 * <link href="/css/style_btn.css" rel="stylesheet" type="text/css" /> */
/*The configuration is managed in "config / style btn config.sccs"
 le configuration se gère dans "config/style btn config.sccs"*/

/*---------------------------------------------------------------------------------------------*/
/*Inport compass*/
@import "compass/css3", "config/style_btn_config.scss"; 
/*Extends*/
.btn
    {
    font-size: $btn_size_font;
    height: $btn_px_height;
        span{
        @include border-radius(4px, 4px); 
        background-color: $btn_color;
        line-height: $btn_px_height;
        display: inline;
        margin: $btn_margin;
        color: $btn_color_font;     
    }
/*size btn*/
.btn-small span{@extend .btn; padding: $btn_padding_size_small};

.btn-medium span{@extend .btn; padding: $btn_padding_size_medium};

.btn-large span{@extend .btn; padding: $btn_padding_size_large};

/*color buttom*/
.btn_color_norm span    {@include box-shadow(inset 0 -47px 55px 24px rgba(0,0,0,.08));
                         @include background-image(linear-gradient(bottom, #39de00 0%, #5fdf02 100%)) };
.btn_warning span{@include box-shadow(inset 0 -47px 55px 24px rgba(0,0,0,.08));
                           @include background-image(linear-gradient(bottom, #ffb401 0%, #ffb505 100%)) };
.btn_color_vwarning span{@include box-shadow(inset 0 -47px 55px 24px rgba(0,0,0,.08));
                            @include background-image(linear-gradient(bottom, #fe0000 0%, #d30303 100%)) };

/*reset*/
.btn-large, .btn-medium , .btn-small{
        padding: 0;
        list-style: none;
        text-decoration: none;
        margin: auto;
};

Css de sortie 

/*
Syntax error: Invalid CSS after "};": expected "}", was ""
        on line 53 of C:/wamp/www/convert sass/sass/style_btn.scss
Backtrace:
C:/wamp/www/convert sass/sass/style_btn.scss:53
F:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.2.19/lib/sass/scss/parser.rb:1147:in `expected'
F:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.2.19/lib/sass/scss/parser.rb:1085:in `expected'
F:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.2.19/lib/sass/scss/parser.rb:1080:in `tok!'
F:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.2.19/lib/sass/scss/parser.rb:536:in `block'
F:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.2.19/lib/sass/scss/parser.rb:529:in `ruleset'
F:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.2.19/lib/sass/scss/parser.rb:553:in `block_child'
F:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.2.19/lib/sass/scss/parser.rb:546:in `block_contents'
F:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.2.19/lib/sass/scss/parser.rb:82:in `stylesheet'
F:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.2.19/lib/sass/scss/parser.rb:27:in `parse'
F:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.2.19/lib/sass/engine.rb:342:in `_to_tree'
F:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.2.19/lib/sass/engine.rb:315:in `_render'
F:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/sass-3.2.19/lib/sass/engine.rb:262:in `render'
F:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/compass-0.12.6/lib/compass/compiler.rb:139:in `block (2 levels) in compile'
F:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/compass-0.12.6/lib/compass/compiler.rb:126:in `timed'
F:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/compass-0.12.6/lib/compass/compiler.rb:138:in `block in compile'
F:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/compass-0.12.6/lib/compass/logger.rb:45:in `red'
F:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/compass-0.12.6/lib/compass/compiler.rb:137:in `compile'
F:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/compass-0.12.6/lib/compass/compiler.rb:118:in `compile_if_required'
F:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/compass-0.12.6/lib/compass/compiler.rb:103:in `block (2 levels) in run'
F:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/compass-0.12.6/lib/compass/compiler.rb:101:in `each'
F:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/compass-0.12.6/lib/compass/compiler.rb:101:in `block in run'
F:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/compass-0.12.6/lib/compass/compiler.rb:126:in `timed'
F:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/compass-0.12.6/lib/compass/compiler.rb:100:in `run'
F:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/compass-0.12.6/lib/compass/commands/watch_project.rb:147:in `recompile'
F:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/fssm-0.2.10/lib/fssm/path.rb:73:in `call'
F:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/fssm-0.2.10/lib/fssm/path.rb:73:in `run_callback'
F:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/fssm-0.2.10/lib/fssm/path.rb:55:in `callback_action'
F:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/fssm-0.2.10/lib/fssm/path.rb:35:in `update'
F:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/fssm-0.2.10/lib/fssm/state/directory.rb:39:in `block in modified'
F:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/fssm-0.2.10/lib/fssm/state/directory.rb:37:in `each'
F:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/fssm-0.2.10/lib/fssm/state/directory.rb:37:in `modified'
F:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/fssm-0.2.10/lib/fssm/state/directory.rb:18:in `refresh'
F:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/fssm-0.2.10/lib/fssm/backends/polling.rb:17:in `block (2 levels) in run'
F:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/fssm-0.2.10/lib/fssm/backends/polling.rb:17:in `each'
F:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/fssm-0.2.10/lib/fssm/backends/polling.rb:17:in `block in run'
F:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/fssm-0.2.10/lib/fssm/backends/polling.rb:15:in `loop'
F:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/fssm-0.2.10/lib/fssm/backends/polling.rb:15:in `run'
F:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/fssm-0.2.10/lib/fssm/monitor.rb:26:in `run'
F:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/fssm-0.2.10/lib/fssm.rb:70:in `monitor'
F:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/compass-0.12.6/lib/compass/commands/watch_project.rb:87:in `perform'
F:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/compass-0.12.6/lib/compass/commands/base.rb:18:in `execute'
F:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/compass-0.12.6/lib/compass/commands/project_base.rb:19:in `execute'
F:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/compass-0.12.6/lib/compass/exec/sub_command_ui.rb:43:in `perform!'
F:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/compass-0.12.6/lib/compass/exec/sub_command_ui.rb:15:in `run!'
F:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/compass-0.12.6/bin/compass:30:in `block in <top (required)>'
F:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/compass-0.12.6/bin/compass:44:in `call'
F:/Ruby200-x64/lib/ruby/gems/2.0.0/gems/compass-0.12.6/bin/compass:44:in `<top (required)>'
F:/Ruby200-x64/bin/compass:23:in `load'
F:/Ruby200-x64/bin/compass:23:in `<main>'
*/
body:before {
  white-space: pre;
  font-family: monospace;
  content: "Syntax error: Invalid CSS after \"};\": expected \"}\", was \"\"\A on line 53 of C:/wamp/www/convert sass/sass/style_btn.scss"; }

Erreur envoyer par le compilateur 

error sass/style_btn.scss (Line 53: Invalid CSS after "};": expected "}", was "")

Syntaxe HTML 

<a class="button-medium buttom_color_warning" href="#"><span>Hello world</span></a>

Pourtant j'ais vérifier plusieurs vois la DOC j'ais chercher des exemple et je ne vois pas mon erreur, sa vais plus de 3 H que je cherche "...."

ps: L’erreur à apparue quant j'ai voulu optimiser sait partie du code.

En espèrent que vous pourriez m'aider, merci d'avance a vous

3 réponses

Jonathan Gleyze
Auteur
Réponse acceptée

Solution trouver l' erreur venais d'un oubli de fermer les span de la lignes 12

.btn
    {
    font-size: $btn_size_font;
    height: $btn_px_height;
        span{
        @include border-radius(4px, 4px); 
        background-color: $btn_color;
        line-height: $btn_px_height;
        display: inline;
        margin: $btn_margin;
        color: $btn_color_font;

    }

bon 

.btn
    {
    font-size: $btn_size_font;
    height: $btn_px_height;
        span{
        @include border-radius(4px, 4px); 
        background-color: $btn_color;
        line-height: $btn_px_height;
        display: inline;
        margin: $btn_margin;
        color: $btn_color_font;
        }       
    }

3H de perdu pour une bêtise, bon, merci a vous.

Romano83

Salut,
l'erreur parle d'elle-même. Tu as mis un ; après l'accolade de fin (ligne 53 de ton code complet) alors qu'il n'en faut pas ;)

Jonathan Gleyze
Auteur 
/*reset*/
.btn-large, .btn-medium , .btn-small{
        padding: 0;
        list-style: none;
        text-decoration: none;
        margin: auto;
}

Ereur 

error sass/style_btn.scss (Line 53: Invalid CSS after "}": expected "}", was "")

/*reset*/
.btn-large, .btn-medium , .btn-small{
        padding: 0;
        list-style: none;
        text-decoration: none;
        margin: auto;
;}

Ereur 

error sass/style_btn.scss (Line 55: Invalid CSS after ";}": expected "}", was "")

/*reset*/
.btn-large, .btn-medium , .btn-small{
        padding: 0;
        list-style: none;
        text-decoration: none;
        margin: auto;

Ereur 

error sass/style_btn.scss (Line 55: Invalid CSS after " margin: auto;": expected "}", was "")

j'avais bien sur essayer toute les combinaisons possible, mais rien ne change. toujours la même erreur.