Atomic SCSS example

atomic-out.css

.dialog__control__action, .action {
  color: silver;
}

.dialog__control__action, .action {
  border-radius: 0.25rem;
}

.dialog__control__action, .action {
  margin: 0 1rem 1rem 0;
}

.dialog__control__action {
  float: right;
}

.dialog__control__action, .action {
  background-color: red;
}

.dialog__control__action, .action {
  padding: 0.5rem 1rem;
  position: inline-block;
}

/*doc
---
title: Dialog Control Buttons
parent: dialog
---

This is how we'd like to create controls for dialogs.
'''html_example
<ul class="dialog__control">
    <li class="dialog__control__action"><a href="#test">Ok</a></li>
</ul>
'''
*/
.dialog__control__action {
  background-color: blue;
}

/*doc
---
title: Actions
---
Default style for all 'action links'
'''html_example
<a class="action">Send</a>
'''
*/

atomic.scss

//Boson
$c-primary: red !default;
$c-offset: silver !default;
$white-space: 1rem !default;

//Electrons
%reset {
	color: inherit;
	font-size: 1em;
	font-weight: inherit;
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: inherit;
	text-decoration: none;
}

//Quarks
%link {
    color: $c-primary;
}

%link-offset {
    color: $c-offset;
}

%tiny-radius {
    border-radius: 0.25 * $white-space;
}

%block-spacing {
    margin: 0 $white-space $white-space 0;
}

%rightAlignedContent {
    float: right;
}

//Atoms
%action-primary {
    @extend %link-offset;
    background-color: $c-primary;
}

%actionable {
    @extend %reset;
    @extend %link;
}

%button {
    @extend %action-primary;
    @extend %tiny-radius;
    @extend %block-spacing;
    padding: (0.5 * $white-space) $white-space;
    position: inline-block;
}

//Molecule
%dialogControl {
    @extend %button;
    @extend %rightAlignedContent;
}

//Organisms
/*doc
---
title: Dialog Control Buttons
parent: dialog
---

This is how we'd like to create controls for dialogs.
'''html_example
<ul class="dialog__control">
    <li class="dialog__control__action"><a href="#test">Ok</a></li>
</ul>
'''
*/
.dialog__control__action {
    @extend %dialogControl;
    background-color: blue;
}

/*doc
---
title: Actions
---
Default style for all 'action links'
'''html_example
<a class="action">Send</a>
'''
*/
.action {
    @extend %button;
}