1

元のブートストラップ LESS ファイルをダウンロードしました。html ファイルには、完全に機能する次のコードがあります。

<div class="col-md-4 col-md-offset-8">

しかし、私はこのようなことをしたいと思います:

<div class="my-cell">

私のlessファイルには次のものがあります：

.my-cell{
   .col-md-04;
   .col-md-offset-8;
}

しかし、Visual Studio の less コンパイラからエラーが発生します:「宣言されていない mixin」

ここに画像の説明を入力

次の行が機能するため、より少ないファイルが見つかります。

.col-xs-12;

いくつかのtwitter-bootstrapの少ないクラスを1つのクラスにラップするにはどうすればよいですか?

4

1 に答える 1

1

ファイルが少ない場合は、mixins.less ファイルも必要です。それを調べてみると、列、行、またはグリッドなどを作成するために利用できる多くのミックスインがあります。ここにいくつかコピーしましたが、ダウンロードした実際のソース ファイルを確認してください。

また、次のように、less ファイルで使用する前に mixin.less ファイルを含めることを忘れないでください。

@import "mixins.less"; //path of the file - relative to the path of file you are writing your less code.



// Below is some code from mixins.less but refer the actual file.
// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  margin-left:  (@gutter / -2);
  margin-right: (@gutter / -2);
  .clearfix();
}

// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  float: left;
  width: percentage((@columns / @grid-columns));
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);
}

// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small column offsets
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-sm-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-sm-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-sm-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the medium column offsets
.make-md-column-offset(@columns) {
  @media (min-width: @screen-md-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-md) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-md-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the large column offsets
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-lg-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-lg-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-lg-min) {
    right: percentage((@columns / @grid-columns));
  }
}

mixin ファイルをインポートしたら、次のように使用します。

.my-cell{
      .make-md-column(@columns; @gutter: @grid-gutter-width); //pass the parameters accordingly. for grid, gutter you can use variables.less file as well as the defaults are already defined there
}
于 2013-11-07T09:28:14.667 に答える