2012-05-01 3 views
3

私はCSSに非常に新しく、ブートストラップ& LESSです。私は、ブートストラップのウェブサイトをチェックアウトし、私はLESSミックスインを使用して垂直方向のグラデーションを作成することができる必要があることを見てきた:ブートストラップとLESSを使用した垂直グラジエント

#gradient > .vertical(); 

は私css.scssファイルのフッタ{}セクションでこれをやりたいです。私はこれをどのようにコード化するのか分かりません。私の推測では、上記のステートメントを括弧内に開始の&の終了色で追加する必要があるということです。私が見た唯一の例はミックスインでした。これに背景画像の節などを含める必要がありますか?私は構文エラーを取得し続けます。

これはおそらく簡単な質問ですが、私のCSSに関する知識は欠けています。しかし、私は試行錯誤で分ごとに分けています。どんな助けもありがとう。

更新2012年5月2日7:15:私はこれを使用しています

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); 
    } 

:ここ

は、私は垂直方向のグラデーションを追加したいフッターのための私のCSSコードでありますRails 3.2.3アプリケーションです。垂直グラデーションに使用したい色は、開始 #ffffff stop #191919です。私は、16進値の代わりにあらかじめ定義された変数を試してみることにしました。私も @$に変更しようとしました。次のエラーが表示されます。

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

'@gradient> .vertical(@red、@blue);'( '@color:' @color:#fff; 'のようにファイルのどこかで' @color'が定義されています)あなたが追加しようとしている色をここに投稿してください。 –

答えて

3

問題はブートストラップのグラデーションミックスではありません。 SASSファイルである.scssファイルにLESSコードを書き、RailsがSASSコンパイラでコンパイルしようとします。

LESSとSASSは類似していますが、構文と機能の違いがあります。あなたがブートストラップとLESSをrails 3.1アセットパイプラインで使用したいなら、.less拡張子を持つ新しいファイルを作成し、より少ないコンパイルでより少ないファイルをコンパイルするようにレールアセットパイプラインを設定する必要があります。

gemファイルとバンドルインストールの2つの宝石を追加してそれらの宝石を入手するのは簡単ですが、詳しくは"twitter-bootstrap-basics" Railscastsのエピソードを見ることをおすすめします。

+0

あなたの助けをありがとう、アレン。私はどこかでコンパイルエラーがあると思った。 Bootstrapのウェブサイトには、LESSの多くのものにBootstrapが含まれていると書かれています。たぶん彼らは変数ではなく機能について話していたのでしょう。私はビデオをチェックアウトします。私はまた、通常のCSSコードでこれを行う方法をチェックするかもしれません。 –

+0

はい! Allen&Jarrod、あなたは私のことをたくさん助けました!!!私は私のRailsアプリケーションでLESSコードを使用することができます。私がしたのは、twitter-bootstrap-basicsをインストールするだけでした。それは問題を解決しました。 –

1

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

関連する問題