Fatal编程技术网
  • sass/
  • 如何使用缩进（旧式）语法在Sass中使用mixin？

如何使用缩进（旧式）语法在Sass中使用mixin？

sass

如何使用缩进（旧式）语法在Sass中使用mixin？,sass,Sass,我的Sass（缩进语法）如下所示： .wrapper overflow: hidden overflow: hidden width: 100% height: 100% .hide_menu @mixin transition($properties: all, $duration: 0.2s, $easing: ease-in-out) -webkit-transition: $property $duration $easing

我的Sass（缩进语法）如下所示：

.wrapper
    overflow: hidden
    overflow: hidden
    width: 100%
    height: 100%

.hide_menu
    @mixin transition($properties: all, $duration: 0.2s, $easing: ease-in-out)
        -webkit-transition: $property $duration $easing
        -moz-transition: $property $duration $easing
        -ms-transition: $property $duration $easing
        -o-transition: $property $duration $easing
        transition: $property $duration $easing
    @mixin transform($translate: 0 0)
        -webkit-transform: $translate
        -moz-transform: $translate
        -ms-transform: $translate
        -o-transform: $translate
        transform: $translate
    @mixin transform($translate3d: 275px 0 0)
        -webkit-transform: $translate3d
        -moz-transform: $translate3d
        -ms-transform: $translate3d
        -o-transform: $translate3d
        transform: $translate3d

nav 
    width: 275px
    height: 100%
    position: fixed
    top: 0
    left: 0
但是当我编译它时，我的mixin的内容不会出现在CSS中。

这里的问题是，您只定义了mixin，而没有实际调用它。如果要调用mixin，必须使用正确的语法：

.foo
    +transform($translate3d: 275px 0 0)
此外，如果您计划在其他地方重用mixin，那么应该将它们放在根级别。它们现在所在的位置，只能在.hide_菜单类的特定实例中看到。

你是说一旦编译成直接的CSS？这是一个mixin，如果它没有被应用到任何规则中，它将不会显示。你需要将它应用于某些东西，例如，
主体a{@include transform（）；}
没有，它在下面。隐藏菜单你的问题可能是你忘记了你的
{}
和你的