haml & 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;
     }
   }
 }