web-dev-qa-db-fra.com

Requêtes de média d'amorçage SASS/fichiers sass

J'essaie de créer un site Web réactif avec SASS Bootstrap, mais j'ai des problèmes avec les feuilles de style sass.

Lorsque j'inclus la version sass de ma feuille de style, il ne sélectionne que certains éléments de mon code HTML, tels que les éléments de niveau supérieur, et ne contient aucun élément figurant dans une ligne ou une colonne, alors que la version CSS fonctionne parfaitement.

J'ai également créé une feuille de style distincte pour mes requêtes multimédia et elle ne répond pas!

Tête:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/sass-bootstrap.css" rel="stylesheet">
<link href="sass/main.scss" rel="stylesheet">
<link href="sass/media-screens.scss" rel="stylesheet">

Scripts:

<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/sass-bootstrap.min.js"></script>

Requêtes de médias:

$screen-lg-min: 1200px;
$screen-md-min: 992px;
$screen-sm-min: 768px;

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Sass Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: $screen-sm-min) { 

}

/* Medium devices (desktops, 992px and up) */
@media (min-width: $screen-md-min) { 

}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: $screen-lg-min) { 

.header .navigation ul.primary-menu > li a {
    font-size: 1.145em;
    padding: 0 1.24em;
}
}

Je fais probablement quelque chose de mal, mais si quelqu'un pouvait m'aider, je l'apprécierais.

twitter-bootstrapresponsive-designsass
10
wilcode

Découvrez comment compiler des fichiers Sass en CSS

En gros, il vous suffit de les compiler:

$ gem install sass
$ sass sass/main.scss main.css
$ sass sass/media-screens.scss media-screens.css

Puis éditez ceci dans votre HTML

<link href="main.css" rel="stylesheet">
<link href="media-screens.css" rel="stylesheet">

Je recommanderais les réglages de la tâche de surveillance pour un développement rapide

$ sass --watch main.scss:main.css

Dans ce dernier exemple, je recommanderais importer votre feuille de style de requête multimédia dans main afin que vous n'ayez pas à compiler de nombreux fichiers.

Et encore mieux, utilisez un outil de construction automatisé comme Grunt pour faire tout cela à votre place.

7
Joseph Spens
// DEVICE LIST //
$xs-min: "only screen and (min-width:none)";
$xs-max: "only screen and (max-width:520px)";
$xs-sm: "only screen (min-width: none) and (max-width:767px)";

$sm-min: "only screen and (min-width:768px)";
$sm-max: "only screen and (max-width:991px)";
$sm-md: "only screen (min-width: 768px) and (max-width:991px)";

$md-min: "only screen and (min-width:992px)";
$md-max: "only screen and (max-width:1199px)";
$md-lg: "only screen (min-width: 992px) and (max-width:1199px)";

$lg-min: "only screen and (min-width:1200px)";
$lg-max: "only screen and (max-width:none)";

Écrivez votre liste de périphériques comme ci-dessus, personnalisez les points d'arrêt. Utilisez # {} en l’utilisant dans SCSS. Assurez-vous également que vous utilisez compass car il utilise la méthode de compas auxiliaire.

/* Small devices (tablets, 768px and up) */
@media #{$sm-min} { 

}

/* Medium devices (desktops, 992px and up) */
@media #{$md-min} { 

}

/* Large devices (large desktops, 1200px and up) */
@media #{$lg-min} { 

.header .navigation ul.primary-menu > li a {
    font-size: 1.145em;
    padding: 0 1.24em;
}
}
2
Nizam Kazi
<link href="sass/main.scss" rel="stylesheet">
<link href="sass/media-screens.scss" rel="stylesheet">

On dirait que vous utilisez des fichiers scss dans votre page, mais le navigateur ne prend pas en charge les fichiers scss. Tout d’abord, vous devez compiler vos fichiers scss en fichiers css. Peut-être que l’application Scount peut vous aider: http://mhs.github.io/scout-app/

1
Slawa Eremkin

Merci pour vos conseils, Joseph. J'ai ajouté mes requêtes multimédia au bas de ma feuille de style, mais le principal problème était que les écrans n'étaient pas correctement réglés en largeur. J'ai fini avec ce qui suit:

/* Extra Small devices (mobiles, 320px and up) */
@media (min-width: 320px) and (max-width: 767px) {}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991px) {}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199px) {}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) and (max-width: 1920px;) {}
0
wilcode