Skip to content

Instantly share code, notes, and snippets.

@platdesign platdesign/amcss-helper
Last active Aug 29, 2015

Embed
What would you like to do?
SCSS-Mixins for creating "Attribute Modules for CSS"
/**
* 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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.