Как писать правила css в Sass?

Question

Как писать в краткой форме эти правила css в sass?

.w_50 .grid li .player .approved,.w_51 .grid li .player .approved{margin: 3px 3px 6px 9px;} 

Answer 1

Просто ответьте, вы не можете, не совсем. Преимуществом чего-то вроде 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 (и МЕНЬШЕ) также позволяют простую логику повторять вещи или использовать переменные (что упростит изменение цветовой схемы без необходимости поиска каждого экземпляра цвета).

Читайте на SASS в sass-lang.com, чтобы узнать о фактическихосновных улучшений препроцессор может предоставить вам.