Info

There are cases when local variables require a little extra oomph, such as maths calculations or calc transformations. This is where the eval Object plugin comes into play. In a future rendition of ctr, once I make a decision about how I would like to handle various external plugins, you will be able to create, use, and mix and match an assortment of plugins like the eval Object. Nevertheless, as it stands, this is still an early thought and I have not spent the time to fine tune things yet. But, I figured this little taste would wet your whistle.

Syntax

Description: The eval plugin is defined as a special Object in the local ctr variable Object.

ctr('<#selector>', {
// private variables
$$: {
one: <value:one>
// eval plugin Object
eval: {
two: <value:two>
}
}
<property:one>: '$one$'
<property:two>: '$[eval.two]$'
})
<#selector>:
# private variables
$$:
one: <value:one>
# eval plugin Object
eval:
two: <value:eval>
<property:one>: $one$
<property:two>: $[eval.two]$
<#selector> {
<property:one>: <value:one>;
<property:two>: <value:eval>;
}

Calc

Description: Inside the eval Object, all inner calc references will be removed.

Edit
ctr('.test', {
$$: {
baseHeight: calc(100vh - 100px)
eval: {
halfHeight: 'calc($baseHeight$ / 2)'
}
}
width: 200px
height: '$baseHeight$'
media-sm: {
height: '$[eval.halfHeight]$'
}
})
.test:
$$:
baseHeight: calc(100vh - 100px)
eval:
halfHeight: calc($baseHeight$ / 2)
width: 200px
height: $baseHeight$
media-sm:
height: $[eval.halfHeight]$
.test {
width: 200px;
height: calc(100vh - 100px);
}
@media (min-width: 400px) and (max-width: 600px) {
.test {
height: calc((100vh - 100px) / 2);
}
}
ctr('.test', {
  $$: {
    baseHeight: calc(100vh - 100px)
    eval: {
      halfHeight: 'calc($baseHeight$ / 2)'
    }
  }
  width: 200px
  height: '$baseHeight$'
  media-sm: {
    height: '$[eval.halfHeight]$'
  }
})
.test {
  width: 200px;
  height: calc(100vh - 100px);
}
@media (min-width: 400px) and (max-width: 600px) {
  .test {
    height: calc((100vh - 100px) / 2);
  }
}
.test:
  $$:
    baseHeight: calc(100vh - 100px)
    eval:
      halfHeight: calc($baseHeight$ / 2)
  width: 200px
  height: $baseHeight$
  media-sm:
    height: $[eval.halfHeight]$

Notes

Arith

Description: Inside the eval Object, basic arithmetic can be performed through an arith invocation.

Edit
ctr('.test', {
$$: {
base: 10
multiplier: 2
type: 'px'
eval: {
// 10 * 2 = 20
font-size: 'arith($base$ * $multiplier$)$type$'
}
}
width: 200px
font-size: '$[eval.font-size]$'
})
.test:
$$:
base: 10
multiplier: 2
type: px
eval:
# 10 * 2 = 20
font-size: arith($base$ * $multiplier$)$type$
width: 200px
font-size: $[eval.font-size]$
.test {
width: 200px;
font-size: 20px;
}
ctr('.test', {
  $$: {
    base: 10
    multiplier: 2
    type: 'px'
    eval: {
      // 10 * 2 = 20
      font-size: 'arith($base$ * $multiplier$)$type$'
    }
  }
  width: 200px
  font-size: '$[eval.font-size]$'
})
.test {
  width: 200px;
  font-size: 20px;
}
.test:
  $$:
    base: 10
    multiplier: 2
    type: px
    eval:
      # 10 * 2 = 20
      font-size: arith($base$ * $multiplier$)$type$
  width: 200px
  font-size: $[eval.font-size]$

Notes

Arith Math

Description: Inside the eval Object, in an arith invocation, the Javascript Math Object can be used.

Edit
ctr('.test', {
$$: {
base: 10
eval: {
// 10 * 3.14
top: 'arith( $base$ * Math.PI )'
// 10 * 0.9
left: 'arith( $base$ * Math.sin(3) )'
}
}
top: '$[eval.top]$'
left: '$[eval.left]$'
})
.test:
$$:
base: 10
eval:
# 10 * 3.14
top: arith( $base$ * Math.PI )
# 10 * 0.9
left: arith( $base$ * Math.sin(3) )
top: $[eval.top]$
left: $[eval.left]$
.test {
left: 1.4112;
top: 31.4159;
}
ctr('.test', {
  $$: {
    base: 10
    eval: {
      // 10 * 3.14
      top: 'arith( $base$ * Math.PI )'
      // 10 * 0.9
      left: 'arith( $base$ * Math.sin(3) )'
    }
  }
  top: '$[eval.top]$'
  left: '$[eval.left]$'
})
.test {
  left: 1.4112;
  top: 31.4159;
}
.test:
  $$:
    base: 10
    eval:
      # 10 * 3.14
      top: arith( $base$ * Math.PI )
      # 10 * 0.9
      left: arith( $base$ * Math.sin(3) )
  top: $[eval.top]$
  left: $[eval.left]$

Notes