web-dev-qa-db-fra.com

Nom de classe de la variable SCSS

Sur mon site Web, je fais constamment style = "font-size: #ofpx;". Cependant, je me demandais s’il y avait un moyen de le faire avec scss pour que, lorsque je déclare une classe, cela change également la taille de la police. Par exemple:

<div class='col-lg-4 font-20'>whatever here</div>

et cela changerait ma taille de police à 20. Si je faisais font-30, cela changerait ma taille de police à 30 et etc ...

Ce que j'ai jusqu'ici:

.font-#{$fontsize} {
      font-size: $fontsize;
}
csssass
17
Gustavo Fulton

Cela ne peut pas être fait pour des tailles arbitraires. La nature du SCSS est qu’il doit être ajusté en CSS avant il est appliqué au code HTML. Ce que vous demandez, cependant, est essentiellement de créer des règles au moment de l’exécution plutôt que lors de la compilation.

Ce que vous demandez, c'est aussi une odeur de code . Ça sent comme si ton balisage n'est pas assez sémantique. Le but d'une classe CSS est de regrouper des objets ayant des caractéristiques similaires, mais vous les utilisez plutôt pour décrire les styles qu'elles confèrent. Je suggérerais de revenir en arrière et de reconsidérer ce que vous voulez vraiment.

Vous avez évidemment des détails sur certains éléments qui dépendent du contexte. Par exemple, vous appliquez peut-être ces règles aux boutons lorsque vous souhaitez les rendre plus petits ou plus grands que d'habitude. Vous devez identifier les scénarios dans lesquels les boutons changent. Peut-être sont-ils 20% plus petits s’ils sont dans un dialogue modal? Ensuite, écrivez vos règles .button normales et créez également des règles pour .modal .button qui les rendent plus petites.

Si vous êtes certain de vouloir définir la taille de la police pour chaque élément du code HTML, continuez simplement à utiliser des styles intégrés. La seule raison pour laquelle le style en ligne est mal vu est parce qu'il combine la logique de modèle et de vue de manière à nuire à la réutilisabilité; Cependant, ce que vous demandez le fait exactement de la même manière. C'est pour cela que les styles inline ont été conçus. Ne réinventez pas la roue.

Ceci étant dit, vous pouvez utilisez des boucles sass pour générer automatiquement des classes d’entiers compris dans une plage. Par exemple:

@for $i from 1 through 100 {
  .font-#{$i} {
    font-size: #{$i}px;
  }
}

Ce n'est pas une bonne idée. En termes pragmatiques, il n'offre aucun avantage par rapport à l'utilisation de styles en ligne et, avec de larges plages, le fichier résultant sera plus volumineux (ce qui affecte les temps de chargement du site Web).

Voici un exemple exécutable jsFiddle de cette technique.

32
Woodrow Barlow

Les mixins sont excellents, mais si vous voulez une classe util (attachez une classe à un élément, appliquez la taille de la police à celle-ci, faites une boucle for dans SCSS comme si ..

@for $i from 1 through 4 {
    $fontsize: 10px * $i;
    .font-#{$i} { 
        font-size: $fontsize;
        }
}

compile pour

.font-1 {
  font-size: 10px;
}

.font-2 {
  font-size: 20px;
}

.font-3 {
  font-size: 30px;
}

.font-4 {
  font-size: 40px;
}

Si vous voulez que la classe corresponde au nombre de pixels ...

@for $i from 1 through 4 {
    $base: 10;
    $fontsize: $base * $i;
    .font-#{$fontsize} { 
        font-size: $fontsize + 0px;
        }
}

Qui compile à

.font-10 {
  font-size: 10px;
}

.font-20 {
  font-size: 20px;
}

.font-30 {
  font-size: 30px;
}

.font-40 {
  font-size: 40px;
}

Exemple de codepen.

6
Zach Herring

Bien entendu, les balises en ligne style sont de mauvaise forme. Alors oui, vous devriez ajouter des classes pour la taille de la police, ou simplement définir la taille de la police sur les éléments dont vous avez besoin au fur et à mesure. Dépend de vous. Si vous le souhaitez, vous pouvez utiliser un mixin comme ceci:

@mixin font-size($size) {
  font-size: $size;
}

.some-div { @include font-size(10px); }

Mais c'est probablement exagéré, sauf si vous obtenez un groupe de règles qui vont généralement de pair.

0
jmargolisvt

Vous pouvez utiliser des mixins comme ceci

    @mixin font($fontsize) {
      font-size: $fontsize;
    }

    .box { 
        @include font(10px); 
    }
0
Rudi Urbanek