CSS/SASS：SASS中的家長聲明

SASS中的這種情況如何？我不明白它會是什麼樣子。CSS/SASS：SASS中的家長聲明

.icon-button .up-arrow, 
.icon-button .down-arrow { 
    background-image: url('/images/icons/sprites.png'); 
} 

.icon-button .down-arrow { 
    background-position:20px 0; 
} 

.icon-button .up-arrow { 
    background-position:40px 0; 
}

來源

2011-09-14 LadyMcRolly

你可以嘗試這樣的事情：

.icon-button { 
    .down-arrow, .up-arrow { 
     background-image: url('/images/icons/sprites.png'); 
    } 

    .down-arrow { 
     background-position:20px 0; 
    } 

    .up-arrow { 
     background-position:40px 0; 
    } 
}

以及許多其他的東西，SASS允許你添加嵌套的規則。

這可能是在你的情況下矯枉過正，但你也可以參數化一些值。只是爲了演示目的：

$first: 20px; 
$second: 40px; 

.icon-button { 
    .down-arrow, .up-arrow { 
     background-image: url('/images/icons/sprites.png'); 
    } 

    .down-arrow { 
     background-position: $first 0; 
    } 

    .up-arrow { 
     background-position: $second 0; 
    } 
}

如果你真的想想怎麼樣用它，你可以創建可重複使用的功能（或SASS行話「混入」）：

@mixin calcBackground($padding) { 
    background-position: ($padding + 20px) 0; 
} 

.icon-button { 
    .down-arrow, .up-arrow { 
     background-image: url('/images/icons/sprites.png'); 
    } 
    .down-arrow { 
     @include calcBackground(0px); 
    } 

    .up-arrow { 
     @include calcBackground(20px); 
    } 
}

來源

2011-09-14 16:54:51

這是挑剔，但爲了清晰起見，我會指出你的例子在這裏並不意味着與OP的CSS相同的東西。如果有其他元素像''它會共享與「.up-arrow」和「.down-arrow」相同的背景圖片。在OP的情況下，這可能是好的，因爲它是一個精靈圖像，但在其他情況下可能不是。 – jessegavin

@ jessegavin你是對的！讓我調整一下代碼。 –

@ jessegavin ok ...編輯。感謝你指出了我=）我感謝你挑剔。這是很好的知道至少有人閱讀這篇文章=） –

你可以試試這個出作爲好。

.icon-button{ 
    &.up-arrow{ 
    background-image: url('/images/icons/sprites.png'); 
    background-position:40px 0; 
    } 
    &.down-arrow{ 
    background-image: url('/images/icons/sprites.png'); 
    background-position:20px 0; 
    } 
}

我希望它有幫助。謝謝

來源

2016-08-03 13:07:41 user2436289

CSS/SASS：SASS中的家長聲明

回答

相關問題