2010-12-22 82 views
0

似乎這將是一個很好的方式來讓CSS結構化。有沒有可能導致這種不可能的事情?爲什麼不在CSS中嵌套?

我想到的是類似以下內容:

table#myTable{ 
    thead{ 
     color:red; 
    } 
    tbody{ 
     color:blue; 
     td.title{ 
      background-color: green; 
     } 
    } 
} 
+4

查看http://lesscss.org/ – Emmett 2010-12-22 16:12:43

+3

和http://sass-lang.com/ – 2010-12-22 16:15:27

回答

0

因爲在規範寫作沒有人大概認爲這個想法的時候,還是沒有足夠的人認爲這將是有益的。

您可以使用SASS,雖然:http://sass-lang.com/

示例語法:

​​
2

我不能回答爲什麼 CSS不具備此功能。有一些系統,比如LESS(http://lesscss.org/)可以讓你編寫這樣的結構,然後將它們「編譯」爲常規的CSS。在不到

嵌套例如:(從該鏈接)

嵌套規則 而不是構建長選擇名稱來指定繼承,欠你可以選擇其他的只是裏面築巢選擇。這使得繼承清晰並縮短了樣式表。

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

..正如其他海報所說,SASS是另一種選擇。我自己並沒有使用它們,所以不能告訴你哪個更好,雖然看起來不像SASS的不同語法更像「CSS +」。 – 2010-12-22 16:17:58

0

這將是很好,但這是CSS設計和組織的方式不支持。

但是,有些CSS預處理器允許您以此方式編碼,然後將其處理爲真實有效的CSS - 例如LessCSS

0

您可以根據您的文檔結構仍然縮進您的選擇:

body { 
    font-size: 1.4em; 
    color: #666; 
} 

    #Header { 
     /* stuff */ 
    } 

     #Header ul { 
      /* stuff */ 
     } 

      #Header il { 
       /* stuff */ 
      } 

    #Content { 
     /* stuff */ 
    } 

除了零星的背景圖像:網址(「」);屬性通常不會運行很長,並且在開發過程中可能會幫助您保持組織。我個人更喜歡無縮進的CSS,因爲我經常讓Textmate重新格式化我的樣式表。