LESSファイルのコンパイルエラー
Twitter Bootstrapに同梱されているLESSファイルをコンパイルしようとしたら、以下のようなエラーが出ました。
ソースコード
twbs/bootstrap · GitHub// // Jumbotron // -------------------------------------------------- .jumbotron { padding: @jumbotron-padding; margin-bottom: @jumbotron-padding; font-size: (@font-size-base * 1.5); font-weight: 200; line-height: (@line-height-base * 1.5); color: @jumbotron-color; background-color: @jumbotron-bg; h1 { line-height: 1; color: @jumbotron-heading-color; } p { line-height: 1.4; } .container & { border-radius: @border-radius-large; // Only round corners at higher resolutions if contained in a container } @media screen and (min-width: @screen-tablet) { padding-top: (@jumbotron-padding * 1.6); padding-bottom: (@jumbotron-padding * 1.6); .container & { padding-left: (@jumbotron-padding * 2); padding-right: (@jumbotron-padding * 2); } h1 { font-size: (@font-size-base * 4.5); } } }
エラーメッセージ
00:00:00 C:\xxx\bootstrap-3.0.0\less\jumbotron.less NameError: variable @jumbotron-padding is undefined in C:\xxx\bootstrap-3.0.0\less\jumbotron.less on line 8, column 12: 7 .jumbotron { 8 padding: @jumbotron-padding; 9 margin-bottom: @jumbotron-padding;
対応
LESSファイルで変数(”@xxx”)を使うためには、そのファイルで定義するか、または"@import"をする必要があるようです。同じく同梱されている"variables.less"をimportした例が以下の通りです。ソースコード
// // Jumbotron // -------------------------------------------------- @import "variables.less"; .jumbotron { padding: @jumbotron-padding; margin-bottom: @jumbotron-padding; font-size: (@font-size-base * 1.5); font-weight: 200; (略)
最初からimportしてもらっても良かったのに(´;ω;`)