使用僞選擇器擴展Sass

我正在使用指南針來管理mac osx上的一些sass文件。我有這些文件：使用僞選擇器擴展Sass

sass/ 
     screen.scss 
      partials folder/ 
     ... 
      _fonts.scss 
      _functions.scss 
     ...

在字體我有這樣的規則，我想重用@extend。

//fonts.scss 
.icon-ab-logo, { 
font-family: 'icomoon'; 
speak: none; 
font-style: normal; 
font-weight: normal; 
font-variant: normal; 
text-transform: none; 
line-height: 1; 
-webkit-font-smoothing: antialiased; 
} 
.icon-ab-logo:before { //i want to reuse this. 
content: "\e000"; 
}

在功能我有這個screen.scss：

.logo { 
position: absolute; 
top: 0; 
bottom: 0px; 
z-index: 500; 
width: 9.5em; 
background: $logo; 
@include transition(all 0.2s); 
    &:after{ 
    @include icon(".icon-ab-logo"); 
    } 
}

終於在functions.scss我稱之爲：

@mixin icon($icon){ 
     font-family: 'icomoon'; 
     speak: none; 
     font-style: normal; 
     font-weight: normal; 
     font-variant: normal; 
     text-transform: none; 
     line-height: 1; 
     -webkit-font-smoothing: antialiased; 
     @extend #{$icon}:before; //<- this is the problem, no errors just isn't parsed. 
    }

是否有參考.icon-AB-方式標誌：在使用mixin之前？解決方法？感謝您的閱讀。

來源

2013-06-19 Simon

當你想要擴展僞類或僞元素時，你只需要擴展父選擇器（即冒號前的所有內容）。

%foo:before { 
    color: red; 
} 

.bar { 
    @extend %foo; 
}

生成：

.bar:before { 
    color: red; 
}

因此，對於您的實例，你想做的事是這樣的：

.icon-ab-logo, { 
    font: 100%/1 'icomoon'; // use the shorthand 
    speak: none; 
    text-transform: none; 
    -webkit-font-smoothing: antialiased; 
} 

%foo:before, .icon-ab-logo:before { //i want to reuse this. 
    content: "\e000"; 
} 

@mixin icon($icon){ 
    font: 100%/1 'icomoon'; // use the shorthand 
    speak: none; 
    text-transform: none; 
    -webkit-font-smoothing: antialiased; 
    @extend #{$icon}; 
} 

.bar { 
    @include icon('%foo'); 
}

要知道，你的mixin產生的風格很多，所以它不適合廣泛的重用。如果要延長這一點，將會更有意義。

來源

2013-06-19 11:30:29 cimmanon

這是行不通的。但是，如你所說，這不是一個好主意。感謝您花時間回答我的問題。 – Simon

似乎SASS在擴展中不適用於僞元素。圍繞這一問題

工作是這樣的：

%before-icon 
    color: red 

.foo 
    /* Some styles here */ 

    &:before 
    @extend %before-icon

結果：

.foo:before { 
    color: red; 
} 

.foo { 
    /* Some styles here */ 
}

此外，它看起來像你的事情過於複雜。你會發現你的代碼難以掌握和維護。

PS你應該保持mixin在_mixins.scss。

來源

2013-06-19 10:16:22

使用僞選擇器擴展Sass

回答

相關問題