Skip to content

Instantly share code, notes, and snippets.

@NHQ
Forked from lancejpollard/less2stylus.coffee
Created February 9, 2012 19:50
Show Gist options
  • Save NHQ/1782407 to your computer and use it in GitHub Desktop.
Save NHQ/1782407 to your computer and use it in GitHub Desktop.
Convert LESS to Stylus for Twitter Bootstrap
# Quick hack of regular expressions to convert twitter bootstrap from LESS to Stylus
less2stylus = (string) ->
string = string
.replace(/^(\ *)(.+)\ +\{\ *\n?\ */mg, "$1$2\n$1 ") # remove opening brackets
.replace(/^(\ *)([^\ ]+)\ +\{\ *\n?\ *?/mg, "$1$2\n$1 ") # remove opening brackets
.replace(/\ *\{\ *\n*/g, "\n") # remove opening brackets again (some random cases I'm too lazy to think through)
.replace(/\ *\}\ *\n*/g, "\n") # remove closing brackets
.replace(/\;\ *?$/gm, "") # remove semicolons
.replace(/@(\w+):(\ *)\ /g, "\$$1$2 = ") # replace @variable: with $variable =
.replace(/\@/g, "\$")
.replace(/\.([\w-]+)\(/g, "$1(") # replace mixins from .border-radius(4px) to border-radius(4px)
.replace(/,\ */g, ", ") # make all commas have 1 space after them
.replace(/\.less/g, ".styl")
# need to make sure things like -webkit-background-size are left-aligned
# need to handle expressions
.replace(/\ *$/g, "") # remove trailing whitespace
lines = string.split("\n")
indent = 0
for line, i in lines
if line.match(/\w: /) # property name
lines[i] = line.replace(/^\ */, Array(indent + 1).join(" "))
else if !line.match(/\/{2}/)
indent = line.match(/^(\ *)/)[1].length + 2
lines.join("\n")
less = """
// Input grid system
// -------------------------
#inputGridSystem {
.inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @columns) {
width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 10;
}
.generate(@gridColumns, @gridColumnWidth, @gridGutterWidth) {
input,
textarea,
.uneditable-input {
&.span1 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 1); }
&.span2 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 2); }
&.span3 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 3); }
&.span4 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 4); }
&.span5 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 5); }
&.span6 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 6); }
&.span7 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 7); }
&.span8 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 8); }
&.span9 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 9); }
&.span10 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 10); }
&.span11 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 11); }
&.span12 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 12); }
}
}
}
// CSS3 PROPERTIES
// --------------------------------------------------
// Border Radius
.border-radius(@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
"""
stylus = """
// Input grid system
// -------------------------
#inputGridSystem
inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $columns)
width: (($gridColumnWidth) * $columns) + ($gridGutterWidth * ($columns - 1)) - 10
generate($gridColumns, $gridColumnWidth, $gridGutterWidth)
input,
textarea,
.uneditable-input
&.span1
#inputGridSystem > inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 1)
&.span2
#inputGridSystem > inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 2)
&.span3
#inputGridSystem > inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 3)
&.span4
#inputGridSystem > inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 4)
&.span5
#inputGridSystem > inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 5)
&.span6
#inputGridSystem > inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 6)
&.span7
#inputGridSystem > inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 7)
&.span8
#inputGridSystem > inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 8)
&.span9
#inputGridSystem > inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 9)
&.span10
#inputGridSystem > inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 10)
&.span11
#inputGridSystem > inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 11)
&.span12
#inputGridSystem > inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 12)
// CSS3 PROPERTIES
// --------------------------------------------------
// Border Radius
border-radius($1 = 5px)
-webkit-border-radius: $radius
-moz-border-radius: $radius
border-radius: $radius
"""
assertEqual stylus, less2stylus(less)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment