3

私はCSS、Bootstrap、およびLESSに非常に慣れていません。Bootstrap の Web サイトを調べたところ、LESS mixin を使用して垂直方向のグラデーションを作成できるはずであることがわかりました。

#gradient > .vertical();

css.scss ファイルのフッター {} セクションでこれを行いたいと考えています。これをコーディングする方法がわかりません。私の推測では、括弧内に開始色と終了色を指定して上記のステートメントを追加する必要があると思います。私が見た唯一の例は、ミックスインだけでした。これは background-image 句などに含める必要がありますか? 構文エラーが発生し続けます。

これはおそらく簡単な質問だと思いますが、CSS の知識が不足しています。しかし、私は試行錯誤しながら分刻みで学んでいます。どんな助けでも大歓迎です。

2012 年 5 月 2 日午前 7 時 15 分更新:

垂直グラデーションを追加したいフッターのCSSコードは次のとおりです。

footer {
  margin-top: 45px;
  padding-top: 5px;
  border-top: 1px solid $grayMediumLight;
  color: #000000;
  font-size: 10px;
  font-family: Arial; 
  font-style: italic;
  #gradient > .vertical(@white, @grayDarker);
  }

Rails 3.2.3 アプリケーションでこれを使用しています。垂直グラデーションに使用したい色は start #ffffffstop#191919です。16 進値の代わりに定義済みの変数を試すことにしました。にも変え@てみました$。次のエラーが発生し続けます。

Invalid CSS after "...ent > .vertical": expected "{", was "(@white, @grayD..."
  (in /Users/server1/Sites/iktusnetlive_RoR/app/assets/stylesheets/custom.css.scss).
4

2 に答える 2

3

あなたの問題は、Bootstrapからのグラデーションミックスインではありません。SASSファイルである.scssファイルにLESSコードを記述している場合、RailsはそれをSASSコンパイラーでコンパイルしようとします。

LESSとSASSは似ていますが、構文と機能にいくつかの違いがあります。Rails 3.1アセットパイプラインでBootstrapとLESSを使用する場合は、拡張子が.lessの新しいファイルを作成し、より少ないコンパイラでより少ないファイルをコンパイルするようにRailsアセットパイプラインを構成する必要があります。

いくつかのgemをgemファイルに追加し、それらのgemをバンドルインストールするのと同じくらい簡単なはずですが、Railscastsの「twitter-bootstrap-basics」エピソードを見てすべての詳細を取得することをお勧めします。

于 2012-05-02T22:31:50.690 に答える
1

同じエラーが発生していました。#gradient を定義する Bootstrap LESS ファイルをインポートしていませんでした。@import 'mixins.less'私のLESSファイルの先頭に追加することで問題を解決しました。

于 2012-11-12T07:53:56.193 に答える