Dans Sass original réel (pas scss), vous pouvez utiliser les mixins ci-dessous pour définir automatiquement le paragraphe et tous les titres.font-size
.
Je l'aime car il est beaucoup plus compact. Et plus rapide à taper. En dehors de cela, il offre les mêmes fonctionnalités. Quoi qu'il en soit, si vous voulez toujours vous en tenir à la nouvelle syntaxe - scss, n'hésitez pas à convertir mon contenu Sass en scss ici:
[CONVERTIR SASS EN SCSS ICI]
Ci-dessous, je vous donne quatre mixins Sass. Vous devrez modifier leurs paramètres selon vos besoins.
=font-h1p-style-generator-manual() // You don’t need to use this one. Those are only styles to make it pretty.
=media-query-base-font-size-change-generator-manual() // This mixin sets the base body size that will be used by the h1-h6 tags to recalculate their size in a media query.
=h1p-font-size-generator-auto($h1-fs: 3em, $h1-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6) // Here you will set the size of h1 and size jumps between h tags
=config-and-run-font-generator() // This one only calls the other ones
Une fois que vous avez fini de jouer avec les paramètres, appelez simplement un mixage - qui est: + config-and-run-font-generator () . Voir le code ci-dessous et les commentaires pour plus d'informations.
Je suppose que vous pouvez le faire automatiquement pour une requête multimédia comme cela est fait pour les balises d'en-tête, mais nous utilisons tous des requêtes multimédias différentes, donc ce ne serait pas approprié pour tout le monde. J'utilise une approche de conception axée sur le mobile, c'est ainsi que je ferais cela. N'hésitez pas à copier et utiliser ce code.
COPIEZ ET COLLEZ CES MIXINS DANS VOTRE FICHIER:
=font-h1p-style-generator-manual()
body
font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif // google fonts
font-size: 100%
line-height: 1.3em
%headers
line-height: 1em
font-weight: 700
p
line-height: 1.3em
font-weight: 300
@for $i from 1 through 6
h#{$i}
@extend %headers
=media-query-base-font-size-change-generator-manual()
body
font-size: 1.2em
@media screen and (min-width: 680px)
body
font-size: 1.4em
@media screen and (min-width: 1224px)
body
font-size: 1.6em
@media screen and (min-width: 1400px)
body
font-size: 1.8em
=h1p-font-size-generator-auto($h1-fs: 3em, $h1-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6)
$h1-fs: $h1-fs // Set first header element to this size
$h1-step-down: $h1-step-down // Decrement each time by 0.3
$p-same-as-hx: $p-same-as-hx // Set p font-sieze same as h(6)
$h1-fs: $h1-fs + $h1-step-down // Looping correction
@for $i from 1 through 6
h#{$i}
font-size: $h1-fs - ($h1-step-down * $i)
@if $i == $p-same-as-hx
p
font-size: $h1-fs - ($h1-step-down * $i)
// RUN ONLY THIS MIXIN. IT WILL TRIGGER THE REST
=config-and-run-font-generator()
+font-h1p-style-generator-manual() // Just a place holder for our font style
+media-query-base-font-size-change-generator-manual() // Just a placeholder for our media query font size
+h1p-font-size-generator-auto($h1-fs: 2em, $h1-step-down: 0.2, $p-same-as-hx: 5) // Set all parameters here
CONFIGUREZ TOUS LES MIXINS À VOS BESOINS - JOUEZ AVEC! :) ET PUIS L'APPELER EN HAUT DE VOTRE CODE SASS RÉEL AVEC:
+config-and-run-font-generator()
Cela générerait cette sortie. Vous pouvez personnaliser les paramètres pour générer différents ensembles de résultats. Cependant, comme nous utilisons tous des requêtes multimédias différentes, certains mixins devront être modifiés manuellement (style et média).
CSS GÉNÉRÉ:
body {
font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 100%;
line-height: 1.3em;
word-wrap: break-word; }
h1, h2, h3, h4, h5, h6 {
line-height: 1em;
font-weight: 700; }
p {
line-height: 1.3em;
font-weight: 300; }
body {
font-size: 1.2em; }
@media screen and (min-width: 680px) {
body {
font-size: 1.4em; } }
@media screen and (min-width: 1224px) {
body {
font-size: 1.6em; } }
@media screen and (min-width: 1400px) {
body {
font-size: 1.8em; } }
h1 {
font-size: 2em; }
h2 {
font-size: 1.8em; }
h3 {
font-size: 1.6em; }
h4 {
font-size: 1.4em; }
h5 {
font-size: 1.2em; }
p {
font-size: 1.2em; }
h6 {
font-size: 1em;
}