基于商品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

回答

相关问题