1

バックグラウンド

  • LessJSでTwitter Bootstrap LESSソースを使用しています
  • font-awesome .lessを使用しています (Bootstrap.less 内から参照)
  • 競合しないように、ブートストラップからアイコン セクションを削除しました。
  • サイト固有のスタイリングを含む、Bootstrap 内からも参照する site.less ファイルがあります。

ゴール

site.css ファイルの次の行に沿って何かを実行できるようにしたいと考えています。

.feedbackItemIconPraise
{
    .icon-thumbs-up; //class included in font-awesome.less
    color:Green;
}

問題

上記のアプローチを試みると、次のエラーが発生します。

ここに画像の説明を入力

このエラーは理にかなっています。私のsite.lessにfont-awesome.lessの追加のインポートを作成せずにそれを修正する最善の方法がわかりません（これはそれ自体の問題になると思います）。

明確にするために：以下のコメントごと：Knockoutビューモデルから使用しているクラス名があります。(たとえば、「賞賛」が選択されている場合、クラス「FeedbackItemPraise」が適用されます)。FeedbackItemPraise が選択されている場合は、font-awesome の .icon-thumbs-up クラス (Web フォントを介してアイコンを表示する) を適用し、色を緑色にしたいと考えています。

私がこれまでに持っているもの

Bootstrap.less のカスタマイズ (関連する部分のみを表示):

//Sean's customizations
@import "background.less"; // Background images and colors 
@import "font-awesome.less"; // Font Awesome font (SK 2012/09/04)
@import "site.less"; // site-specific LESS

site.less 内のクラス:

.feedbackItemIconPraise
{
    .icon-thumbs-up; //class included in font-awesome.less
    color:Green;
}
4

2 に答える 2

2

更新しました

Font-Awesomeをもう一度見ると、アイコンのミックスインが含まれているように見えます。次の2つのファイルを参照してください。

https://github.com/FortAwesome/Font-Awesome/blob/master/less/variables.less

https://github.com/FortAwesome/Font-Awesome/blob/master/less/mixins.less

次のように使用します：

.feedbackItemIconPraise
{
    .icon(@thumbs-up-alt)
    color:Green;
}

オリジナル

font-awesome.lessを見ると、クラスが存在しないことがわかりますが、実際には存在し.icon-thumbs-up:beforeます。残念ながら、疑似クラスをミックスインとして使用することはできません.icon-thumbs-up:before;。

font-awesome.lessファイルを変更する（またはこのクラスを追加するかcontent: "\f087";、必要な場所に直接配置する）必要があるため、:beforeバージョンはありません。

.icon-thumbs-up:before            { content: "\f087"; }
.icon-thumbs-up                   { content: "\f087"; }

次に、この概念を適用します。

.feedbackItemIconPraise {
    font-family: "FontAwesome";
    font-size: 90px;
    padding-top: 7px;

    font-weight: normal;
    font-style: normal;
    display: inline-block;
    text-decoration: inherit;

    &:before {
        .icon-thumbs-up;
    }

}

フォントのようです-素晴らしいアイコンを:before表示するには、疑似アイコンを使用する必要があります。

デモ： http： //pulse-dev.com/files/stackoverflow/fontawesomeclass/

于 2012-09-13T17:07:25.707 に答える
1

これには別の解決策があるかもしれませんが、LESS コンパイラで実行する前に、スクリプトを (自動的に) 1 つのファイルに結合します。これにより、任意の LESS ファイルで使用できる変数とミックスインを前もって定義できます。

オンライン ドキュメントには、LESS に@importファイルを含めることができると記載されており、変数と mixin が利用可能になります。コンパイラの最新バージョンを使用していることを確認する必要がある場合があります。また、インポート ファイルがフォルダー構造で編成されている場合は、検索する場所をコンパイラに指示する必要がある場合があります。

var parser = new(less.Parser)({
    paths: ['.', './lib'], // Specify search paths for @import directives
    filename: 'style.less' // Specify a filename, for better error messages
});
于 2012-09-13T13:13:39.670 に答える