Libsass: 새로운 CSS 필터 기능이 내장 Sass 기능과 충돌합니다.

네, 나도 이걸 쳤어요.

이것도 치는 것.

: +1 :

이것에 대한 소식이 있습니까?

현재 @extend 작업 중이지만 휴일 전에이 작업을 수행하려고합니다!

이 문제도 있습니다.

: +1 :

darken() 및 saturate() 도 영향을 받는지 확인합니다. 해결 방법이 있습니까?

해결 방법을 찾았습니다. 그 동안이 기능을 사용할 수 있습니다. 드롭 인 솔루션이어야합니다.

<strong i="6">@function</strong> grayscale($value) {
  <strong i="7">@return</strong> #{ "grayscale(" + $value + ")" };
}

원하는 경우 공급 업체 접두사도 지정할 수 있습니다.

<strong i="11">@mixin</strong> filter($properties) {
  // Your vendor prefixing stuff here, I am using Bourbon:
  <strong i="12">@include</strong> prefixer(filter, $properties, webkit moz spec);
}

그런 다음 다음과 같이 작성할 수 있습니다.

<strong i="16">@include</strong> filter(grayscale(100%));

여기에 참고 용으로 넣으십시오.
https://developer.mozilla.org/en-US/docs/Web/CSS/filter

@kennethormandy 두 개의 매개 변수를 사용하는 SASS 함수에 대한 해결 방법을 찾았습니까?

<strong i="7">@function</strong> darken($color, $amount) {
  <strong i="8">@return</strong> #{ "darken(" + $color + "," + $amount ")" };
}

.selector {
    border: 1px solid darken(#f0f1f4, 3);
}

출력 :

border: 1px solid darken(#f0f1f4,3"");

…하지만 실제로 darken 출력해서는 안됩니다. 완전히 새로운 색상 값이어야합니다.

와, darken() 이 (가) 작동하지 않는지 몰랐습니다. @restlessdesign , 사용자 정의 함수를 제거하면 darken() 이미 작동합니다. 따라서 다음과 같이 작성하십시오.

.selector {
    border: 1px solid darken(#f0f1f4, 3);
}

그리고 당신은 얻을 것이다

.selector {
  border:1px solid #e7e9ee;
}

나는 당신이 (이해할 만하게) Sass의 기능을 CSS 필터와 혼합하고 있다고 생각합니다. 내가 준 예제는 CSS Filter 이기 때문에 작동합니다. Sass의 어둡게 또는 포화 상태를 사용하려는 경우 Sass 문서에 따라 이미 작동합니다. CSS 필터 포화를 사용하려면 내 greyscale() 함수를 기반으로 올바른 방향으로 가고있는 것입니다. CSS darken() 필터가 있으므로 실제로 libsass의 내장 어둡게 기능을 지금 덮어 쓰고 있습니다.

내 실수. 나는 중첩 방법, 그리고 전화 adjust_hue 대신 adjust-hue 로 캐스케이드하는 darken() . 잔인하지만 LibSass가 실제로 오류를보고하거나 조용히 호출을 무시하는 대신 잘못된 출력을 제공한다는 점이 마음에 듭니다! 잘못된 경보로 죄송합니다.

+1
해결 방법이 잘 작동하지만 (@kennethormandy에게 감사드립니다) 고쳐지면 좋을 것입니다.

이것에 대한 소식이 있습니까? 작동하지만 위에 제공된 해결 방법으로 코드를 난독 화하지 않는 것이 정말 좋을 것입니다.

잘 해결책을 찾고 =)

+1

+1

+1

해결 방법을 위해 @kennethormandy 에게 감사드립니다.

+1. 그건 그렇고 : 솔루션에 대해 @kennethormandy 에게 감사드립니다.

이것에 대한 문제도 방금 열고 닫았습니다. 겹치는 구문과 같은 기능을 점점 더 많이 사용하기 위해 CSS의 근본적인 변화가 있기 때문에 이것을 정리하는 것이 좋을 것입니다.

예 @kennethormandy , 해결 방법 아이디어에 감사드립니다.하지만 그렇게 할 때 실제 grayscale() 함수를 종료하면 끔찍합니다! 나는 이것에 대한 진정한 수정이 곧 올기를 바랍니다.

다른 해결 방법 : filter: invert() 대신 filter: #{"invert()"} . 따옴표 안에 원하는 것을 넣을 수 있으며 그대로 출력됩니다.

좋아, 우리가 3.0에서 이것을 얻을 수 있는지 보자.

@tamlyn 감사합니다! 나는 Scout.app을 사용해 왔는데, 이것은 여전히 ​​이전 버전의 Sass에 있기 때문에, 당신의 해결 방법은 실제로 작동하는 빠르고 간단한 솔루션입니다.

@ 함수 필터 ($ filter, $ value) {
@return # {$ filter} # { "("+ $ value + ")"}
}

$ 접두사 :
"-웹킷-",
"-moz-",
"-ms-",
"-영형-",
없는;

@mixin 접두사 ($ property, $ value) {
$ prefixes {의 @each $ prefix
# {$ prefix} # {$ property} : $ value;
}
}

@restlessdesign 안녕하세요 여러분, 저는 이것을 매우 늦게 알고 있습니다.하지만 방금이 문제가 발생했으며 해결 방법은 필터 함수를 인용 한 다음 unquote ()를 사용하는 것입니다.

그래서 다음과 같이 썼습니다.
* { filter: unquote("filter-function(values)") }

그리고 출력이 작동합니다.