Contents

• Nesting
• Variables
• Using in React Component.

Basic layout

Nesting

Building the class name with the nested hover inside. Keeping it cleaner and bit easier to read then the other way.

.className{
  &:hover{
   css-properties: property;
  }
}

What it compiles back down to.

.className{
  
}

.className:hover{
  css-properties: property;
}

Variable

Using SCSS in React Component

When building React Components

// React Component
import './style.scss'

class Header extends Component {
 render() {
    return (
            <div className={}>
            </div>
           )
}

//theme.scss

$variableA: #ffffff;

//style.scss

.divClass{
 color: $variableA;
}