Question

不确定这是否可行，但我想做的是根据项目的ID提供条件mixin和附加条件。

类似

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，但是无法正常工作。

Answer 1

不，从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"; }

（为了清晰起见，我已经将生成的CSS作为主干。实际上它有点多余。似乎SASS正试图弥补它不是心灵感应而无法预测你真正想要的东西。你可以看到完整的结果CSS here。）

基于项目ID的条件Sass

1 个答案: