it-swarm-fr.com

Styles CSS imbriqués ~ Où ai-je vu ce concept avant?

Je ne trouve pas cela maintenant mais je l'ai déjà lu sur divers blogs discutant du sujet. Je vais donner un exemple et, espérons-le, il est clair (bien que cela ne puisse rien clarifier du tout).

Compte tenu de ce morceau de balisage (arbitraire exprès):

<div class="myWrapper">
  <a href="somepage.url" class="img">
    <img url="someimage.url">
  </a>
</div>
<div class="yourWrapper">
  <a href="somepage.url" class="img">
    <img url="someimage.url">
  </a>
</div>

Alors que le CSS pouvait lire comme ceci:

.myWrapper .img img {border: thin black solid;}
.myWrapper .img {margin:10px;}
.yourWrapper .img img {border: thick red dashed;}
.yourWrapper .img {margin:20px;}

Il pourrait aussi être écrit comme ceci:

.myWrapper {
  .img { 
    margin:10px;
    img {
        border: thin black solid;
    }
  }
}
.yourWrapper {
  .img { 
    margin:10px;
    img {
        border: thick red dashed;
    }
  }
}

Mais je ne me souviens pas de voir où cela a été discuté ou si c'est quelque chose dans les travaux. Quelqu'un sait quoi diable je parle?

Et je ne pense pas que ce soit un SO question ou j'aurais dit cela.

8
jcolebrand

moins CSS

langue de la feuille de style dynamique conçue par Alexis Sellier. Il est influencé par SASS et a influencé la nouvelle syntaxe "SCSS" de SASS, qui a adapté sa syntaxe de formatage de bloc de type CSS. Moins est open-source. Sa première version a été écrite dans Ruby, mais dans les versions ultérieures, l'utilisation de Ruby a été obsolète et remplacée par JavaScript. La syntaxe en retrait de moins est une métalliquage non imbriquée , comme CSS valide est valide moins de code avec la même sémantique. Moins fournit les mécanismes suivants: variables, nidification, mixes, opérateurs et fonctions; la principale différence entre moins et d'autres précompileurs de CSS étant que moins la compilation en temps réel via moins. par le navigateur.] Moins peut exécuter sur le côté client et le côté serveur, ou peut être compilé en CSS uni ...

Moins utilise ces styles imbriqués.

#header {
  color: red;
  a {
    font-weight: bold;
    text-decoration: none;
  }
}
21
Josh K

En outre, Sass et SCSS Soutien à la niche.

SASS est une extension de CSS3, ajoutant des règles imbriquées, des variables, des mélanges, un héritage sélecteur, etc. Il est traduit par des CS standard bien formatés à l'aide de l'outil de ligne de commande ou d'un plug-in Web-Framework.

Sass a deux syntaxes. La syntaxe la plus couramment utilisée est connue sous le nom de "SCSS" (pour "Sassy CSS") et est une superset de la syntaxe de CSS3. Cela signifie que chaque feuille de style CSS3 valide est également valide SCSS. Les fichiers SCSS utilisent l'extension .scss.

La seconde, la syntaxe plus ancienne est connue sous le nom de syntaxe indentée (ou simplement ".sass"). Inspiré de la treesseness de Haml, il est destiné aux personnes qui préfèrent la concision sur la similitude envers la CSS. Au lieu de parenthèses et de points-virgules, il utilise l'indentation des lignes pour spécifier des blocs ...

6
Mladen Jablanović