Multiple argumen @include media queries impossible par DavidBouhaben - page 1

Bonjour.

Il y a une chose que je ne comprends pas. J'ai crée un breakpoints pour créer une web responsive, je veux mettre plusieurs arguments dans le media queries (ligne 2 en bas) comme ce qui est montré sur ce site (https://eduardoboucas.github.io/include-media/#features) mais je n'arrive pas car si je fais @include media('>phone', '<=tablet') {

Voici mon github: https://github.com/Darkheadbanger/DavidBouhaben_personal_project_CV_ePortofolio

} il me dit toujours qu'il y a une erreur comme quoi qu'il n'y a qu'une seule argument possible mais pas plus ?
Je ne comprends pas pourquoi il y a cette erreur:

Pouvez vous m'aider s'il vous plait.

Voici les breakpints:

$breakpoints: (
  'smallMobile': 408.98px,
  'mobile': 575.98px,
  'tablet': 767.98px,
  'dekstop': 991.98px,
  'LGdekstop': 1199.98px,
  // "XLdekstop": 1399px,
) !default;

Voici le mixin pour le breakpoints

@mixin media($breapoints) {
  @each $breakpoint in $breapoints {
    @media (max-width: map-get($breakpoints, $breakpoint)) {
      @content;
    }
  }
}

Voici le bout de mon scss

.nav {
  @include media('phone', 'tablet' ) {
    .darkmode {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      margin: 0 0 15px 0;
      &__police {
        font-size: medium;
      }
      .toggle {
        display: none;
      }
      .toggleBtn {
        border: 3px solid #9e9191;
        border-radius: 16px;
        align-self: center;
        cursor: pointer;
        display: block;
        width: 70px;
        height: 30px;
        outline: 0;
        user-select: none;
        transition: 0.4s;
        &::before {
          left: 1%;
          background-color: #9e9191;
          content: "";
          border-radius: 16px;
          width: 50%;
          overflow: hidden;
          height: 93%;
          position: relative;
          display: block;
          margin: 1px 0 0 0;
          cursor: pointer;
        }
      }
      input {
        &:checked + .toggleBtn {
          background-color: #1e2a3a;
          border: 3px solid #6c51a4;
        }
        &:checked + .toggleBtn::before {
          animation: darkmode-active 0.4s ease-in-out 0s 1 normal forwards;
          margin: 1px 0 0px -2px;
          background-color: #6c51a4;
        }
        &:not(:checked) + .toggleBtn::before {
          animation: darkmode-desactive 0.4s ease-in-out 0s 1 normal forwards;
        }
      }
    }
  }
}

Voici mon HTML:

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,900i"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="/public/css/style.css" />
    <link rel="stylesheet" href="/public/css/style.css.map" />
    <title>David Bouhaben ePortfolio</title>
  </head>
  <body class="" id="bodyId">
    <div class="loading--circle loading--full-hight">
      <div class="loading--box loading--full-hight"></div>
    </div>
    <!-- Ici, le nav -->
    <div id="navId" class="">
      <nav id="nav" class="nav">
        <ul>
          <li class="li">
            <a href="/about.html" class="nav__link nav__link--active"
              ><i class="fas fa-home icon"></i>Accueil</a
            >
          </li>
          <li class="li">
            <a href="#profil" class="nav__link"
              ><i class="fas fa-user icon"></i>Profil</a
            >
          </li>
          <li class="li">
            <a href="#portfolio" class="nav__link"
              ><i class="fas fa-briefcase icon"></i>Portfolio</a
            >
          </li>
          <li class="li">
            <a href="#CV" class="nav__link"
              ><i class="fas fa-book-open icon"></i>CV</a
            >
          </li>
          <li class="li">
            <a href="#Contact" class="nav__link"
              ><i class="fas fa-phone icon"></i>Contact</a
            >
          </li>
          <li class="li">
            <a href="#Activité" class="nav__link"
              ><i class="fas fa-tasks icon"></i>Activité Récente</a
            >
          </li>
          <!-- Langue, Anglais, Francais, Indonésien -->
          <li class="li">
            <a href="#langue" class="nav__link"
              ><img
                src="./public/image/Drapeau/France.png"
                alt="France"
              />Version Française</a
            >
          </li>
          <div class="darkmode">
            <span id="darkmode-Text" class="dark__police"
              ><i class="far fa-lightbulb claire"></i>Mode claire</span
            >
            <input
              type="checkbox"
              name="darkmode"
              class="toggle"
              id="darkmode"
            />
            <label for="darkmode" class="toggleBtn"></label>
          </div>
        </ul>
      </nav>
    </div>
    <!-- Ici, Header -->
    <header id="site-header" class="wrapper container-header">
      <div class="container-header__background">
        <div class="container-header__info">
          <div class="container-header__nav">
            <div id="home" class="nav nav__logo">
              <span class="nav__logo--modifier">
                <a href="/index.html"
                  ><img
                    src="./public/image/Logo-david-bouhaben.png"
                    alt="Logo David Bouhaben"
                /></a>
              </span>
              <div class="hamburger">
                <button class="hamburger-toggle">
                  <span class="bar-top"></span>
                  <span class="bar-mid"></span>
                  <span class="bar-bot"></span>
                </button>
              </div>
            </div>
          </div>
          <!-- Gif stopped programmatically -->
          <div id="homepage">
            <div>
              <div class="container-information">
                <!-- <img src="./public/image/CV.png" alt="Logo CV David Bouhaben"/> -->
                <div
                  class="container-information__info container-information__info--modifier"
                >
                  <h1>David Bouhaben</h1>
                  <h2>Développeur web/Front-End</h2>
                </div>
              </div>
              <div class="reseaux-sociaux">
                <nav>
                  <ul>
                    <li>
                      <a href="https://github.com/Darkheadbanger" title="Github"
                        ><i class="fab fa-github"></i
                      ></a>
                    </li>
                    <li>
                      <a
                        href="https://www.linkedin.com/in/david-bouhaben-904806b4/"
                        title="Linkedin"
                        ><i class="fab fa-linkedin-in"></i
                      ></a>
                    </li>
                    <li>
                      <a
                        href="https://twitter.com/Davidbouhaben1"
                        title="Twitter"
                        ><i class="fab fa-twitter"></i
                      ></a>
                    </li>
                  </ul>
                </nav>
              </div>
              <div class="bio">
                <p class="bio__element bio__element--modifier">
                  Je suis à la recherche d'un contrat en alternance qui me
                  permettrait d’acquérir de nouvelles compétences dans le
                  développement web (côté Front-End, Back-end ou FullStack).
                  Vous pouvez regarder ma
                  <a href="https://paper.li/e-1598349115"
                    >curation de contenu ici</a
                  >. Voulez-vous savoir plus sur moi ? Vous pouvez consulter
                  montravail sur
                  <a href="https://github.com/Darkheadbanger">Github</a> et
                  vouspouvez télécharger mon
                  <a
                    href="/public/CV/CV_Bouhaben_David_FrontEndDevelopper.pdf"
                    target="_blank"
                    rel="noopener"
                    >CV ici</a
                  >
                </p>

                <div class="tech tech--modifier">
                  <div class="container-overlay">
                    <i class="fas fa-laptop-code fa-2x"></i>
                    <span>Front End</span>
                    <div class="overlay">
                      <span class="overlay__text overlay__text--modifier"
                        >Front End</span
                      >
                    </div>
                  </div>

                  <div class="container-overlay">
                    <i class="fas fa-server fa-2x"></i>
                    <span>Back End</span>
                    <div class="overlay">
                      <span class="overlay__text overlay__text--modifier"
                        >Back End</span
                      >
                    </div>
                  </div>

                  <div class="container-overlay">
                    <i class="fas fa-mobile-alt fa-2x"></i>
                    <span>Web Mobile</span>
                    <div class="overlay">
                      <span class="overlay__text overlay__text--modifier"
                        >Web Mobile</span
                      >
                    </div>
                  </div>

                  <div class="container-overlay">
                    <i class="fas fa-brush fa-2x"></i>
                    <span>Web Design</span>
                    <div class="overlay">
                      <span class="overlay__text overlay__text--modifier"
                        >Web Design</span
                      >
                    </div>
                  </div>

                  <!-- <div class="container-overlay-5">
                           <i class="fas fa-language fa-2x"></i>
                           <div class="overlay">
                              <span class="overlay__text overlay__text--modifier">Français, Anglais, Indonésien</span>
                           </div>
                          </div> -->
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>


    <script defer src="./public/JS/loading.js"></script>
    <script defer src="./public/JS/hamburger.js"></script>
    <script defer src="./public/JS/nav.js"></script>
    <script defer src="./public/JS/font-awesome-JS/all.js"></script>
    <script defer src="./public/JS/font-awesome-JS/all.min.js"></script>
    <script defer src="./public/JS/darkmode.js"></script>
    <script defer src="./public/JS/tooltip.js"></script>
  </body>
</html>

Voici le screenshot comme quoi je ne peux pas mettre plusieurs arguments dans @include media ('phone')

-
Edité par DavidBouhaben 5 janvier 2022 à 16:01:37

DavidBouhaben

5 janvier 2022 à 15:27:47

Warps73

6 janvier 2022 à 21:46:13

Salut, quand tu fais ton include de "media" tu importe cette mixin

Qui comme tu peux le voir ne prend qu'un seul argument $breakpoints.

Par contre toi quand tu fais

@include media('phone', 'tablet' )

Tu passes deux arguments à ta mixin d'où ton erreur.

Je ne sais pas exactement qu'elle est ton objectif mais tu peux lui passer un tableau comme ceci.

@include media(['phone', 'tablet'])

Bon courage

While(true)

8 janvier 2022 à 11:11:18

Warps73 a écrit:

Salut, quand tu fais ton include de "media" tu importe cette mixin
@mixin media($breapoints) {
  @each $breakpoint in $breapoints {
    @media (max-width: map-get($breakpoints, $breakpoint)) {
      @content;
    }
  }
}
Qui comme tu peux le voir ne prend qu'un seul argument $breakpoints.

Par contre toi quand tu fais
@include media('phone', 'tablet' )
Tu passes deux arguments à ta mixin d'où ton erreur.

Je ne sais pas exactement qu'elle est ton objectif mais tu peux lui passer un tableau comme ceci.
@include media(['phone', 'tablet'])
Bon courage

@+

Bonjour.

Merci pour ta réponse. Oui parfois je me perds dans mes codes et je ne sais plus ce que je veux faire hahaha.
J'ai trouvé une solution, la solution est de faire @include media(desktop) pour avoir le design responsive pour le petit écran comme le portable jusqu'à la limite de l'écran tablette et ca fonctionne

Multiple argumen @include media queries impossible

Multiple argumen @include media queries impossible

Supprimer

Modérer

Signaler le message aux modérateurs