Question

我正在研究Symfony2，我在样式表中使用Less。我在尝试使用其他文件中的类时出错：

在我的main.less文件中：

.noBorderNoOutline  { border : none !important; outline : none !important; }

在我的forms.less文件中，我这样做：

@import 'main.less';
input, select {
    .noBorderNoOutline();
    width           : 250px;
    height          : 50px !important;        
    box-shadow      : 0 0 2px #555 !important;
    border          : 1px #aaa solid !important;
    padding-left    : 10px;
    margin-bottom   : 10px;
}

我使用lessphp来编译更少的文件和yui压缩器，我的配置是：

    filters:
    yui_css:
        jar: "%kernel.root_dir%/Resources/java/yuicompressor.jar"
    yui_js:
        jar: "%kernel.root_dir%/Resources/java/yuicompressor.jar"
    cssrewrite: ~
    lessphp:
        apply_to: "\.less$"
        formatter: "lessjs"
        preserve_comments: true
        presets:
            my_variable: "#000"

文件位于同一个包和同一文件夹中。

在我的TWIG模板中，我做了：

{% stylesheets filter='yui_css'
      '@MyBundle/Resources/public/css/forms.less'
%}
      <link rel="stylesheet" type="text/css" href="{{ asset_url}}" />
{% endstylesheets %}

我遇到错误：无法加载资源：服务器响应状态为500（内部服务器错误） “noBorderNoOutline”类未定义。

感谢您的帮助。

Answer 1

如果没有参数，你不需要将mixin用作函数。但是，您需要将其定义为main.less文件中的函数。

像这样定义：

.noBorderNoOutline()  { border : none !important; outline : none !important; }

像这样使用：

input, select {
    .noBorderNoOutline;
    width           : 250px;
    height          : 50px !important;        
    box-shadow      : 0 0 2px #555 !important;
    border          : 1px #aaa solid !important;
    padding-left    : 10px;
    margin-bottom   : 10px;
}

希望这能解决你的问题:)祝你好运！

使用其他文件中的LESS类[Symfony2]

1 个答案: