基於商品ID的條件Sass

不知道這是否可能，但我想要做的是根據商品的ID使用附加條件的條件混合。基於商品ID的條件Sass

因此，像

HTML

<html id="eng"> 
    <body> 
     <div id="content"> 
      <p>hello</p> 
     </div> 
    </body> 
</html>

SCSS（這是不行的，但那種讓你我的問題的想法）

@mixin font-select($weight) { 
    @if $weight == 'light' 
    { 
     html#chem{ 
      font-family: 'MinionPro-Medium'; 
     } 
     html#eng{ 
      font-family: 'MyriadPro-LightCond'; 
     } 
    } 
    @else 
    { 
     html#chem{ 
      font-family: 'MinionPro-Regular'; 
     } 
     html#eng{ 
      font-family: 'MyriadPro-Regular'; 
     } 

    } 
} 

//MYRIAD PRO 

@font-face { 
    font-family: 'MyriadPro-LightCond'; 
    src: url('fonts/myriadpro-lightcond.eot'); 
    src: url('fonts/myriadpro-lightcond.eot?#iefix') format('embedded-opentype'), 
     url('fonts/myriadpro-lightcond.woff') format('woff'), 
     url('fonts/myriadpro-lightcond.ttf') format('truetype'), 
     url('fonts/myriadpro-lightcond.svg#myriadpro-lightcond') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'MyriadProLight'; 
    src: url('fonts/myriadpro-light.eot'); 
    src: url('fonts/myriadpro-light.eot#iefix') format('embedded-opentype'), 
     url('fonts/myriadpro-light.woff') format('woff'), 
     url('fonts/myriadpro-light.ttf') format('truetype'), 
     url('fonts/myriadpro-light.svg#MyriadProLight') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'MyriadPro-Regular'; 
    src: url('fonts/myriadpro-regular.eot'); 
    src: url('fonts/myriadpro-regular.eot?#iefix') format('embedded-opentype'), 
     url('fonts/myriadpro-regular.woff') format('woff'), 
     url('fonts/myriadpro-regular.ttf') format('truetype'), 
     url('fonts/myriadpro-regular.svg#myriadpro-regular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'MyriadPro-SemiBold'; 
    src: url('fonts/MyriadPro-Semibold.eot'); 
    src: url('fonts/MyriadPro-Semibold.eot?#iefix') format('embedded-opentype'), 
     url('fonts/MyriadPro-Semibold.woff') format('woff'), 
     url('fonts/MyriadPro-Semibold.ttf') format('truetype'), 
     url('fonts/MyriadPro-Semibold.svg#MyriadPro-Semibold') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

// MINION PRO 

@font-face { 
    font-family: 'MinionPro-Medium'; 
    src: url('fonts/MinionPro-Medium.eot'); 
    src: url('fonts/MinionPro-Medium.eot?#iefix') format('embedded-opentype'), 
     url('fonts/MinionPro-Medium.woff') format('woff'), 
     url('fonts/MinionPro-Medium.ttf') format('truetype'), 
     url('fonts/MinionPro-Medium.svg#MinionPro-It') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 


@font-face { 
    font-family: 'MinionPro-Regular'; 
    src: url('fonts/MinionPro-Regular.eot'); 
    src: url('fonts/MinionPro-Regular.eot?#iefix') format('embedded-opentype'), 
     url('fonts/MinionPro-Regular.woff') format('woff'), 
     url('fonts/MinionPro-Regular.ttf') format('truetype'), 
     url('fonts/MinionPro-Regular.svg#MinionPro-Regular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'MinionPro-Semibold'; 
    src: url('fonts/MinionPro-Semibold.eot'); 
    src: url('fonts/MinionPro-Semibold.eot?#iefix') format('embedded-opentype'), 
     url('fonts/MinionPro-Semibold.woff') format('woff'), 
     url('fonts/MinionPro-Semibold.ttf') format('truetype'), 
     url('fonts/MinionPro-Semibold.svg#MinionPro-Semibold') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
}

使用

#content{ 
    p { 
     @include font-select('light'); 
    } 
} 

#other-content{ 
    h1 { 
     @include font-select('bold'); 
    } 
}

要求：所有的變體必須使用相同的CSS文件

我正在玩的另一個選項是有條件地加載@ font-family，但無法得到這樣的工作。

來源

2013-05-06 abritez

什麼是生成的CSS和什麼是所需的CSS？ – cimmanon 2013-05-06 20:17:46

您定義'font-family'有多少個不同的地方需要爲它編寫一個自定義混音？ – bookcasey 2013-05-07 02:49:28

不，從一個mixin裏面你看不到的地方，它被稱爲的。

我應該說，你正在使用的方法是有點怪異。嘗試解釋你的任務，而不是詢問我們不知道的任務的錯誤解決方案（請參閱the XY problem）。

如果我正確理解任務，您想利用兩種技術的組合：extends和parent selector reference。

%font-light 
    #chem & 
    font-family: 'MinionPro-Medium' 
    #eng & 
    font-family: 'MyriadPro-LightCond' 

%font-normal 
    #chem & 
    font-family: 'MinionPro-Regular' 
    #eng & 
    font-family: 'MyriadPro-Regular' 


#content p 
    @extend %font-light 

#other-content h1 
    @extend %font-normal

結果：

#chem #content p { 
    font-family: "MinionPro-Medium"; } 
#eng #content p { 
    font-family: "MyriadPro-LightCond"; } 

#chem #other-content h1 { 
    font-family: "MinionPro-Regular"; } 
#eng #other-content h1 { 
    font-family: "MyriadPro-Regular"; }

（我trunkated爲清晰起見，所產生的CSS在現實中這將是有點兒多餘好像SASS正試圖彌補，它不是。心靈感應，不能預測你真正想要什麼，你可以看到完整的CSS here。）

來源

2013-05-07 07:00:22

我不知道你可以在選擇器之後使用「＆」。那就是訣竅。謝謝！ – abritez 2013-05-07 20:59:39

基於商品ID的條件Sass

回答

相關問題