Question

我试图让这个日历控件在jsfiddle中运行。

http://jsfiddle.net/edwardtanguay/pe4sfex6/5/

我的本地版本有效，并且我已经添加了所有内容，但是我的本地HTML中样式较少的样式似乎存在问题，当我尝试添加时它进入jsfiddle，它告诉我把样式放在CSS窗口中，但是他们不在那里工作？

有没有人知道在jsfiddle中使用它的解决方法？

<style type="text/less">
    body { font-family:Arial; font-size:14px; }
    body>span, body>h1 { float:left; width:100%; margin:0; padding:0; margin-bottom:10px; }

    span { color:#888888;
    >b { color:black; }
    }

    .vertical-centre (@height) { height:@height; line-height:@height !important; display:inline-block; vertical-align:middle; }
    .border-box { box-sizing:border-box; -moz-box-sizing:border-box; }

    @border-colour:#CCC;
    calendar { float:left; display:block; .border-box; background:white; width:300px; border:solid 1px @border-colour; margin-bottom:10px;
    @secondary-colour:#2875C7;
    @spacing:10px;

    @icon-width:40px;
    @header-height:40px;

    >div.header { float:left; width:100%; background:@secondary-colour; height:@header-height; color:white;
    >* { .vertical-centre(@header-height); }
    >i { float:left; width:@icon-width; font-size:1.125em; font-weight:bold; position:relative; .border-box; padding:0 @spacing; cursor:pointer; }
    >i.fa-angle-left { text-align:left; }
    >i.fa-angle-right { text-align:right; margin-left:@icon-width*-1; }
    >span { float:left; width:100%; font-weight:bold; text-transform:uppercase; .border-box; padding-left:@icon-width+@spacing; margin-left:@icon-width*-1; text-align:center; padding-right:@icon-width; color:inherit; }
    }
    >div.week { float:left; width:100%; border-top:solid 1px @border-colour;
    &:first-child { border-top:none; }
    >span.day { float:left; width:100%/7; .border-box; border-left:solid 1px @border-colour; font-size:0.75em; text-align:center; .vertical-centre(30px); background:white; cursor:pointer; color:black;
    &:first-child { border-left:none; }
    &.today { background:#E3F2FF; }
    &.different-month { color:#C0C0C0; }
    &.selected { background:@secondary-colour; color:white; }
    }
    &.names>span { color:@secondary-colour; font-weight:bold; }
    }
    }
</style>

如何在jsfiddle中使用LESS来使这个AngularJS日历控件工作？

0 个答案: