哈姆＆amp; scss - 一行上有两种风格

Question

我目前有这个代码，我需要白色文本为白色，绿色文本为绿色，但它们都在同一行...我是haml和scss的新手所以我确定这是非常明显的事情！

haml代码：

.left
    %h2 
      green text white text 
      %img(src="/assets/_logo.gif")

scss代码：

.left { 
      width: 450px; float: left; padding: 20px; 
      h2 {color: #2A8E82}
      }
      h3 {color: #FFFFFF}
      p {color: #FFFFFF}
      background: url("/assets/silicon/box_bg.gif") repeat-x;
      }

Answer 1

在这种情况下，您可以使用span标记：

%h2 
  <span class='green'>green text</span><span class='white'>white text</span>
#or
%h2
  %span.green green text
  %span.white white text

在SCSS中：

.left {
  h2 {
    color: #2A8E82;
    .green {
      color: green;
     }
     .white {
        color: white;
     }
   }
 }