Je sais que le suivant peut être fait dans BOURBON NEAT:
//desired behavior
//I know this is not available. Just made up
@include media($mobile, $tablet) {
// some styling.
// this should be applied to mobile and tablet
}
3 Réponses :
Ce n'est pas une réponse liée au Bourbon, mais de toute façon.
Il y a un compas extension qui fait exactement ce que vous voulez: Slicer d'arrêt .
Vous venez de configurer vos points d'arrêt comme ceci: puis adressez simplement les lacunes entre les points d'arrêt (appelés "tranches") avec le court avec l'écosystème De nombreuses extensions de compas puissantes, il n'y a vraiment aucune raison d'être saoul avec Bourbon. Pour une grille sémantique puissante, utilisez singularité , elle intègre bien avec Point d'arrêt et slicer de point de rupture. à , de , à et entre mixines. Par exemple, @include à (2) définira un min-largeur: 320px, max-largeur: 760px requête multimédia.
Si vous souhaitez cibler le mobile et la tablette pour un style spécifique, je pense que votre meilleure option serait créer un nouveau point d'arrêt: et ajouter sous ce point d'arrêt Tout votre CSS spécifique. < / p>
Je ne sais pas si quelqu'un a toujours besoin de cela, mais j'ai fait une fonction suivante: qui fonctionne pour moi juste bien. p> @media screen and (min-width: 29.25em) and (max-width: 48em) and (max-height: 29.25em) {
.logo a .mobile {
display: none; } }
@media screen and (min-width: 29.25em) and (max-width: 50em) and (min-height: 29.25em) {
.logo a .mobile {
display: none; } }
@media screen and (min-width: 48em) and (max-width: 80em) and (max-height: 50em) {
.logo a .mobile {
display: none; } }
@media screen and (min-width: 80em) and (max-width: 105em) {
.logo a .mobile {
display: none; } }
@media screen and (min-width: 105em) {
.logo a .mobile {
display: none; } }
N'est pas simplement de préciser suffisamment de comprimé, une tablette $ englobe $ mobile, selon vos définitions de point de rupture.
Je suis désolé; J'ai oublié de mentionner min-largeur sur le point d'arrêt de la tablette. Il y a un point d'arrêt min-largeur sur la tablette.
Quel est le point de faire cela, les requêtes médiatiques prennent très peu de place de toute façon. Vous pouvez économiser deux lignes, mais vous allez ajouter probablement des lignes.
Voulez-vous dire que je devrais ajouter un nouveau point d'arrêt? Je peux le faire, mais je pensais s'il y avait un moyen de spécifier 2 points d'arrêt ensemble et qu'il sait comment les fusionner.
Quel est le point de mettre des points d'arrêt dans des variables? Vous devez simplement spécifier tous les points d'arrêt que vous souhaitez la manière habituelle. Je peux voir peut-être que vouloir mettre les styles qu'ils contiennent en Vars, mais les points d'arrêt eux-mêmes, je n'ai pas vraiment le point.
Mec, c'est utile. Si, pour une raison quelconque, j'ai besoin de changer de pixels autour des points d'arrêt, je n'ai pas à traiter de les changer partout sur les feuilles de style. C'est l'explication de base pour utiliser toute variable.
@watson Pourquoi utiliser Sass du tout ?! Sécher est la raison de l'utilisation d'une variable. De toute façon j'ai besoin de cette tâche ciblée. Ce n'est pas une question stupide.