sass/scssでmixinを作成する

Question

こんにちは私は、ユーザーがページをスクロールして要素が表示されたときにスライドを作成するCSSとJSコードをいくつか持っています。私は、値を変更できるようにmixinを作成する方法を誰かが説明できるかどうかを知りました。

私のHTML要素が私の現在のCSSが私のJSは、私は変数を渡すことができるようにしたいと思い

var $animation_elements = $('.animation-element'); 
var $window = $(window); 

function check_if_in_view() { 
    var window_height = $window.height(); 
    var window_top_position = $window.scrollTop(); 
    var window_bottom_position = (window_top_position + window_height); 

    $.each($animation_elements, function() { 
    var $element = $(this); 
    var element_height = $element.outerHeight(); 
    var element_top_position = $element.offset().top; 
    var element_bottom_position = (element_top_position + element_height); 

    //check to see if this current container is within viewport 
    if ((element_bottom_position >= window_top_position) && 
     (element_top_position <= window_bottom_position)) { 
     $element.addClass('in-view'); 
    } else { 
     $element.removeClass('in-view'); 
    } 
    }); 
} 

$window.on('scroll resize', check_if_in_view); 
$window.trigger('scroll'); 

あるこの

.animation-element { 
    opacity: 0; 
    position: relative; 
} 

.animation-element.slide-left { 
    opacity: 0; 
    -moz-transition: all 500ms linear; 
    -webkit-transition: all 500ms linear; 
    -o-transition: all 500ms linear; 
    transition: all 500ms linear; 
    -moz-transform: translate3d(-100px, 0px, 0px); 
    -webkit-transform: translate3d(-100px, 0px, 0px); 
    -o-transform: translate(-100px, 0px); 
    -ms-transform: translate(-100px, 0px); 
    transform: translate3d(-100px, 0px, 0px); 
} 

.animation-element.slide-left.in-view { 
    opacity: 1; 
    -moz-transform: translate3d(0px, 0px, 0px); 
    -webkit-transform: translate3d(0px, 0px, 0px); 
    -o-transform: translate(0px, 0px); 
    -ms-transform: translate(0px, 0px); 
    transform: translate3d(0px, 0px, 0px); 
} 

あるこの

<div class="animation-element slide-left"></div> 

ようになります要素がスライドしている100 /距離を変更するための動的な$ distance。

ありがとうございます。

Answer 1

編集

コンパスの使用に関する参照はサポートされなくなりました。 SASSの自動接頭辞に興味がある場合は、プラグインが必要な場合はPostCssを使用してください。

---

SASSのミックスインに変数を渡すことができます。しかし、私のコメントで述べたように、私はJSを通じてSASSに変数を渡す方法を知らない。

@mixin my-animation($distance) { 
    opacity: 0; 
    transition: all 500ms linear; 
    transform: translate3d($distance, 0, 0); 
} 

div { 
    @include my-animation(-100px); 
} 

私は Compassを使用することをお勧めします。コンパス、 @import 'compass';をインポートし、 @include transform(..);を使用すると、変換プロパティが自動的にプレフィックスされ、数行のコードを書くことが軽減されます。

あなたがdistance値を変更するためにJSを使用する場合は、あなたがあなたのカスタムdistance値を含めたいtransformプロパティをインラインスタイルを追加するために、JSを使用することができます。