Sass

Question

으로 재사용 가능한 방식으로 특정 입력 유형의 스타일 지정 HTML5 입력 유형 목록을 반환하는 mixin 함수를 갖고 싶습니다. 한 곳에서이 작업을 관리하고 싶습니다. 새로운 유형이 나오면 코드의 다른 곳이 아닌 모든 기능을 변경하십시오.

mixins는 CSS의 중괄호 외부에서 사용할 수있는 문자열을 반환하도록 설계되지 않은 것 같습니다.

사용에

/* 
* Set all the up-and-coming input text types here for easier reference 
* Does not include types that are not meant to be displayed full width, such as: 
     type=number, type=range, type=date, type=color 
*/ 
@mixin input_text_types($focus:false) { 
    @if $focus { 
     @return #{input[type=text]:focus, input[type=password]:focus, input[type=search]:focus, input[type=email]:focus, input[type=url]:focus, input[type=tel]:focus}; 
    } @else { 
     @return #{input[type=text], input[type=password], input[type=search], input[type=email], input[type=url], input[type=tel]}; 
    } 
} 

: 나는 error sass/style.scss (Line 134 of sass/_functions.scss: Invalid CSS after "...@return #{input": expected "}", was "[type=text]:foc...")

나 '처럼 얻을

@include input_text_types() { 
    width: 80%; 
} 

오류를 여기 내 믹스 인 (현재 오류를 반환)하고 나는 그것을 사용하는 거라고하는 방법의 예입니다 나는 @return 지시어를 사용하거나 사용하지 않고 출력 형식을 지정하려고 시도했으며 여러 가지 방법으로 문자열 값을 작은 따옴표로 묶고 해시로 중괄호로 묶습니다. 누구든지 전에 이런 걸하려고합니까?

Answer 1

변수를 사용하여 선택기를 포함하면 문제를 해결하는 것이 더 나을 수 있습니다. 믹스 인을 사용하면 비슷한 요소로 체인을 연결하는 기능을 잃어 버리게됩니다.

$form-input-text: 'input[type="text"], input[type="password"], input[type="search"], input[type="email"], input[type="tel"], input[type="url"]'; 
$form-input-buttons: 'input[type="submit"], input[type="reset"], input[type="button"], button'; 
$form-input-dates: 'input[type^="date"], input[type="month"], input[type="week"], input[type="time"]'; 
$form-input-not-radio: 'input:not([type="radio"]):not([type="checkbox"])'; 

#{$form-input-text}, textarea { 
    @include border-radius(.25em); 
    border: $form-input-border; 
} 

#{$form-input-text}, textarea, input[type="file"] { 
    width: $form-input-width; 
    max-width: 100%; 
    -webkit-appearance: textfield 
} 

#{$form-input-buttons} { 
    padding: .25em .5em; 
} 

Answer 2

GitHub의 Chris Eppstein과 Twitter의 @compass 덕분에 그는 with a gist을 정리하여 기능이 작동하는 방식과 믹스 인을 혼동하게 만들었습니다.

@mixin input_text_types($focus:false) { 
    @if $focus { 
     input[type=text]:focus, input[type=password]:focus, input[type=search]:focus, input[type=email]:focus, input[type=url]:focus, input[type=tel]:focus { 
     @content; 
     } 
    } @else { 
     input[type=text], input[type=password], input[type=search], input[type=email], input[type=url], input[type=tel] { 
      @content; 
     } 
    } 
} 

그것은 여전히 ​​@include 지시어와 같은 방법으로 사용되는 다음 @content 지침으로, 내가 thusly 히 원하는 것을 얻을 수 있습니다.

@mixin과 @function의 약간의 차이점에 대해서는 Pure SASS Functions을 읽어보십시오.