0

不确定这是否可能，但我想做的是有一个条件混合，并基于项目的 ID 附加条件。

所以像

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

4

1 回答 1

0

不，从 mixin 内部你看不到它在哪里被调用。

我应该说，您使用的方法有点奇怪。尝试解释您的任务，而不是询问我们不知道的任务的错误解决方案（请参阅XY 问题）。

如果我正确理解了这个任务，你想利用两种技术的组合：扩展和父选择器引用。 

%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 .)

于 2013-05-07T07:00:22.343 回答