SCSS-Mixins for creating "Attribute Modules for CSS"

amcss-helper

/**
 * Defines the global prefix for amcss-modules
 * @type {String}
 * @default 'am'
 */
$am-prefix: 'am' !default;

/**
 * Helper to store the name of an active module
 * @type {String}
 * @default: ''
 */
$am-activeModule:'';


/**
 * @type function
 * @description Helper that returns the prefixed <moduleName>.
 * @author platdesign <mail@platdesign.de>
 *
 *
 * @param moduleName
 * @returns
 *   <am-prefix>-<moduleName>
 *
 * @example
 *   $moduleName: am-moduleName('btn')
 *
 */
@function am-moduleName($moduleName) {
	@return $am-prefix + "-" + $moduleName;
}




/**
 * @type mixin
 * @description Creates an amcss-module with a given name.
 * @author platdesign <mail@platdesign.de>
 *
 *
 * @param moduleName
 * @returns
 *   [<moduleName>] {
 *   	<content>
 *   }
 *
 * @example
 *   @include am-module('btn') {
 *   	background: #444;
 *   }
 */
@mixin am-module($moduleName) {
	$am-activeModule: $moduleName !global;

	[#{am-moduleName($moduleName)}] {
		@content;
	}
}




/**
 * @type mixin
 * @description Creates an amcss-module-modifier inside of a am-module with a given name.
 * @author platdesign <mail@platdesign.de>
 *
 *
 * @param modifierName
 * @returns
 *   &[<moduleName>~="<modifierName>"] {
 *   	<content>
 *   }
 *
 * @example
 *   @include am-module('btn') {
 *   	background: #444;
 *
 * 		@include am-mod('red') {
 * 			background: #aa0000;
 * 		}
 *   }
 */
@mixin am-mod($modifierName) {
	&[#{am-moduleName($am-activeModule)}~="#{$modifierName}"] {
		@content;
	}
}