0

SASSの@if制御ディレクティブを使用するのは私の最初の試みです。

フォルダー内に最適化された画像のリストがあります。JPGのように小さい画像もあれば、PNGのように小さい画像もあります。

@ifルールを使用して、「そのファイルのJPGが存在する場合は、この@includeを使用し、そうでない場合は、もう1つを使用してください」と言いたいのです。

（例のgifは、私が少なくとも他の部分が正しいかどうかを明確にするためにそこにあります。）

私の例：

$list: A, B, C;

$type: jpg;

@mixin portfolio-images {
    @each $item in $list {
        a[href*="#{$item}"] span {

            /* @if starts */   

            @if $type == jpg {@include background-image-retina("#{$item}.jpg");}
            @else if $type == png {@include background-image-retina("#{$item}.png");}
            @else {@include background-image-retina("#{$item}.gif");}

            /* @if ends */   


            @include hide-text;
            width: 300px;
            height: 150px;
        }
    }
}

どういうわけか私はこれを間違えているようで、あなたの助けが必要です。JPGは正常に表示されますが、PNGはまったく表示されません。CSSファイルに出力はコンパイルされません。

@include background-image-retinaを使用していますが、このすばらしいミックスインのように画像タイプのカスタム変数を定義することはできません。だから私はこれにアプローチする方法がわかりません。

更新： @lnrbobが指摘したように、SASSで既存のファイルをチェックすることはできません。彼が優れた@ifの例を提供し、長期的にはこのSASS機能を理解するのに役立ったので、私は正解としてマークしました。

4

1 に答える 1

0

私はあなたがここで何をしているのか混乱しています。SASSは、ファイルシステムをチェックしてA.jpg「A.png」が存在するかどうかを確認しません。変数を更新する必要があります。したがって、あなたの例（私は思う）では、次のようになります。

$list: A, B, C;

@mixin portfolio-images($type: 'jpg') {
    @each $item in $list {
        a[href*="#{$item}"] span {

            /* @if starts */   

            @if $type == jpg {@include background-image-retina("#{$item}.jpg");}
            @else if $type == png {@include background-image-retina("#{$item}.png");}
            @else {@include background-image-retina("#{$item}.gif");}

            /* @if ends */   


            @include hide-text;
            width: 300px;
            height: 150px;
        }
    }
}

そして、あなたはそれを次のように使うでしょう：

@include portfolio-images('png');

これはあなたが達成したいことではないと思いますが、そうですか？retina-compassヘルパー（ @include background-image-retinaとしてリンクしている）の機能を複製したい場合は、SASSが使用するコンパイルプロセスにフィードするためのルビースクリプトとしてこれを行う必要があります（この例では、ヘルパーはCompassを使用しています）。

これが少なくとも少し役立つことを願っています。私が完全に誤解している場合はお知らせください。確認します:)

于 2012-07-11T12:51:55.510 に答える