LESSコンパイラ・Codekitのコンパイルエラー

Question

初めまして、コンパイルエラーに関しての質問です。
使い始めてから日が浅いので不手際ございましたら申し訳ありません。
またできる限り短文で説明しようと心がけていますが、理解が及ばず長文となる点ご容赦ください。

注
初めてBootstrapを使ってサイトをテンプレで作ろうとしています。
またコンパイルをすることが初めての為、エラーに対してどう対処していいのか分かっていません。

目的
下記のjumbotron.lessのファイルをCodekitでCssファイルにコンパイルしたい。
それではよろしくお願いいたします。

問題点
コンパイルエラーが生じる為,それを改善したい。
下記は生じているエラーです。

NameError: variable @jumbotron-padding is undefined in /Users/tomokitakahashi/Desktop/jumbotron.less on line 4, column 19:
3 .jumbotron {
4   padding-top:    @jumbotron-padding;
5   margin-bottom: @jumbotron-padding;

jumbotron.lessのコードです。

    @import "jumbotron.less";

jumbotron {
  padding-top:    @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;
  background-image: url(http://lorempixel.com/600/200);
  
  h1,
  .h1 {
    color: @jumbotron-heading-color;
  }

  p {
    margin-bottom: (@jumbotron-padding / 2);
    font-size: @jumbotron-font-size;
    font-weight: 200;
  }

  > hr {
    border-top-color: darken(@jumbotron-bg, 10%);
  }

  .container &,
  .container-fluid & {
    border-radius: @border-radius-large; // Only round corners at higher resolutions if contained in a container
  }

  .container {
    max-width: 100%;
  }

  @media screen and (min-width: @screen-sm-min) {
    padding-top:    (@jumbotron-padding * 1.6);
    padding-bottom: (@jumbotron-padding * 1.6);

    .container &,
    .container-fluid & {
      padding-left:  (@jumbotron-padding * 2);
      padding-right: (@jumbotron-padding * 2);
    }

    h1,
    .h1 {
      font-size: @jumbotron-heading-font-size;
    }
  }
}

Comments

[maisumakun]

どのようなエラーが出たのか、書いていただけないでしょうか。

[cheeeeeeese]

わかりました。

Answer 1

@jumbotron-paddingを定義するか、定義されているファイルをimportしなければなりません。
また先頭で自身をimportしていますが（@import "jumbotron.less";）、ここで適切なファイルをimprotすればコンパイルは通るはずです。
エラーメッセージで検索すればより詳細な情報が出てきます。