Proposal for abstract design specification

readme.md

Exploring a more effiecient language for describing abstract styles

These examples look like adaptations of CSS, SASS and PostCSS but the syntax could very well be changed to look more like YAML or something else. The main issue with using an object style notation of describing abstract styles is that it offers little definition of more advanced constructs like, variables (single values), classes, placeholders, selectors (group styles), component styles (groups of groups of styles).

The below ideas could perhaps be achieved as an extension of CSS (using PostCSS or a custom CSS parser) or it's own language (which could maybe be platform agnostic).

When looking at the examples, bear in mind that what is written would be processed and outputted to something, for example native CSS.

Create Objects and Arrays (also double as property definitions)

breakpoint: [
	"600px",
	"900px",
	"1200px",
	"1800px"
]

border: {
	color: red,
	width: small,
	style: solid
}

Reference objects and variables in property values

.box {
    border: size.large color.red solid;
}

Automatically lookup current property as variable name

a {
    color: red;
}

// same as

a {
    color: color.red;
}

For loops

Create properties dynamically using a for loop

margin: {
    @for size, i in ["small", "medium", "large"] {
        $size: number.octave * i;
    }
}

Variables can have interporlation

number: {
	base: {
		@for i in breakpoint [	
			i * 16px
		]
	}
}

Sharing styles

font: {
	style: {
		text: {
			font-family: text,
			line-height: '1.5'
		}
		display: {
			...self.text,
			font-family: display,
			line-height: number.octave
		}
		heading: {
			...self.text,
			font-weight: '500'
		}
		link: {
			...self.text,
			text-decoration: 'underline'
		}
		caps: {
			...self.heading,
			letter-spacing: '0.23em',
			text-transform: 'uppercase',
			font-weight: '600'
		}
		code: {
			...self.text,
			font-size: '0.9em',
			font-family: code
		}
	}
}

Elements

Define elements and selectors as you would normally in CSS

h1 {
    margin: small small medium;
}

Combine styles from another rule set

text: {
    font-family: "Arial";
    line-height: 1.4;
    color: black;
}

button {
    ...text;
    border: 1px solid red;
}

Aliases

Use aliases to represent groups of selectors

@alias heading h1, h2, h3, h4, h5, h6;

:heading {
    font-weight bold;
}

Other features

Both these are equal

.button {
    border: 1px solid red
}

.button {
    border: [
    1px,
    solid,
    red
   ]
}

And can be accessed using

.model {
  background-color: button.border[2];
}

Properties with a hyphen or space can be accessed using dot notation.

background-color: green;

:text {
  color: background.color;
}

Responsive class names

@for i in 1...10 {
    :responsive(.width-${i}) {
        width: $i * 100px;
    }
}

or maybe?

breakpoint: {
    sm: 600px,
    md: 900px,
    lg: 1200px,
    xlg: 1800px
}

@for i in 1...10 {
    .${breakpoint}-width-${i} {
        width: $i * 100px;
    }
}

Functions

@function escape(value) {
    // code that escapes css idenitifiers
}

.${escape(w-1/4)} {
    width: 25%;
}

The delimiters ;and , are optional

Options

It would be useful to control how the language is parsed. For example syntax with brackets or without? Output object/json?

issues.md

How to lookup properties?

red: #FF0000;

color: {
  red: #CD0000;
  blue: #001AFF;
  green: #00FF19;
}

button {
  font: {
    size: 20px;
  }
}

.modal {
  color: red;
  background-color: @this.color; // -> red
  border: @button.font.size; // -> 20px
  color: @red; // -> #FF0000
  color: @blue; // -> #001AFF
  color: @color.red; // -> #CD0000
}