scss-library/components/02_Styles/spacing/_spacing.styl

RV-Spacing__Outer--small()
	+RV-Element__Modifier--name('small')
		--outer-spacing spacing-small
		margin var(--outer-spacing)
		* > {
			--outer-spacing 0
		}

RV-Spacing__Outer--medium()
	+RV-Element__Modifier--name('medium')
		--outer-spacing spacing-medium
		margin var(--outer-spacing)
		* > {
			--outer-spacing 0
		}

RV-Spacing__Outer--large()
	+RV-Element__Modifier--name('large')		
		--outer-spacing spacing-large
		margin var(--outer-spacing)
		* > {
			--outer-spacing 0
		}
RV-Spacing__Inner--small()
	+RV-Element__Modifier--name('small')
		--inner-spacing spacing-small
		padding var(--inner-spacing)
		gap var(--inner-spacing)
		column-gap var(--inner-spacing)			
		* > {
			--inner-spacing 0
		}

RV-Spacing__Inner--medium()
	+RV-Element__Modifier--name('medium')
		--inner-spacing spacing-medium
		padding var(--inner-spacing)
		gap var(--inner-spacing)
		column-gap var(--inner-spacing)			
		* > {
			--inner-spacing 0
		}

RV-Spacing__Inner--large()
	+RV-Element__Modifier--name('large')
		--inner-spacing spacing-large
		padding var(--inner-spacing)
		gap var(--inner-spacing)
		column-gap var(--inner-spacing)			
		* > {
			--inner-spacing 0
		}

+RV-Block('RV-Spacing')
	+RV-Element('Outer')
		+RV-Element__Modifier()
			RV-Spacing__Outer--small()
		+RV-Element__Modifier()
			RV-Spacing__Outer--medium()
		+RV-Element__Modifier()	
			RV-Spacing__Outer--large()

	+RV-Element('Inner')
		+RV-Element__Modifier()
			RV-Spacing__Inner--small()
		+RV-Element__Modifier()
			RV-Spacing__Inner--medium()
		+RV-Element__Modifier()		
			RV-Spacing__Inner--large()