如何在sass中簡寫這個css規則?如何在Sass中編寫CSS規則?
.w_50 .grid li .player .approved,.w_51 .grid li .player .approved{margin: 3px 3px 6px 9px;}
如何在sass中簡寫這個css規則?如何在Sass中編寫CSS規則?
.w_50 .grid li .player .approved,.w_51 .grid li .player .approved{margin: 3px 3px 6px 9px;}
簡單的答案,你不能,不是真的。像SASS這樣的優點是你可以省略重複同樣的事情,但是對於單一的CSS樣式規則來說,幾乎沒有什麼優勢。你可以做的最多的是:
.w_50, .w_51 {
.grid li .player .approved { margin: 3px 3px 6px 9px; }
}
但是很難說這是短的。在SASS變得有用的地方,如果你嵌套你的屬性並定義它們的風格,那麼你就不必重複自己。例如:
article {
padding: 20px;
h1 { color: red; }
p { margin-bottom: 20px; }
}
這將輸出:
article { padding: 20px; }
article h1 { color: red; }
article p { margin-bottom: 20px; }
此外,雖然,沒有多少努力,這裏保存,但你可以看到,當你窩一對夫婦更多的事情,或者當你的樣式表得到擴張,你做不是必須在每條規則前面重複寫article
。最重要的是,SASS(以及LESS)也允許一些簡單的邏輯來重複某些事情,或者使用變量(這樣可以很容易地在不必查找顏色的每個實例的情況下更改顏色方案)。
閱讀上SASS在sass-lang.com找出有關實際主要改進預處理器可以提供給你。
很酷的解決方案。謝謝! –
你的意思是,短?不顯示....?¿ –
是的,對不起,我的英文:) –
沒有辦法實際_shorten_ this,因爲所有步驟_do_都需要提及_somewhere_。但是,SASS允許您嵌套所有步驟,並在這些圖層內添加多個樣式而不重複父級選擇器,因此它的輸出將包含類似上面的內容,但您仍需要定義所有規則和級別,即使在SASS中也是如此。 – somethinghere