SCSS變量作爲@extend類

我的想法是我想爲input[type=text],input[type="password"]和input[type=submit]編寫無聲類。然後我將@extend作爲一個變量傳入下邊。SCSS變量作爲@extend類

我的解析器拋出這個錯誤;

Syntax error: Invalid CSS after " @extend ": expected selector_sequence, was "$type;"

這是我的代碼;

%text { 
    (text styling) 
} 

%password { 
    @extend %text; 
} 

%submit { 
    padding: .5em; 
    background-color: $button-color; 
    border: none; 
    cursor: pointer; 
    color: white; 
    border: 1px solid darken($button-color, 20%); 
    &:hover { 
     @include transition; 
     background-color: darken($button-color, 10%); 
    } 
} 

@mixin input($type) { 
    margin-bottom: 1.5em; 
    margin-left: 0; 
    outline: none; 
    @extend $type; 
}

任何幫助，將不勝感激

來源

2013-07-09 Kevin Lewis

嘗試使用上SASS Reference

來源

2013-07-09 10:47:47 fcalderan

它不再拋出一個錯誤，但現在是當我試圖擴展。我在使用'@extend input（％text）'這一行;'出現的錯誤是'@extend input「後的無效CSS：expected」}「，was」（％text）;「' –

您可以'擴展一個mixin，只有一個簡單的選擇器（class，id，element等）。另外，當你將選擇器作爲參數傳遞給一個mixin時，你需要引用你的選擇器（例如'@include input（'％foo'）'）。 – cimmanon

變量插值

@extend #{$type};

更多信息雖然法布里奇奧的回答是形式上正確的，認爲不會這樣。

在編程方面有一個很好的規則：「保持簡單，愚蠢！」又名KISS。

雖然SASS提供了擴展和mixin等先進的設施，但這並不意味着您應儘可能多地使用它們。當你不需要時，不要讓你的代碼變得複雜！

此代碼不正是你想要的東西：應用樣式input[...]選擇：

input { 
    margin-bottom: 1.5em; 
    margin-left: 0; 
    outline: none; 
} 

input[type=text], input[type=password] { 
    font-family: Verdana; // Text styles 
} 

input[type=submit] { 
    padding: .5em; 
    background-color: $button-color; 
    border: none; 
    cursor: pointer; 
    color: white; 
    border: 1px solid darken($button-color, 20%); 
    &:hover { 
     @include transition; 
     background-color: darken($button-color, 10%); 
    } 
}

如果要應用樣式自定義類/ IDS，考慮這個方法：

///////////////// 
// Silent classes 
///////////////// 

%input { 
    margin-bottom: 1.5em; 
    margin-left: 0; 
    outline: none; 
} 

%text { 
    @extend %input; 
    font-family: Verdana; 
} 

%password { 
    @extend %text; 
} 

%submit { 
    @extend %input; 
    padding: .5em; 
    background-color: $button-color; 
    border: none; 
    cursor: pointer; 
    color: white; 
    border: 1px solid darken($button-color, 20%); 
    &:hover { 
     @include transition; 
     background-color: darken($button-color, 10%); 
    } 
} 



/////////////////////////// 
// Applying silent classes: 
/////////////////////////// 

.some .weirdly .nested input[type=text] { 
    @extend %text; 
} 

.password { 
    @extend %password; 
} 

#the-submit-button { 
    @extend %submit; 
}

演示： http://sassbin.com/gist/5956909/

來源

2013-07-09 12:19:29

SCSS變量作爲@extend類

回答

相關問題