codesample2b.less

// over qualified nested rules that replicate the DOM structure in LESS
// this is more readable and reduces the chance of conflicts
.view {

	.widget-a {

		h1 {
			font-size: 16px;
		}

		.region1, .region2 {

			padding: 10px;

			li {
				color: #333;
			}

			li.active { // if it is not a div then it gets an element qualifier
				color: #ff0000;
			}

			h2 {
				font-size: 14px;
			}

		}

		.region2 {
			padding-top: 0;
		}

	}

}