SASS縮小器可以刪除重複樣式嗎？

我知道CSS規則相當複雜;然而，優化程序不能簡單地通過多種方式簡化以下css嗎？如果是這樣，那麼在rails-sass寶石中有沒有選擇它？SASS縮小器可以刪除重複樣式嗎？

span { 
    background: red; 
    color: green; 
} 

.test2 { 
    background: red; 
    color: green; 
} 

span { 
    background: green; 
    color: inherit; 
} 

.test2 { 
    background: inherit !important; 
    color: inherit; 
    color: inherit; 
    color: inherit; 
}

附加的上下文：

爲了澄清，我想提出以下建議，以及...

來源：

span { 
    background: red; 
} 
span { 
    background: orange; 
    color: green; 
} 
span { 
    background: yellow; 
} 
span { 
    background: blue; 
    color: green; 
}

而且，我想一個編譯器生成以下內容：

span { 
    background: blue; 
    color: green; 
}

我知道存在多餘的樣式，但是當連續修改樣式表時會發生這種情況很多次，而且我想消除死代碼。

來源

2012-06-22 Marshall Anschutz

你可以通過運行[CSSTidy]輸出的CSS（http://csstidy.sourceforge.net/）或喜歡。 – Whymarrh

不，我知道的，上海社會科學院只會格式化你的代碼不同，但不能優化爲您http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#output_style

擴展在Whymarrh的評論，CSSTidy有一個命令行工具，可以集成在構建過程中或類似， http://packages.ubuntu.com/hardy/csstidy

來源

2012-09-24 02:11:58 leopic

csstidy的問題在於它沒有多年維護，所以我不相信它會支持較新的媒體選擇器，以及漸變和響應式設計所需的多種背景屬性。 –

這是對的，但是，你也可以設置一個標誌來忽略未知的語法，所以至少會保持不變，我昨天進行了一些測試，針對一組10個導出的CSS文件，結果令人失望，結果令人失望情況下，我們有大約1％的壓縮增益，請記住，我們公司在性能方面非常肛門，所以#ffffff（而不是#fff）是不可接受的，你的里程可能會有所不同， d建議您至少將它作爲試用試用:) – leopic

如果安裝了node.js，則會出現[csso]（https://github.com/css/csso），它看起來像是在積極維護。手冊解釋了它將做什麼優化。 – rwb

優化你的代碼總是使用 '--style壓縮' 選項，在您的表彰線

例如：

sass --watch screen.sass --style compressed

SASS讓你的生活變得更加輕鬆，但在目前的狀態下，除非你能寫出紅寶石代碼並且將自己寫出來，否則不可能有完美的優化。有一些解決方法可能在您的示例中看起來很尷尬，但它背後的想法可以節省您的時間，而無需親自輸入。

例如您或許可以通過優化你的代碼（空格也應該被刪除）這些方法：的

span, .test2 { 
    background: red; 
    color: green; 
}

代替：

span { 
    background: red; 
    color: green; 
} 

.test2 { 
    background: red; 
    color: green; 
}

純CSS，因爲它是兼容SASS中較新的SASS語法您可以通過以下方式完成：

%theme-red-green { // i couldn't came up with better naming :) 
    background: red; 
    color: red; 
} 

span { 
    @extend %theme-red-green 
} 
.test2 { 
    @extend %theme-red-green 
}

即使我們沒有用逗號分隔的風格，就像您在您的純CSS它會產生最優化代碼：

span, .test2 { 
    background: red; 
    color: green; 
}

，而不是重複相同的屬性和值：

span { 
    background: red; 
    color: green; 
} 

.test2 { 
    background: red; 
    color: green; 
}

你有沒有注意到我使用'％theme-'而不是'.theme-'，這會在輸出中產生差異。類別選擇器將包含在您的輸出文件中

並且即使在壓縮模式下也不會刪除具有「繼承」值的兩個不必要的「顏色」屬性。

來源

2012-12-09 17:07:17 orustammanapov

問題的關鍵不是如何優化編寫代碼，而是讓編譯器「修復」css的冗餘行。 –

@MarshallAnschutz你曾經與SASS合作過嗎？你認爲我的回答有什麼錯誤？我的重點在於告訴編譯器修復它，當我回答這個問題的時候無法自行解決問題。這樣它就優化了你的代碼。有人覺得它有用，所以不要低估我，給他一個更好的答案，我會很高興地給你一個贊成票，因爲最終重要的是幫助人們從你那裏得到幫助。 – orustammanapov

如果你看看我的原始問題，有4跨度的來源可以減少到1跨度。顯然，我可以這樣寫，但有時候使用Bootstrap這樣的庫，你會逐字地覆蓋大量樣式，從而導致重複的樣式。我的問題是如何讓編譯器自動從文檔中刪除未使用的CSS。 –

我想我可能已經找到一種方法，至少找到CSS和青菜/更少模板的重複的樣式：

開源csscss寶石http://zmoazeni.github.io/csscss/

這似乎是能夠檢測重複，雖然我不得不周圍bootstrap-sass gem的CSS與我的CSS資產不在同一個文件夾。

從文檔，你可以運行：

$ csscss -v path/to/styles.css

或

$ csscss -v path/to/styles.css.scss

來源

2013-04-15 16:51:18

「，雖然我不得不圍繞bootstrap-sass gem的css與我的css資產不在同一個文件夾中進行猴子補丁。」 - 請在[github]（https://github.com/zmoazeni/csscss/issues）上提出問題。我想知道你正在嘗試什麼，哪些不起作用。 –

SASS縮小器可以刪除重複樣式嗎？

回答

相關問題