SCSS problème compilation media queries non pris en compte

Résolu
rdbn Messages postés 95 Date d'inscription   Statut Membre Dernière intervention   -  
rdbn Messages postés 95 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

Voila mon problème mes medias queries ne sont pas pris en compte, ils le sont seulement lorsque que je met un !important, mais ceci prend le dessus sur tout mon scss et toute les tailles d'écran comme s'il remplacé mon code d'origine et cela même si c'est dans un media de taille bien définie...

j'en conclu que je n'est pas d'erreur de codage mais sûrement lors de la compilation...

exemple : 


// Tablet Portrait 
@media screen and(min-width: 768px) {
    .nav-service {

            a {
                font-size: 20px !imoprtant;
                margin-right: 40px !important;
            }
    }

}


En omettant le !important rien ne ce passe mais lorsque que je le met, celui ci me le définie bien mais partout pour toute taille d'écran.

comment mon code scss est organisé :

dans le app.scss d'origine, j'intègre toute mes autre pas scss

en faisant un @import de chaque page tout en haut;
et à la fin j'importe celui du media;

j'ai directement codé le media dans le app.scss à la fin aucun changement...

j'ai besoin d'aide svp merci !

Configuration: Windows / Chrome 94.0.4606.71
A voir également:

5 réponses

Réponse 1 / 5
Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention   527
 
Bonjour,

Il faut ajouter un espace après l'opérateur "and" dans la media query sinon on considère que tu souhaites appeler une fonction and() : 
@media screen and (min-width: 768px) {
   /* ... */
}


Sinon, il faudrait voir quel est le code css compilé pour identifier le problème, avec notamment le code css appliqué sur les liens sans media query.
Le problème peut venir du poids des sélecteurs css : si le poids du sélecteur css utilisé pour définir pour les règles sans media query est supérieur au poids du sélecteur css utilisé dans la media query, la surcharge dans la media query ne sera pas appliqué.

Exemple : https://jsfiddle.net/zL9ubj0r/
Plus d'infos concernant le poids css : https://www.commentcamarche.net/faq/33023-les-poids-css
0
Réponse 2 / 5
rdbn Messages postés 95 Date d'inscription   Statut Membre Dernière intervention  
 
Bonjour, oui effectivement pour l'espace entre avec le and une erreur d'inattention merci.

j'ai lus vos liens très intéressant ca m'a aidé à comprendre le principe de surcharge et de poids en détail. donc j'ai vérifié dans mon code mais je ne vois pas en quoi mon code et plus "lourds" en poids que mon media query même si je suis sur que le problème viens de la car quand je charge la page le temps d'un instant je vois la taille de mon media query puis revient au css.
pour moi c'est pris en compte mais le code css reprends le dessus.

Voici ma navbar 
 {# navbar service #}
    <nav class="navbar navbar-expand-sm navbar-dark bg-dark nav-service">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <a class="nav-link" href="{{ path('app_products') }}">Produits</a>                  
            <a class="nav-link" href="#">Service</a>
            <a class="nav-link" href="#">Aide</a>
            <a class="nav-link" href="#">A propos</a>           
        </div>
    </nav>


Voici mon scss 

// ********************* NAVBAR SERVICE (PRODUIT - SERVICE - AIDE - A PROPOS) ********************* //
body {

    .nav-service {

        .navbar-collapse {
                justify-content: flex-end;
                
                .nav-link {  // j'ai modifié le a par sa class "nav-link"
                    font-weight: 500;
                    font-size: 25px;
                    padding-top: 0;
                    padding-bottom: 0;
                    margin-right: 80px;
                    text-decoration: none;
                    color: $blanc;

                    &:hover {
                        color: $orange;
                        transition-duration: 200ms;
                    }
                }
        }
}


J'ai chercher dans le css qui a était compilé
Voici le code généré 


body .nav-service .navbar-collapse {
  justify-content: flex-end;
}
body .nav-service .navbar-collapse .nav-link {
  font-weight: 500;
  font-size: 25px;
  padding-top: 0;
  padding-bottom: 0;
  margin-right: 80px;
  text-decoration: none;
  color: #FFFFFF;
}
body .nav-service .navbar-collapse .nav-link:hover {
  color: #b55400;
  transition-duration: 200ms;
}


Pour moi ce sont les mêmes "surcharges" css compilé vs scss

J'ai loupé quelque chose ?
0
Réponse 3 / 5
Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention   527
 
Le poids du sélecteur dans la media query 
.nav-service a
ou 
.nav-service .nav-link
est bien inférieur au poids du sélecteur 
body .nav-service .navbar-collapse .nav-link
.

Il faut éviter de faire trop d'imbrication en scss.
En plus d'alourdir le poids des sélecteurs, ca alourdit également le css compilé : par exemple avec le sélecteur "body" qui est répété inutilement pour chaque règle.

SCSS : 
$blanc: white;
$orange: orange;

body {
    background: black;
}

.nav-service {
    .navbar-collapse {
        justify-content: flex-end;
    }
        
    .nav-link {
        font-weight: 500;
        font-size: 25px;
        padding-top: 0;
        padding-bottom: 0;
        margin-right: 80px;
        text-decoration: none;
        color: $blanc;

        &:hover {
            color: $orange;
            transition-duration: 200ms;
        }
    }
}

@media screen and (min-width: 768px) {
    .nav-service {
        .nav-link {
            font-size: 20px;
            margin-right: 40px;
            color: red;
        }
    }
}


CSS : 
body {
  background: black;
}

.nav-service .navbar-collapse {
  justify-content: flex-end;
}
.nav-service .nav-link {
  font-weight: 500;
  font-size: 25px;
  padding-top: 0;
  padding-bottom: 0;
  margin-right: 80px;
  text-decoration: none;
  color: white;
}
.nav-service .nav-link:hover {
  color: orange;
  transition-duration: 200ms;
}

@media screen and (min-width: 768px) {
  .nav-service .nav-link {
    font-size: 20px;
    margin-right: 40px;
    color: red;
  }
}
0
Réponse 4 / 5
rdbn Messages postés 95 Date d'inscription   Statut Membre Dernière intervention  
 
D'accord je vois bien mieux donc dans la mesure du possible à partir que combien les imbrications reste correctement compilé ou du moins correcte à codé ?

parceque sass c'est encore nouveau pour moi et j'ai trouvé les imbrications utile ! j'ai par exemple dans des parties de mon code des imbrications jusqu'à 6 couches ? j'abuse ? lol

Je voulais rajouter aussi par exemple si je mettais dans mon media ceci cela reviendrais à ne plus surchargé ? 
$media screen and (min-with: 768px) {
  body {

    .nav-service {

        .navbar-collapse {
                justify-content: flex-end;
                
                .nav-link {  // j'ai modifié le a par sa class "nav-link"
                    font-weight: 500;
                    font-size: 25px;
                    padding-top: 0;
                    padding-bottom: 0;
                    margin-right: 80px;
                    text-decoration: none;
                    color: $blanc;

                    &:hover {
                        color: $orange;
                        transition-duration: 200ms;
                    }
                }
        }
  }
}


MAIS SINON J'AI BIEN COMPRIS MES ERREURS MERCI !!
0
Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention   527
 
Il n'y a pas de limite théorique au nombre d'imbrication en scss, tout comme il n'y a pas de limite sur le poids des sélecteurs pour les règles css.
Néanmoins ls css repose sur le principe d'héritage et de réutilisabilité. En général on définit un style général pour nos classes auxquels ont peut surcharger certaines propriétés en spécifiant des sélecteurs plus lourds : 
/* CSS */
/* style par défaut de tout les .nav-item */
.nav-item {
  font-size: 16px;
  padding: 5px 30px;
}

/* style des .nav-item dans .nav-services */
.nav-service .nav-item {
  /* hérite du padding de .nav-item */
  font-size: 20px; /* surcharge font-size */
}

/* style du dernier .nav-item dans .nav-services */
.nav-service .nav-item:last-child {
  /* hérite du font-size et du padding de .nav-service .nav-item  */
  color: red;
}


Tous les éléments html sont dans la balise body, il est donc inutile de préciser ce sélecteur pour chacune de tes règles css, il est donc inutile d'imbriquer tout ton code scss dans body { ... }.
Puisque à priori tu utilises Bootstrap, tu peux aussi consulter le code scss de ce framework sur github pour voir d'autres exemples d'utilisation.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
rdbn Messages postés 95 Date d'inscription   Statut Membre Dernière intervention  
 
Bonjour, d'accord merci pour vos explications clair et net !
0

Discussions similaires

Snap média chargé
Tessfuen -
Lilith22h22 -

2 réponses
Comment envoyer un Snap violet avec ses vidéos ?
Nono -
Radinoz -

1 réponse
Checking media presence… media present
Jeanpierre67 -
SATS_fr -

2 réponses
Carte snap
Antho1515151515 -
IrvLox -

1 réponse