Hacss mostly builds upon the familiar syntax of CSS and native inline styles with only minor adjustments.
The most important thing to understand is that whitespace is strictly forbidden. When necessary, use double-underscores (
__), which are converted to spaces.
A declaration is the combination of a property and the corresponding value, separated by a colon (
:), and followed by a semicolon (
;). For example:
Declarations may be enclosed within a pseudo selector scope by surrounding them in curly braces and prepending the pseudo selectors, as in the following examples:
For a list of supported pseudo selectors, please review the pseudo selector guide.
Context may be used to affect the style of an element based on its relationship to another element. Context is the combination of an arbitrary class name applied to the context element, along with any applicable pseudo selectors, and a combinator describing the relationship:
_) indicates that the context element can be any ancestor.
>) indicates that the context element must be the parent.
~) indicates that the context element can be any preceding sibling.
+) indicates that the context element must be the immediately preceding sibling.
Declarations, including those surrounded by context and/or pseudo selectors, may be enclosed within a media query scope by surrounding them in curly braces and prepending an at sign (
@) followed by the media query alias. For example:
large media queries are available by default, you can learn how to customize these (or to add new ones) in the configuration guide.
A rule consists of declarations, pseudo selectors, context, and media queries. The only required component is a single declaration. The style guide encourages one declaration per rule in general; however, it is possible to include multiple declarations through juxtaposition, e.g.