[css-mixins] Add intro section

Author: tabatkins

css-mixins-1/Overview.bs

@@ -42,7 +42,51 @@ Introduction {#intro}
 
 	<em>This section is not normative.</em>
 
-Issue: TODO
+	Note: At this time, this specification only defines [=custom functions=],
+	which operate at the level of CSS values.
+	It is expected that it will define "mixins" later,
+	which are functions that operate at the style rule level.
+
+	[=Custom properties=] give authors a lot of power
+	to define useful, sometimes complex values
+	in one place,
+	and then re-use them across their stylesheet.
+	They can vary across the document,
+	or based on Media Queries or other conditionals,
+	making them very flexible and responsive.
+
+	However, their values are <em>fixed</em> at the point they're defined,
+	unable to be changed except by fully overriding their previous definition:
+	a ''--shadow: 2px 2px var(--shadow-color)'' declaration
+	takes its ''--shadow-color'' value from the element it's declared on,
+	and later changes to ''--shadow-color'' on descendant elements
+	don't alter the value of ''--shadow'' for them;
+	they continue to use the shadow color defined where ''--shadow'' was defined.
+	This is a common source of confusion for authors
+	making heavy use of composite variables like this.
+
+	[=Custom functions=] allow authors the same power as [=custom properties=],
+	but <em>parameterized</em>:
+	they have the same flexibility and conditionality as a [=custom property=] definition,
+	but take values from other custom properties
+	(or explicitly as arguments)
+	<em>at the point of use</em>.
+	For example, instead of a ''--shadow'' [=custom property=],
+	a ''--shadow()'' [=custom function=] could be defined instead,
+	like:
+
+	<pre highlight=css>
+	@function --shadow(--color <color> : var(--shadow-color)) {
+		result: 2px 2px var(--color, black);
+	}
+
+	.foo {
+		--shadow-color: blue;
+		box-shadow: --shadow(); // produces a blue shadow
+		/* or just */
+		box-shadow: --shadow(blue);
+	}
+	</pre>
 
 <!-- Big Text: @function