4

私は初めてですLESS CSS。以下を使用してコードを実行すると、出力にエラーが発生しますhtml。LESS css

この問題を解決してください。

index.html

<!DOCTYPE HTML>
<html>
<head>
<title>LESS CSS</title>
<script type="text/javascript" src="../_s/jquery.js"></script>
<link rel="stylesheet/less" type="text/css" href="test.less" />
<script src="less.js" type="text/javascript"></script>
</head>
<body>

<div id="box"></div>

</body>
</html>

テストレス

@color : #2AA4CF;
@clientHeight: ~`$.trim( $(window).height() ) + 'px'`;
#box
{
    position: absolute;
    background-color: darken(@color, 10%);
    width: 300px;
    height: @clientHeight - 100;
}

出力はエラーです

Object # has no method 'operate'
in test.less 
at e.Operation.eval (http://localhost/frames/006/less.js:9:11151)
at Object.e.Expression.eval (http://localhost/frames/006/less.js:9:3533)
at Object.e.Value.eval (http://localhost/frames/006/less.js:9:18173)
at e.Rule.eval (http://localhost/frames/006/less.js:9:12727)
at Object.e.Ruleset.eval (http://localhost/frames/006/less.js:9:13904)
at Object.e.Ruleset.eval (http://localhost/frames/006/less.js:9:13904)
at Object.toCSS (http://localhost/frames/006/less.js:8:10291)
at http://localhost/frames/006/less.js:9:20740
at http://localhost/frames/006/less.js:8:1157
at Object.p.parse (http://localhost/frames/006/less.js:8:10899)

解決策を教えてください...

4

1 に答える 1

5

2つの問題があります。最初：

`$.trim( $(window).height() ) + 'px'`

このコードは次のように評価されます"400px"（引用符に注意してください"）。これにより、CSSルールは引用符を使用しないため、無効になります。また、整数を返すため、$.trim冗長です。.height()

2番目の問題：

height: @clientHeight - 100;

これにより、以前に作成された文字列が取得され、不正な数学演算が実行されます。これがエラーをスローするものです。

これがあなたがそれをすることができる方法です：

@color : #2AA4CF;
@clientHeight: `$(window).height()-100`;
#box
{
    position: absolute;
    background-color: darken(@color, 10%);
    width: 300px;
    height: 0px + @clientHeight
}

最後のコードは、変数0px + @clientHeightに追加するためのトリックにすぎません。px

次のコードを使用して、LESSで計算する代わりに、純粋なCSSを使用してタスクを解決できます（ウィンドウのサイズが変更されたときにスケーリングすることもできます）。

html,body{ height:100% }
#box{ position:absolute; top:0; bottom:100px }
于 2012-12-07T14:18:13.243 に答える