Forum : [SASS] Problème @extend

Bonjour les amis !

Je suis actuellement sur une refonte complète de mon portfolio, mais voilà, je sèche :

Pour faire simple, j'ai une section "works", qui contient deux principaux blocs :

Le premier nommé "latest-works", permet d'afficher mes 2 derniers projets tandis que le second bloc "latest-article" affiche un carousel qui lui, permet de faire défiler mes derniers articles.

(merci Lorem Picsum :p)

Voici le code HTML :

<section id="works" class="section-grey"> <div class="container"> <div class="latest-works"> <div class="row"> <div class="col-md-8 center-block text-center"> <h3>Check out our latest works</h3> <p>Magnis modipsae que voloratati andigen daepeditem quiate re porem aut labor.</p> </div> </div> <div class="row"> <div class="col-sm-6 pad-top-md"> <figure> <a href="#" class="thumb"> <img src="http://lorempicsum.com/up/627/400/4"> </a> <figcaption> <div class="info"> Grand Motel gets an identity brushup <div class="sub-info">Identity</div> </div> </figcaption> </figure> </div> <div class="col-sm-6 pad-top-md"> <figure> <a href="#" class="thumb"> <img src="http://lorempicsum.com/up/627/400/4"> </a> <figcaption> <div class="info"> Grand Motel gets an identity brushup <div class="sub-info">Identity</div> </div> </figcaption> </figure> </div> </div> </div> <div class="latest-article"> <div class="row pad-top-md"> <div id="owl-tintinautibet" class="owl-carousel"> <div class="item"> <figure> <a href="#" class="thumb"> <img src="http://lorempicsum.com/up/627/400/4"> </a> <figcaption> <div class="info"> Grand Motel gets an identity brushup <div class="sub-info">Identity</div> </div> </figcaption> </figure> </div> <div class="item"> <figure> <a href="#" class="thumb"> <img src="http://lorempicsum.com/up/627/400/4"> </a> <figcaption> <div class="info"> Grand Motel gets an identity brushup <div class="sub-info">Identity</div> </div> </figcaption> </figure> </div> </div> </div> </div> </div> </section>

(j'ai volontairement supprimé quelques blocs pour mes derniers articles, histoire d'avoir un code plus aéré).

Maintenant, le CSS :

.latest-works { figure { .thumb { background:url(../images/link.png) center center $blue no-repeat; display: block; img { opacity: 1; width: 100%; &:hover { opacity: 0.1; transition-duration: 0.4s; } } } .info { background: $white; border-bottom: 2px solid $intermediategrey; color: darken($blue, 10%); font-family: $main-font; font-size: 20px; font-weight: 700; letter-spacing: 0.025em; padding: $padding*1.5; line-height: 150%; .sub-info { color: inherit; font-weight: 300; font-size: 14px; line-height: 30px; } } } } .latest-article { @extend .latest-works; }

Comme vous pouvez le voir, j'ai simplement utilisé un @extend nomDeLaClasseAHeriter sur ma class latest-article.

Puisque mes blocs sont identiques, ils devraient normalement prendre le même style que ceux de latest-works, non ?

Alors soit je dérive totalement, soit j'ai mal utilisé le extand. Mais je penche plutôt pour la deuxième solution.

Si quelqu'un à une idée....

Merci par avance.
Steve

[SASS] Problème @extend

3 réponses