Question

Less让你mark an import as optional喜欢这样：

@import (optional) "foo.less";

我有一个我可以导入的Less文件，其中包含我在父文件中使用的mixin。

如何将mixin的用法标记为可选，因此如果我导入的Less文件不存在，渲染不会失败？

我已尝试过此操作，计划在可选的较少导入的文件中设置@styleguide，但在@styleguide实现.registerColors()时，无论& when (@styleguide=true) { .registerColors( ... arguments ... ); }的值如何，渲染都会失败存在。

var marker = new google.maps.Marker({
    position: myLatLng,
    label: {
        color: '#000000',
        fontWeight: 'bold',
        text: 'text',
    },
    icon: {
        labelOrigin: new google.maps.Point(24, 14),
        url: 'http://reistip.nl/assets/img/gmap/icon/emoticons/icongreenbigprice.png',
        size: new google.maps.Size(50, 60),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(11, 40),
    },

});

我需要使用Less 2.5.3的解决方案。

Answer 1

Mixins in Less级联，因此您可以在非可选代码部分的任何位置简单地定义空mixin。 E.g：

@import (optional) "some";

div {
    .registerColors(red, red 2);  
}

// non-optional stuff

.registerColors(...) {}

Demo。当可选导入定义具有相同名称的mixin时，将调用两个mixin定义。

Answer 2

我找到了解决问题的方法，无需将mixin标记为可选。

我重构了.registerColors()以接受单个变量;一个颜色变量名称列表，在我的例子中。
我从调用中将颜色变量名称提取到传递给mixin的单独变量。
我将调用mixin移动到可选的less文件中。

我把一个呼叫放在一个警卫的mixin中，以检查变量的存在：

@registeredColors: false;
& when not ( @registeredColors = false ) {
    .registerColors( @registeredColors )
}

这正是我想要的。如果不存在可选的less文件，则不调用mixin（因为调用在可选的mixin中）。如果参数变量不存在，那么mixin也不会被调用，这要归功于守卫。

总的来说，这种方法似乎简化了整个过程。

将Less mixin标记为可选

2 个答案: