Added namespace var Sass + Less version

less/_02-layout.less

@@ -3,20 +3,20 @@
 /* ----------------------------- */
 
 /* module, gains superpower "BFC" Block Formating Context */
-.mod {
+.@{kna-namespace}mod {
 	overflow: hidden;
 }
 
 /* blocks that needs to be placed under floats */
-.clear,
-.line,
-.row {
+.@{kna-namespace}clear,
+.@{kna-namespace}line,
+.@{kna-namespace}row {
 	clear: both;
 }
 
 /* blocks that must contain floats */
-.clearfix,
-.line {
+.@{kna-namespace}clearfix,
+.@{kna-namespace}line {
 	&::after {
 		content: "";
 		display: table;
@@ -26,63 +26,63 @@
 }
 
 /* simple blocks alignment */
-.left {
+.@{kna-namespace}left {
 	margin-right: auto;
 }
 
-.right {
+.@{kna-namespace}right {
 	margin-left: auto;
 }
 
-.center {
+.@{kna-namespace}center {
 	margin-left: auto;
 	margin-right: auto;
 }
 
 /* text and contents alignment */
-.txtleft {
+.@{kna-namespace}txtleft {
 	text-align: left;
 }
 
-.txtright {
+.@{kna-namespace}txtright {
 	text-align: right;
 }
 
-.txtcenter {
+.@{kna-namespace}txtcenter {
 	text-align: center;
 }
 
 /* floating elements */
-.fl {
+.@{kna-namespace}fl {
 	float: left;
 }
 
-img.fl {
+img.@{kna-namespace}fl {
 	margin-right: @small-value;
 }
 
-.fr {
+.@{kna-namespace}fr {
 	float: right;
 }
 
-img.fr {
+img.@{kna-namespace}fr {
 	margin-left: @small-value;
 }
 
-img.fl,
-img.fr {
+img.@{kna-namespace}fl,
+img.@{kna-namespace}fr {
 	margin-bottom: @tiny-value;
 }
 
 /* table layout */
-.row {
+.@{kna-namespace}row {
 	display: table;
 	table-layout: fixed;
 	width: 100%;
 }
 
-.row > *,
-.col {
+.@{kna-namespace}row > *,
+.@{kna-namespace}col {
 	display: table-cell;
 	vertical-align: top;
 }
@@ -93,7 +93,7 @@ body > script {
 }
 
 /* inline-block */
-.inbl {
+.@{kna-namespace}inbl {
 	display: inline-block;
 	vertical-align: top;
 }
@@ -102,35 +102,35 @@ body > script {
 http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
 */
 
-[class*="flex-container"] {
+[class*="@{kna-namespace}flex-container"] {
 	display : flex;
 	flex-wrap: wrap;
 }
 
-.flex-container-h {
+.@{kna-namespace}flex-container-h {
 	flex-direction: row;
 }
 
-.flex-container-v {
+.@{kna-namespace}flex-container-v {
 	flex-direction: column;
 }
 
-.flex-item-fluid {
+.@{kna-namespace}flex-item-fluid {
 	flex: 1;
 }
 
-.flex-item-first {
+.@{kna-namespace}flex-item-first {
 	order : -1;
 }
 
-.flex-item-medium {
+.@{kna-namespace}flex-item-medium {
 	order : 0;
 }
 
-.flex-item-last {
+.@{kna-namespace}flex-item-last {
 	order : 1;
 }
 
-.flex-item-center {
+.@{kna-namespace}flex-item-center {
 	margin: auto;
 }