Biến SCSS dưới dạng @extend class

Question

Ý tưởng của tôi là tôi muốn viết các lớp học im lặng cho input[type=text], input[type="password"] và input[type=submit]. Tôi sau đó sẽ @extend chúng trong một mixin bằng cách đi qua hem thông qua như một biến.

Trình phân tích cú pháp của tôi đang ném lỗi này;

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

Đây là mã của tôi;

%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; 
} 

Bất kỳ trợ giúp sẽ được đánh giá

Answer 1

hãy thử sử dụng các biến suy

@extend #{$type}; 

Thông tin thêm về SASS Reference

Answer 2

Trong khi câu trả lời Fabrizio là chính thức đúng, hãy xem xét không đi theo cách đó.

Có một quy tắc tuyệt vời trong lập trình dưới mọi hình thức: "hãy đơn giản, ngu ngốc!" aka KISS.

Mặc dù SASS cung cấp các tiện ích nâng cao như mở rộng và kết hợp, điều đó không có nghĩa là bạn nên sử dụng chúng càng nhiều càng tốt. Không làm cho mã của bạn phức tạp khi bạn không phải!

Mã này thực hiện chính xác những gì bạn muốn: áp dụng phong cách để input[...] selectors:

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%); 
    } 
} 

Nếu bạn muốn áp dụng phong cách để tùy chỉnh các lớp học/id, hãy xem xét cách tiếp cận này:

///////////////// 
// 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; 
} 

Demo: http://sassbin.com/gist/5956909/