@media et @ font-face soutien à LessCSS

StackOverflow https://stackoverflow.com/questions/4474477

  •  11-10-2019
  •  | 
  •  

Question

Bonjour Quelqu'un sait comment faire une requête multimédia avec LessCSS? 

  @media screen and (max-width: 600px) {
      #container{
          width: 480px;
      }
  }

me donne l'erreur suivante: 

! Syntax Error: on line 23: expected one of :: : . # * - [ @media @font-face , { ; got ( after:

@media screen and

De même, @ font-face et toute requête CSS3 avec un conflit @ avec le compilateur LessCSS.

Merci!

Était-ce utile?

La solution

Pour autant que je comprends, LessCSS ne supporte pas @media, vous pouvez trouver des billets ouverts pour que sur leur github page d'accueil.

La seule façon que je vois pour que cela fonctionne dans votre cas est la suivante: 

<link rel="stylesheet" media="screen and (max-width: 480px)" href="smartphone.css" />

Il ne ressemble la question a été corrigé dans les versions de LessCSS depuis la réponse acceptée.

Autres conseils

Toutes les réponses ci-dessus sont dépassées.

Les deux less.js et lessCss / support dotless @media et @ font-face.

Ils soutiennent désormais @media avec les règles imbriquées, par exemple. 

.cl {
 @media screen and (max-width: 600px) {
  .d {
   .e {
     background: none;
   }
  }
 }
}

devient 

@media screen and (max-width: 600px) {
 .cl .d .e {
   background: none;
 }
}

S'il vous plaît se référer à la less.js documentation et documentation dotless pour plus d'informations.

Si vous pouvez utiliser less.js , il fonctionne dès la sortie de la boîte. J'ai essayé le même exemple: 

@media screen and (max-width: 600px) {
    #container{
        width: 480px;
    }
}

et reproduit exactement la même chose dans le fichier .css. Il y a aussi une fonctionnalité d'évasion dans less.js, mais il semble ne fonctionner que sur des valeurs, donc je ne pense pas que vous pouvez l'utiliser pour cela. 

body {
    color: e('red');
}

Je devine que vous utilisez l'original Ruby LessCSS bien? Si vous ne pouvez pas passer à la nouvelle, la seule autre chose que je peux penser utilise un @include. Cela pourrait être légèrement meilleure qu'une autre balise de lien dans le code HTML, et si vous compressez tous vos fichiers CSS, vous pourriez être en mesure d'éviter la requête HTTP supplémentaire.

  

MOINS ne fournit pas de support spécial pour les questions des médias. Cela signifie qu'il est impossible d'intégrer les requêtes des médias dans les règles imbriquées de LESS, ce qui oblige les développeurs à silo leurs styles réactifs dans une section distincte du document LESS, plutôt que de les garder dans leur contexte. Permettez-moi de vous donner un exemple de la façon dont cela pourrait fonctionner:

de Un appel à MOINS à Embrassez Responsive Design

Alors oui, vous pouvez utiliser des requêtes des médias en ce moment, mais vous ne pouvez pas les écrire dans la syntaxe imbriquée.

Découvrez les commentaires sur ce blog pour des solutions proposées qui ressemblent ils seront roulées dans less.js plus tôt que tard.

Nous l'utilisons sur notre projet et n'a jamais trouvé de travail.

créer un fichier css externe dont est pas géré par moins. Moins fichier css sera en mesure d'accéder à la face de la police.

J'ajouté une impression simple @media {.no-print {display: none;}} dans le fichier .Moins référencé suivant: 

<link rel="stylesheet/less" href="http://worldMaps.org/maps/styles/growth.less">

et cela ne fonctionnerait pas. Cependant, notre gourou css a fait remarquer que par défaut de .lesses est d'utiliser le type de support de l'écran, donc si vous changez votre lien référencé moins à 

<link rel="stylesheet/less" href="http://worldMaps.org/maps/styles/growth.less" media="all">

Puis tout à coup l'impression @media dans le fichier moins ne sera pas repris et commencer à travailler par normal.

Espérons que cela aide quelqu'un d'autre aussi confus que moi.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top