Convert LESS to Stylus by parsing LESS sources and traversing resulting AST.
% npm install -g less2stylus
% less2stylus styles.less > styles.styl
Bootstrap 3.0 can be translated as-is.
-
every mixin with no params or all params having default values will have corresponding class generated, so
.some-mixin() { ... }
results in
some-mixin() ... .some-mixin some-mixin()
-
call to a mixin with no params will result in an
@extend
of corresponding class, sobody { .some-mixin() }
results in
body @extend .some-mixin
-
@media
directives which use variables to specify a condition on which rules apply will translate into an additional variable declaration which holds@media
condition. This is because of Stylus limitation not to allow variables inside@media
conditions.@media screen and (min-width: tablet) { ... }
results in
var213123edf25df1a = "screen and (min-width: " + tablet + ")" @media var213123edf25df1a ...
-
if there are mixins which named
translate
,translate3d
,scale
,skew
,rotate
then they will be prefixed withmixin-
in resulted Stylus sources. This is to prevent recursive mixin invokations.