@import "_styleguide_variables";

@test-variable: 10px;

// First section
//
// Markup:
// <div class="section">Section markup</div>
//
// Styleguide 1.0

.section {
  color: @color-red;
}
.section:hover {
  color: @color-green;
}
.section:active {
  color: @color-blue;
}


// Section with modifiers
//
// $color-red - Red test color
// $color-green - Green test color
// $color-blue - Blue test color
// .other-modifier - Other modifier
//
// Markup:
// <div style="background: {$modifiers};"></div>
//
// Styleguide 2.0

// Section without markup
//
// Styleguide 3.0

.test-css {color: purple;}

// Section with multiple variables
//
// Markup:
// <div class="section">Section markup</div>
//
// Styleguide 4.0

.section1 {
  color: @color-red;
}

.section2 {
  background-color: @color-green;
}

.section3 {
  border: 1px solid @color-blue;
}