les points d'arrêt à l'aide de bourbon soigné grille
Je suis en train d'utiliser soignée pour de bourbon et j'ai obtenu la plupart des choses triés, mais je suis frapper certains blocages quand il s'agit de créer les points de rupture.
Je préfère séparer les fichiers sass pour mobile, tablette, ordinateur de bureau & largedesktop et je n'ai pas l'habitude d'utiliser le bouillonnement de créer mon requêtes de média que je n'aime pas la façon dont il ne se contente pas de créer un media query, il rend les tons à travers le fichier css. Mais jusqu'à présent, je ne peux que semblent rechercher de la documentation sur un bouillonnement méthode.
Article sur la façon d'utiliser les points d'arrêt dans neat
Voici ce que j'ai fait:
$largedesktop-size:em(1050);
//Bourbon Neat Breakpoints
$largedesktop: new-breakpoint(min-width $largedesktop-size 16);
@include media($largedesktop) {
body{
background:black;
}
}
J'ai aussi essayé ce, qui met à jour le bg de la couleur, mais ne mettez pas à jour les visuels de la grille:
//Media Queries Breakpoints
$tablet-size:em(700);
@include media(min-width $tablet-size 8) {
body{
background:orange;
}
}
OriginalL'auteur Daimz | 2013-04-04
Vous devez vous connecter pour publier un commentaire.
J'ai effectivement pensé de ça, mon problème principal était juste avec ce que j'avais organisé mon .scss fichiers, mais ici est de savoir comment.
Structure de fichier comme ceci:
Variables doivent aller de l'avant de l'importation de variables.
dans _variables.scss ajouter vos requêtes comme:
Ensuite (c'est de cette façon que j'aime organiser les choses) créer un fichier scss pour mobile, tablette, ordinateur de bureau & largedesktop et à l'importation après _base.scss – j'ai montré ci-dessus comment les fichiers doivent être structurés.
À l'intérieur de chaque ajouter votre requête des médias ainsi que le besoin d'un changement de structure.
comme ceci:
_mobile.scss
Qui devrait fonctionner pour vous.
Comme je l'ai dit c'est la façon dont je l'ai fait, je suis sûr qu'il y a beaucoup d'autres mais je voulais laisser les gens savent une façon si ils ont des problèmes 🙂
OriginalL'auteur Daimz
J'ai eu un problème similaire avec les points d'arrêt et la mise à jour de la grille. Légèrement différentes, mais ...
Voici ce qui m'a aidé. C'est pas dans le documentation principale.
Sur Neat Page GitHub, le thoughtbot équipe explique:
d'importation avant l'importation Soigné
Dans le _grid-paramètres.scss fichier, importer soigné-aides
Avant l'ajout de cette installation, j'ai pu voir la grille, mais la grille ne serait pas répondre à mon point d'arrêt demandes de mise à jour des colonnes ou changer le positionnement des composants. Une fois que j'ai eu ces paramètres en place, le réseau a fonctionné comme je l'espérais.
Je suis en utilisant CodeKit 2, si ce qui compte.
OriginalL'auteur user3647674
À qui cela peut concerner, mon problème n'était pas que j'avais le mauvais ordre des importations, mais la façon dont j'ai utilisé mes variables. Je pensais que la fonction a pris une chaîne...
C'est faux:
C'est correct:
OriginalL'auteur Design by Adrian