Stili CSS annidati ~ Dove ho visto questo concetto prima?

Question

Stili CSS annidati ~ Dove ho visto questo concetto prima?

#1 da (21 voti)
#2 da (6 voti)

8

Non riesco a trovarlo ora, ma l'ho già letto su vari blog che parlano dell'argomento. Darò un esempio e spero sia chiaro (anche se potrebbe non chiarire nulla).

Dato questo pezzo di markup (arbitrariamente apposta):

<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>

Mentre il CSS potrebbe leggere in questo modo:

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

Potrebbe anche essere scritto in questo modo:

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

Ma non ricordo di aver visto dove è stato discusso o se è qualcosa in lavorazione. Qualcuno sa di cosa diavolo sto parlando?

E non penso che questa sia una domanda SO o l'avrei messa su SO.

html css

posta jcolebrand 02.12.2010 - 23:11

fonte

2 risposte

6

Inoltre, sass e scss supportano l'annidamento.

Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

Sass has two syntaxes. The most commonly used syntax is known as “SCSS” (for “Sassy CSS”), and is a superset of CSS3’s syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss.

The second, older syntax is known as the indented syntax (or just “.sass”). Inspired by Haml’s terseness, it’s intended for people who prefer conciseness over similarity to CSS. Instead of brackets and semicolons, it uses the indentation of lines to specify blocks...

risposta data 02.12.2010 - 23:36

fonte

Leggi altre domande sui tag html css

Condivisione dei casi di test di sviluppo (unità e integrazione dello sviluppo) con il team QA (test)? Front-end scritto nelle lingue utilizzate per il back-end! [chiuso]

score 21 · Accepted Answer

MENO CSS

dynamic stylesheet language designed by Alexis Sellier. It is influenced by Sass and has influenced the newer "SCSS" syntax of Sass, which adapted its CSS-like block formatting syntax. LESS is open-source. Its first version was written in Ruby, however in the later versions, use of Ruby has been deprecated and replaced by JavaScript. The indented syntax of LESS is a nested metalanguage, as valid CSS is valid LESS code with the same semantics. LESS provides the following mechanisms: variables, nesting, mixins, operators and functions; the main difference between LESS and other CSS precompilers being that LESS allows real-time compilation via LESS.js by the browser.] LESS can run on the client-side and server-side, or can be compiled into plain CSS...

MENO usa quegli stili nidificati.

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