Question

I currently have this code, i need the white text to be white, and the green text to be green, but them all to be on the same line.. i’m new to haml and scss so i’m sure this is something really obvious!

haml code:

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

scss code:

.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

You can use span tag in this situation:

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

And in SCSS:

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