Adapting to bem generator

components/03_Atoms/button/_button.styl

@@ -1,11 +1,11 @@
-RV-Button--pill()
-	+RV-Block__Modifier--name('pill')
-		border-radius calc(var(--size) + var(--line-height) * 16px)
-		padding-left calc(1.5 * var(--size))
-		padding-right calc(1.5 * var(--size))
+RV-Button--pill(size)
+	+RV-Block--modifier()
+		border-radius 'calc(%s + var(--line-height) * 16px)' % size
+		padding-left 'calc(1.5 * %s)' %s
+		padding-right 'calc(1.5 * %s)' %s
 
 RV-Button--border(color)
-	+RV-Block__Modifier--name('border')
+	+RV-Block--modifier()
 		border 3px solid color
 		color color
 		border-radius 0px
@@ -16,24 +16,24 @@ RV-Button--border(color)
 		+RV-Element('Icon')
 			background-color secondary-color
 
-RV-Button--small()
-	+RV-Block__Modifier--name('small')
+RV-Button--small(size)
+	+RV-Block--modifier()
 		--size spacing-small
 		
 		+RV-Element('Icon')
 			.RV-Image
-				height calc(var(--size) * 1.8)
+				height 'calc(%s * 1.8)' % size
 
 RV-Button--medium()
-	+RV-Block__Modifier--name('medium')
+	+RV-Block--modifier()
 		--size spacing-medium * .6
 
 RV-Button--large()
-	+RV-Block__Modifier--name('large')
+	+RV-Block--modifier()
 		--size spacing-large * .5
 
-RV-Button--link()
-	+RV-Block__Modifier--name('link')
+RV-Button--link(size)
+	+RV-Block--modifier()
 		border none
 		border-radius 0px
 		color primary-color
@@ -42,11 +42,11 @@ RV-Button--link()
 			margin 0
 			
 		+RV-Element('Icon')
-			padding-right calc(var(--size) / 4)
+			padding-right 'calc(%s / 4)' % size
 			padding-left calc(var(--size) / 4)
 
-_RV-Button__Icon--shape()
-	margin-right calc(var(--size) * 1.2)
+_RV-Button__Icon--shape(size)
+	margin-right 'calc(%s * 1.2)' % size
 	&, *
 		z-index 10
 		position relative
@@ -60,12 +60,12 @@ _RV-Button__Icon--shape()
 		position absolute
 
 
-RV-Button__Icon--inwardsArrow()
-	+RV-Element__Modifier--name('inwardsArrow')
-		_RV-Button__Icon--shape()
+RV-Button__Icon--inwardsArrow(size)
+	+RV-Element--modifier()
+		_RV-Button__Icon--shape(size)
 		
 		.RV-Image
-			left calc(var(--size) * .5)
+			left 'calc(%s * .5)' % size
 		&:after
 			transform rotate(-35deg)
 			left 70%
@@ -76,13 +76,13 @@ RV-Button__Icon--inwardsArrow()
 			left 70%
 			top -35%
 			
-RV-Button__Icon--outwardsArrow()
-	+RV-Element__Modifier--name('outwardsArrow')
-		_RV-Button__Icon--shape()
-		margin-right calc(var(--size) * 2)
+RV-Button__Icon--outwardsArrow(size)
+	+RV-Element--modifier()
+		_RV-Button__Icon--shape(size)
+		margin-right 'calc(%s * 2)' % size
 		
 		.RV-Image
-			left calc(var(--size) * .7)
+			left 'calc(%s * .7)' % size
 		
 		&:after
 			transform rotate(35deg)
@@ -94,45 +94,45 @@ RV-Button__Icon--outwardsArrow()
 			left 70%
 			top -37%
 
-RV-Button__Icon--forwardSlope()
-	_RV-Button__Icon--shape()
-	+RV-Element__Modifier--name('forwardSlope')
-		margin-right calc(var(--size) * 2)
+RV-Button__Icon--forwardSlope(size)
+	+RV-Element--modifier()
+		_RV-Button__Icon--shape(size)
+		margin-right 'calc(%s * 2)' % size
 		
 		.RV-Image
-			left calc(var(--size) * .7)
+			left 'calc(%s * .7)' % size
 
 		&:after
 			transform rotate(-15deg)
 			top 0%
 			
-RV-Button__Icon--backwardSlope()
-	_RV-Button__Icon--shape()
-	+RV-Element__Modifier--name('backwardSlope')
-		margin-right calc(var(--size) * 2)
+RV-Button__Icon--backwardSlope(size)
+	+RV-Element--modifier()
+		_RV-Button__Icon--shape(size)
+		margin-right 'calc(%s * 2)' % size
 		
 		.RV-Image
-			left calc(var(--size) * .7)
+			left 'calc(%s * .7)' % size
 	
 		&:after
 			transform rotate(15deg)
 			top -10%
 
-RV-Button__Icon()
-	+RV-Element--name('Icon')
+RV-Button__Icon(size)
+	+RV-Element()
 		width min-content
 		background-color primary-color
-		padding var(--size)
+		padding size
 		
 		.RV-Image
-			height calc(var(--size) * 2.5)
+			height 'calc(%s * 2.5)' % size
 
 
-RV-Button__Text()
-	+RV-Element--name('Text')
-		font-size calc(var(--size) * 1.65)
+RV-Button__Text(size)
+	+RV-Element()
+		font-size 'calc(%s * 1.65)' % size
 		background-color secondary-color
-		padding var(--size)
+		padding size
 
 RV-Button()
 	background-color #f00
@@ -152,40 +152,22 @@ RV-Button()
 		size: spacing-medium
 	})
 	RV-Reset()
-	RV-Button(height)
+	RV-Button()
 	
 	+RV-Element()
-		RV-Button__Icon()
+		RV-Button__Icon--outwardsArrow(--size)
+		RV-Button__Icon--inwardsArrow(--size)
 		
-		+RV-Element__Modifier()
-			RV-Button__Icon--outwardsArrow()
+		RV-Button__Icon--forwardSlope(--size)
+		RV-Button__Icon--backwardSlope(--size)
 		
-		+RV-Element__Modifier()
-			RV-Button__Icon--inwardsArrow()
-			
-		+RV-Element__Modifier()
-			RV-Button__Icon--forwardSlope()
-			
-		+RV-Element__Modifier()
-			RV-Button__Icon--backwardSlope()	
+		RV-Button__Icon(--size)
 		
-	+RV-Element()
-		RV-Button__Text()
+	RV-Button__Text(--size)
 	
-	+RV-Block__Modifier()
-		RV-Button--pill()
-		
-	+RV-Block__Modifier()
-		RV-Button--link()
-		
-	+RV-Block__Modifier()
-		RV-Button--small()
-		
-	+RV-Block__Modifier()
-		RV-Button--medium()
-		
-	+RV-Block__Modifier()
-		RV-Button--large()
-		
-	+RV-Block__Modifier()
-		RV-Button--border(primary-color)
+	RV-Button--pill(--size)
+	RV-Button--link(--size)
+	RV-Button--small(--size)
+	RV-Button--medium(--size)
+	RV-Button--large(--size)
+	RV-Button--border(primary-color)