基于项目ID的条件Sass_Sass - Fatal编程技术网

基于项目ID的条件Sass

sass

基于项目ID的条件Sass,sass,Sass,不确定这是否可行，但我想做的是使用一个基于项目ID的附加条件进行条件混合大概是 HTML 用法要求：所有变体必须使用相同的CSS文件我使用的另一个选项是有条件地加载@font-family，但也无法实现这一点。不，从mixin内部看不到它的调用位置我应该说，你使用的方法有点奇怪。试着解释你的任务，而不是询问我们不知道的任务的糟糕解决方案（参见）如果我正确理解了任务，那么您需要利用两种技术的组合：和。结果：（为了清晰起见，我对结果CSS进行了集群。实际上，它有点多余。SASS似

不确定这是否可行，但我想做的是使用一个基于项目ID的附加条件进行条件混合

大概是

HTML

用法

要求：所有变体必须使用相同的CSS文件

我使用的另一个选项是有条件地加载@font-family，但也无法实现这一点。

不，从mixin内部看不到它的调用位置

我应该说，你使用的方法有点奇怪。试着解释你的任务，而不是询问我们不知道的任务的糟糕解决方案（参见）

如果我正确理解了任务，那么您需要利用两种技术的组合：和。

结果：

（为了清晰起见，我对结果CSS进行了集群。实际上，它有点多余。SASS似乎在试图弥补它不是心灵感应，无法预测您实际需要的内容。您可以看到完整的结果CSS。）

生成的CSS是什么，需要的CSS是什么？您定义了多少不同的位置，需要为其编写自定义混音？我不知道您可以在选择器后面使用“&”。这就成功了。谢谢

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

@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');
    }
 }

%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"; }