SCSS密新追加::造型

-1

@mixin item { 
    /* Element Styling */ 
    ::before { 
    /* Element ::Before Styling */ 
    } 
    :hover::before { 
    /* Hover animation to be performed by the before when the main element is in a hover state */ 
    } 
} 

.item { 
    @include item; 
}

之前，此SCSS示例生成CSS以下SCSS密新追加::造型

.item { 
    /* Element Styling */ 
} 
    item ::before { 
    /* Element ::Before Styling */ 
    } 
    item :hover::before { 
    /* Hover animation to be performed by the before when the main element is in a hover state */ 
    }

因爲如何混入工作的性質，它增加了一個空間，這將導致那些item和::before之間不以預期的方式彼此關聯。當這個空間被刪除時，該元素的行爲如預期。

我將如何使用相同或類似的方法來實現以下輸出？

.item { 
    /* Element Styling */ 
} 
    item::before { 
    /* Element ::Before Styling */ 
    } 
    item:hover::before { 
    /* Hover animation to be performed by the before when the main element is in a hover state */ 
    }

如果你不能分辨是什麼，現在item ::before爲item::before等等...

來源

2015-07-03 b2550

哦，天哪@Nit，只是有點來不及回答。在Oriol之後。 – b2550

這是重複的，但是由於題目的原因，我找不到那個問題，問題和答案也不像前面那樣困難。通常，越短越好。 – b2550

使用&：

Referencing Parent Selectors: &

有時是有用以其他方式使用嵌套規則的父選擇器。 [...]在這些情況下，您可以明確指定使用& 字符插入父選擇器的位置。

@mixin item { 
    /* Element Styling */ 
    &::before { 
    /* Element ::Before Styling */ 
    } 
    &:hover::before { 
    /* Hover animation to be performed by the before when the main element is in a hover state */ 
    } 
}

來源

2015-07-03 23:06:53 Oriol

您正在尋找的符號：

@mixin item { 
    /* Element Styling */ 
    &::before { 
    /* Element ::Before Styling */ 
    } 
    &:hover::before { 
    /* Hover animation to be performed by the before when the main element is in a hover state */ 
    } 
} 

.item { 
    @include item; 
}

來源

2015-07-03 23:06:57 Nit

SCSS密新追加::造型

回答

相關問題