Syntax¶

Description: ctr is defined as a self-invoking Function that provides syntactical abstraction over CSS.


ctr('<#selector>', {
  // key: value
  <...>: <...>
})


<#selector>:
  # key: value
  <...>: <...>


<#selector> {
  <...>: <...>;
}

Notes

If you have not done so already, I recommend you read Start Here first
I know I sound like a broken record, but please learn CSS before even thinking about touching ctr
MDN CSS

Basic¶

Description: A ctr instance creates valid CSS for the <#selector> from its second Object argument whose data is naked.

Edit


ctr('.test', {
  width: 200px
  'height': '200px'
  future-property: 100%
})


.test:
  width: 200px
  height: 200px
  future-property: 100%


.test {
  width: 200px;
  height: 200px;
  future-property: 100%;
}

ctr('.test', {
  width: 200px
  'height': '200px'
  future-property: 100%
})

.test {
  width: 200px;
  height: 200px;
  future-property: 100%;
}

.test:
  width: 200px
  height: 200px
  future-property: 100%

Notes

I use the term “naked” in the sense your key-value pairs should not include semicolons or commas
You can define your properties and values in String format
The future-property is to demonstrate that ctr can handle the future
At the heart of ctr is Stylus and all Stylus parsing rules apply to ctr to a large extent
- Do not use commas, or semicolons
- Avoid using Operators ! ~ + * etc.
If you do run into an error, either Stylus or ctr will throw an error
- Stylus error: Tend to be a bit cryptic, and it may or may not give you some useful info to work with. If it provides you with a useless error report some good old fashion wolf fence debugging does the trick effectively
- ctr error: I have built a half-way decent error reporter that in all likelihood will tell you what the error is and how to fix it

Comments¶

Description: A single-line, two slashes //, Stylus comment can be used in a ctr instance.

Edit


ctr('.test', {
  width: 200px
  // the font-size
  font-size: 20px
  // multi line
  // comment
})


.test:
  width: 200px
  # the font-size
  font-size: 20px
  # multi line
  # comment


.test {
  width: 200px;
  font-size: 20px;
}

ctr('.test', {
  width: 200px
  // the font-size
  font-size: 20px
  // multi line
  // comment
})

.test {
  width: 200px;
  font-size: 20px;
}

.test:
  width: 200px
  # the font-size
  font-size: 20px
  # multi line
  # comment

Notes

Multi-line comments do not work inside of a ctr instance — eg: /* */

Multiple values¶

Description: Properties can have multiple values.

Edit


ctr('.test', {
  box-shadow: 0px 3px 8px 1px rgba(0, 0, 0, 0.75)
  text-shadow: 2px 1px 2px rgba(150, 150, 150, 0.9)
})


.test:
  box-shadow: 0px 3px 8px 1px rgba(0, 0, 0, 0.75)
  text-shadow: 2px 1px 2px rgba(150, 150, 150, 0.9)


.test {
  box-shadow: 0px 3px 8px 1px rgba(0,0,0,0.75);
  text-shadow: 2px 1px 2px rgba(150,150,150,0.9);
}

ctr('.test', {
  box-shadow: 0px 3px 8px 1px rgba(0, 0, 0, 0.75)
  text-shadow: 2px 1px 2px rgba(150, 150, 150, 0.9)
})

.test {
  box-shadow: 0px 3px 8px 1px rgba(0,0,0,0.75);
  text-shadow: 2px 1px 2px rgba(150,150,150,0.9);
}

.test:
  box-shadow: 0px 3px 8px 1px rgba(0, 0, 0, 0.75)
  text-shadow: 2px 1px 2px rgba(150, 150, 150, 0.9)

Edit


// String wrapped properties
ctr('.test', {
  box-shadow: '0px 3px 8px 1px rgba(0,0,0,0.75)'
  text-shadow: '2px 1px 2px rgba(150, 150, 150, 0.9)'
})


# String wrapped properties
.test:
  box-shadow: '0px 3px 8px 1px rgba(0,0,0,0.75)'
  text-shadow: '2px 1px 2px rgba(150, 150, 150, 0.9)'


.test {
  box-shadow: 0px 3px 8px 1px rgba(0,0,0,0.75);
  text-shadow: 2px 1px 2px rgba(150,150,150,0.9);
}

// String wrapped properties
ctr('.test', {
  box-shadow: '0px 3px 8px 1px rgba(0,0,0,0.75)'
  text-shadow: '2px 1px 2px rgba(150, 150, 150, 0.9)'
})

.test {
  box-shadow: 0px 3px 8px 1px rgba(0,0,0,0.75);
  text-shadow: 2px 1px 2px rgba(150,150,150,0.9);
}

# String wrapped properties
.test:
  box-shadow: '0px 3px 8px 1px rgba(0,0,0,0.75)'
  text-shadow: '2px 1px 2px rgba(150, 150, 150, 0.9)'

Notes

It is advantageous for you to use a String format for multiple values to avoid any potential errors
If you have a property value like box-shadow which has multiple parts separated by commas then you must wrap the value in a String (see example below)

Multiple Separate Values¶

Description: Multiple values separated by commas can be used although the value must be in a String format.

Edit


ctr('.test', {
  box-shadow: '3.3em 0em rgba(255, 0, 0, 0.1), 5.71188em 1.00716em rgba(255, 43, 0, 0.6), 5.45022em 1.98372em rgba(255, 85, 0, 0.6), 2.85788em 1.65em #ff8000, 4.44306em 3.72817em rgba(255, 170, 0, 0.9), 3.72817em 4.44306em #ffd500, 1.65em 2.85788em rgba(255, 255, 0, 0.7), 1.98372em 5.45022em rgba(213, 255, 0, 0.8)'
})


.test:
  box-shadow: '3.3em 0em rgba(255, 0, 0, 0.1), 5.71188em 1.00716em rgba(255, 43, 0, 0.6), 5.45022em 1.98372em rgba(255, 85, 0, 0.6), 2.85788em 1.65em #ff8000, 4.44306em 3.72817em rgba(255, 170, 0, 0.9), 3.72817em 4.44306em #ffd500, 1.65em 2.85788em rgba(255, 255, 0, 0.7), 1.98372em 5.45022em rgba(213, 255, 0, 0.8)'


.test {
  box-shadow: 3.3em 0em rgba(255,0,0,0.1), 5.71188em 1.00716em rgba(255,43,0,0.6), 5.45022em 1.98372em rgba(255,85,0,0.6), 2.85788em 1.65em #ff8000, 4.44306em 3.72817em rgba(255,170,0,0.9), 3.72817em 4.44306em #ffd500, 1.65em 2.85788em rgba(255,255,0,0.7), 1.98372em 5.45022em rgba(213,255,0,0.8);
}

ctr('.test', {
  box-shadow: '3.3em 0em rgba(255, 0, 0, 0.1), 5.71188em 1.00716em rgba(255, 43, 0, 0.6), 5.45022em 1.98372em rgba(255, 85, 0, 0.6), 2.85788em 1.65em #ff8000, 4.44306em 3.72817em rgba(255, 170, 0, 0.9), 3.72817em 4.44306em #ffd500, 1.65em 2.85788em rgba(255, 255, 0, 0.7), 1.98372em 5.45022em rgba(213, 255, 0, 0.8)'
})

.test {
  box-shadow: 3.3em 0em rgba(255,0,0,0.1), 5.71188em 1.00716em rgba(255,43,0,0.6), 5.45022em 1.98372em rgba(255,85,0,0.6), 2.85788em 1.65em #ff8000, 4.44306em 3.72817em rgba(255,170,0,0.9), 3.72817em 4.44306em #ffd500, 1.65em 2.85788em rgba(255,255,0,0.7), 1.98372em 5.45022em rgba(213,255,0,0.8);
}

.test:
  box-shadow: '3.3em 0em rgba(255, 0, 0, 0.1), 5.71188em 1.00716em rgba(255, 43, 0, 0.6), 5.45022em 1.98372em rgba(255, 85, 0, 0.6), 2.85788em 1.65em #ff8000, 4.44306em 3.72817em rgba(255, 170, 0, 0.9), 3.72817em 4.44306em #ffd500, 1.65em 2.85788em rgba(255, 255, 0, 0.7), 1.98372em 5.45022em rgba(213, 255, 0, 0.8)'

Notes

The reason the value has to be a String is due to commas, the silent killer of ctr

Stylus Variables¶

Description: Stylus variables can be used in a ctr instance.

Edit


$font-size = 14px

ctr('.test', {
  width: 200px
  font-size: $font-size
})


# Technically, not a "Stylus" variable,
# but YAML also has a pseudo global variable scope
$$:
  font-size: 14px

.test:
  width: 200px
  font-size: $font-size$


.test {
  width: 200px;
  font-size: 14px;
}

$font-size = 14px

ctr('.test', {
  width: 200px
  font-size: $font-size
})

.test {
  width: 200px;
  font-size: 14px;
}

# Technically, not a "Stylus" variable,
# but YAML also has a pseudo global variable scope
$$:
  font-size: 14px

.test:
  width: 200px
  font-size: $font-size$

Notes

Like in any programming language, global Stylus variables are a risky proposition, so I recommend you use local and or global ctr variables

Built-In Functions¶

Description: All relevant Stylus built-in functions can be used in a ctr instance.

Edit


ctr('.test', {
  width: 200px
  top: unit(sin(3*PI/4), 'em')
  color: alpha(cornflowerblue, 0.5)
  background: transparentify(green, red, 0.5)
})


.test:
  width: 200px
  top: unit(sin(3*PI/4), em)
  color: alpha(cornflowerblue, 0.5)
  background: transparentify(green, red, 0.5)


.test {
  width: 200px;
  top: 0.707106781em;
  color: rgba(100,149,237,0.5);
  background: rgba(0,255,0,0.5);
}

ctr('.test', {
  width: 200px
  top: unit(sin(3*PI/4), 'em')
  color: alpha(cornflowerblue, 0.5)
  background: transparentify(green, red, 0.5)
})

.test {
  width: 200px;
  top: 0.707106781em;
  color: rgba(100,149,237,0.5);
  background: rgba(0,255,0,0.5);
}

.test:
  width: 200px
  top: unit(sin(3*PI/4), em)
  color: alpha(cornflowerblue, 0.5)
  background: transparentify(green, red, 0.5)

Notes

As a rule of thumb it is probably not the best idea to use sin to configure top
Color Functions
Math Functions
Misc Functions

Iteration¶

Description: Stylus iteration can be used with ctr instances.

Edit


$font-size-1 = 1em
$font-size-2 = 2em
$font-size-3 = 3em

for i in 1..3
  ctr('.test' + i, {
    width: 200px
    font-size: lookup('$font-size-' + i)
  })


.test1 {
  width: 200px;
  font-size: 1em;
}
.test2 {
  width: 200px;
  font-size: 2em;
}
.test3 {
  width: 200px;
  font-size: 3em;
}

$font-size-1 = 1em
$font-size-2 = 2em
$font-size-3 = 3em

for i in 1..3
  ctr('.test' + i, {
    width: 200px
    font-size: lookup('$font-size-' + i)
  })

.test1 {
  width: 200px;
  font-size: 1em;
}
.test2 {
  width: 200px;
  font-size: 2em;
}
.test3 {
  width: 200px;
  font-size: 3em;
}

Notes

Honestly, if you need more advanced functionality like iteration save yourself a headache and just use the Javascript API

Syntax¶

Basic¶

Comments¶

Multiple values¶

Multiple Separate Values¶

Stylus Variables¶

Built-In Functions¶

Iteration¶

Compile Status: valid

Help

Resourses

Account

Syntax¶

Basic¶

Comments¶

Multiple values¶

Multiple Separate Values¶

Stylus Variables¶

Built-In Functions¶

Iteration¶

Compile Status: valid

Social

Help

Resourses

Account