@include $mixin-name;

这似乎并不那么困难……

我见过有几个人想提到这个.这张票(http://dev.vaadin.com/ticket/9546)说“固定”,我认为这意味着在Sass 3.2中这是可能的,但是来自Google网上论坛的Sass小组的评论似乎暗示：http://goo.gl/HtdHu

我看到他们在说什么,似乎很多人在询问它可以很容易地以另一种方式解决他们的问题.

我想不出我的问题的另一种方式,所以让我解释一下,也许有人可能会有一两个想法？

CSS动画

我为@keyframes创建了一个mixin,这样我就可以调用@include animation();并获得前缀和官方@keyframes的完整列表

@include keyframes(reveal) {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

给我：

@-webkit-keyframes reveal {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-moz-keyframes reveal {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-ms-keyframes reveal {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-o-keyframes reveal {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes reveal {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

哪个好极了！但是,如果我在其中一个关键帧状态中使用Compass变换：

@include keyframes(round) {
    from {
        @include transform(rotateZ(-145deg));
        opacity: 1;
    }
    to {
        @include transform(rotateZ(-45deg));
        opacity: 0.5;
    }
}

然后我最终得到类似的东西：

@-webkit-keyframes round {
    from {
        -webkit-transform: rotateZ(-145deg);
        -moz-transform: rotateZ(-145deg);
        -ms-transform: rotateZ(-145deg);
        -o-transform: rotateZ(-145deg);
        transform: rotateZ(-145deg);
        opacity: 1;
    }
    to {
        -webkit-transform: rotateZ(-45deg);
        -moz-transform: rotateZ(-45deg);
        -ms-transform: rotateZ(-45deg);
        -o-transform: rotateZ(-45deg);
        transform: rotateZ(-45deg);
        opacity: 0.5;
    }
}

等等…

前缀内的前缀

所以,我知道这很迂腐,但我真的很烦我,我正在宣布-webkit-animation,但是当我想要做的只是声明与关键帧相同的前缀时,我必须声明所有的前缀.官员,例如：

@-webkit-keyframes round {
    from {
        -webkit-transform: rotateZ(-145deg);
        transform: rotateZ(-145deg);
        opacity: 1;
    }
    to {
        -webkit-transform: rotateZ(-45deg);
        transform: rotateZ(-45deg);
        opacity: 0.5;
    }
}

@-moz-keyframes round {
    from {
        -moz-transform: rotateZ(-145deg);
        transform: rotateZ(-145deg);
        opacity: 1;
    }
    to {
        -moz-transform: rotateZ(-45deg);
        transform: rotateZ(-45deg);
        opacity: 0.5;
    }
}

等等…

Mixin问题

所以,我使用@include experimental-value创建了一个mixin,但我不能自动化它,因为

@function browser-is-prefix($browser,$prefix) {
    @if $browser == $prefix {
        @return true;
    } @else {
        @return false;
    }
}

@mixin transform-prefix($transform,$browser) {
    @include experimental-value(transform,$transform,browser-is-prefix($browser,-moz),-webkit),-o),-ms),false,true);
}

@mixin animation-name($browser) {
    from {
        @include transform-prefix(transform(translate(-25px,200px) scale(0.5)),$browser);
        opacity: 0;
    }
    to {
        @include transform-prefix(transform(translate(0,0) scale(0.5)),$browser);
        opacity: 1;
    }
}

调用@include animation-name(-webkit)会很有效并且给我们：

@-webkit-keyframes animation-name {
    from {
        -webkit-transform: translate(-25px,200px) scale(0.5);
        transform: translate(-25px,200px) scale(0.5);
        opacity: 0;
    }
    to {
        -webkit-transform: translate(0,0) scale(0.5);
        transform: translate(0,0) scale(0.5);
        opacity: 1;
    }
}

但我不能自动化它！

为了自动化这个过程,我希望能够调用一个mixin,比如@include prekeyframes(animation-name);并且prekeyframes完全与关键帧mixin在上面做的一样,除了不包括它的@content之外,它将包括mixin并且只使用它应该基于@keyframes具有的前缀的前缀：

@mixin prekeyframes($name) {
    $prefixes : -webkit-,-moz-,-o-,-ms-,'';
    @each $prefix in $prefixes {
        @include $name($prefix);
    }
}

当然,这会引发错误.如果我插入$name(@include#{$name}($prefix)),它仍然是一个问题.

所以,我可以忍受额外的变换值,或者我可以手动完成所有这些,但我总是对Sass的灵活性印象深刻,这似乎真的限制了我…

总结一下：

>我想在一个地方定义一次动画.@H_301_84@>我希望能够在该动画中进行@include变换.@H_301_84@>我想在正确加上前缀的@keyframes中使用正确的前缀变换

我现在花了几个小时,我会继续捣蛋……但如果有人有类似的经历或问题,我很想知道……

谢谢！

　　布局很简单，就是一个div，我们主要说下css样式

:root{
    --x: 40;
    --y: 40;
}
*{
    padding: 0;
    margin: 0;
}
body{
    width: 100vw;
    height: 100vh;
    background: #000;
}
div{
    width: 100%;
    height: 100%;
    background: url(''../images/bg.png'') 0 0 no-repeat;
    clip-path: circle(100px at calc(var(--x) * 1px ) calc(var(--y) * 1px));
    background-size: cover;
}

document.addEventListener(''mouseover'', function(e){
     document.documentElement.style.setProperty(''--x'', e.clientX)
     document.documentElement.style.setProperty(''--y'', e.clientY)
})

这基本上就是我想做的事情：

@import "font-awesome/font-awesome.less"

.icon-application-home{
    .fa .fa-home;
}

但是因为fa在Font Awesome中被定义为：

@fa-css-prefix:       fa;

那么少就不会编译,因为它不能识别.fa.所以我尝试了这个：

@import "font-awesome/font-awesome.less"

.icon-application-home{
    .@{fa-css-prefix} .@{fa-css-prefix}-home;
}

然而,这也不起作用.有没有解决方法？我能在这做什么？

编辑

我在这里找到了半个答案：

Missing Font-Awesome.less variables in my .less file after importing

如果我执行以下操作,则(部分)有效：

@import (less) "../font-awesome.css";

.icon-home {
    .fa;
}

但是,我注意到.fa-home不存在…只有.fa-home：之前…所以我试过这个：

@import (less) "../font-awesome.css";

.icon-home {
    .fa;
    .fa-home:before;
}

和

@import (less) "../font-awesome.css";

    .icon-home {
        .fa;
    }
    .icon-home:before {
        .fa-home:before;
    }

这些都不起作用.有任何想法吗？

@import (less) "../font-awesome.css";

.icon-application-home {
    &:extend(.fa,.fa-home all);
}

要么：

@import (less) "../font-awesome.css";

.icon-application-home
    :extend(.fa,.fa-home all) {

}

阅读extend documentation,了解这些东西的工作原理.

如果您升级到包含Less 1.6.x的IDE /编译器,您将能够：

@import ".../font-awesome.less"

.icon-application-home {
    .fa;
    &:before {content: @fa-var-home}
}

那里你仍然不能使用.fa-home或.fa-home：之前作为mixins,因为第一个没有定义,第二个不是有效的mixin选择器,幸运的是&：before {content：@ fa-var-home}就像.fa-home那样.但总的来说,基于扩展的解决方案更加优化,因为它可以生成更紧凑的CSS.