diff --git a/scss/demo.expected.raydebug b/scss/demo.expected.raydebug new file mode 100644 index 0000000..d120565 --- /dev/null +++ b/scss/demo.expected.raydebug @@ -0,0 +1,163 @@ +comment + +comment + +comment + +variable($brand) operator(:) color(#b3b3b5)operator(;) +variable($brand--alt)operator(:) value(null)operator(;) + +variable($isSomething)operator(:) value(false) important(!default)operator(;) + +variable($array) operator(:) stringoperator(,) stringoperator(,) stringoperator(;) + +directive(@import) stringinclude(;) + +class(%clearfix)operator(,) +class(.clearfix) operator({) + local_variable(&)pseudo_class(:after) operator({) key(content)operator(:) stringoperator(;) key(display)operator(:) value(table)operator(;) key(clear)operator(:) value(both)operator(;) operator(}) +operator(}) + +function(@mixin box-shadow)operator(()variable($args)operator(\)) operator({) + directive(@each) variable($prefix) value(in) variable($array) operator({) + inlinekey(box-shadow)operator(:) variable($args)operator(;) + operator(}) +operator(}) + +directive(@function) predefined(em)operator(()variable($size)operator(,) variable($context)operator(:) float(14px)operator(\)) operator({) + + directive(@warn) stringoperator(;) + + directive(@return) operator(()variable($size) operator(/) variable($context)operator(\)) operator(*) float(1em)operator(;) +operator(}) + + +function(@mixin switch)operator(()variable($condition)operator(,) variable($selector)operator(:) stringoperator(\))operator({) + directive(@if) variable($condition) operator({) + directive(@content)operator(;) + operator(}) directive(@else) operator({) + inline local_variable(&) operator({) + directive(@content) + operator(}) + operator(}) + + directive(@debug) stringdelimiter(")>operator(;) +operator(}) + +class(.selector) operator({) + key(color)operator(:) variable($brand)operator(;) + key(background)operator(:) variable($brand--alt) value(or) color(#000)operator(;) + + key(width)operator(:) float(20%)operator(;) + + operator(~) tag(li) operator({) key(margin-left)operator(:) float(5px)operator(;) operator(}) + + tag(code) operator({) + key(text-align)operator(:) value(right)operator(;) + key(font-family)operator(:) string + operator(}) + + + directive(@media) operator(()key(min-width)operator(:) float(32em)operator(\)) operator({) + key(float)operator(:) value(left)operator(;) + operator(}) +operator(}) + +directive(@media) operator(()key(min-width)operator(:) float(32em)operator(\)) operator({) + class(.grid) operator({) key(float)operator(:) value(left)operator(;) operator(}) +operator(}) + +tag(footer) operator({) + key(position)operator(:) value(relative)operator(;) + + class(.copy) operator({) + key(background)operator(:) functionoperator(;) + operator(}) + +operator(}) + + +tag(a) operator({) + comment(// silent extend) + directive(@extend) class(%button) important(!optional)operator(;) + + directive(@include) predefined(box-shadow)operator(()float(0) float(1px) float(0) float(1px) color(#fff)operator(,) value(inset) float(1px) float(1px) float(5px) predefined(rgba)operator(()color(#000)operator(,) float(0.4)operator(\))operator(\))operator(;) + + comment(// nesting of properties) + key(font)operator(:) operator({) + key(size)operator(:) predefined(em)operator(()float(28)operator(,)float(18)operator(\))operator(;) + key(family)operator(:) variable($font__serif)operator(;) + key(weight)operator(:) value(normal)operator(;) + operator(}) + + local_variable(&)pseudo_class(:hover)operator(,) + local_variable(&)pseudo_class(:focus) operator({) + + comment(// extend via psuedo) + directive(@extend) class(.button)pseudo_class(:hover)operator(;) + + key(background)operator(:) predefined(linear-gradient)operator(()value(to) value(bottom)operator(,) variable($brand)operator(,) predefined(darken)operator(()variable($brand)operator(,) float(20%)operator(\))operator(\))operator(;) + + operator(}) +operator(}) + + +id(#main) operator({)operator(}) + +tag(div)id(#main) operator({)operator(}) + +tag(header) operator({) + local_variable(&)id(#main) operator({)operator(}) +operator(}) + + + +class(.nav) operator({) + key(position)operator(:) value(absolute)operator(;) + key(top)operator(:) float(0)operator(;) key(left)operator(:) float(0)operator(;) + + tag(ul) operator({) key(margin)operator(:) float(0)operator(;) key(padding)operator(:) float(0)operator(;) operator(}) + + tag(li) operator({) + key(float)operator(:) value(left)operator(;) + + operator(+) tag(li) operator({) key(margin-left)operator(:) float(5px)operator(;) operator(}) + operator(}) + + tag(a) operator({) + key(display)operator(:) value(block)operator(;) + + local_variable(&)pseudo_class(:hover)operator(,) + local_variable(&)pseudo_class(:focus) operator({) + key(background)operator(:) variable($primary)operator(;) + operator(}) + + local_variable(&)class(.link--root) operator({) key(background)operator(:) color(#222)operator(;) operator(}) + operator(}) + + class(.js) local_variable(&) operator({) key(position)operator(:) value(static)operator(;) operator(}) + + id(#hd) local_variable(&) operator({) key(float)operator(:) value(left)operator(;) operator(}) + +operator(}) + +id(#main) tag(ul)class(.links) tag(a) operator({) key(display)operator(:) value(inline-block)operator(;) operator(}) + + + +comment +directive(@for) variable($i) value(from) float(1) value(through) float(3) operator({) + class(.item-#{$i}) operator({) key(width)operator(:) float(2em) operator(*) variable($i)operator(;) operator(}) +operator(}) + +directive(@each) variable($animal) value(in) value(puma)operator(,) value(sea-slug)operator(,) value(egret)operator(,) value(salamander) operator({) + class(.#{$animal}-icon) operator({) + key(background-image)operator(:) functionoperator(;) + operator(}) +operator(}) + +variable($i)operator(:) float(6)operator(;) +directive(@while) variable($i) operator(>) float(0) operator({) + class(.item-#{$i}) operator({) key(width)operator(:) float(2em) operator(*) variable($i)operator(;) operator(}) + variable($i)operator(:) variable($i) operator(-) float(2)operator(;) +operator(}) \ No newline at end of file diff --git a/scss/demo.in.scss b/scss/demo.in.scss new file mode 100644 index 0000000..1e90e3f --- /dev/null +++ b/scss/demo.in.scss @@ -0,0 +1,163 @@ +// inline comment + +/* block comment */ + +/*! keep comment */ + +$brand : #b3b3b5; +$brand--alt: null; + +$isSomething: false !default; + +$array : "-webkit-", "-moz-", ""; + +@import "path/to/import"; + +%clearfix, +.clearfix { + &:after { content: ""; display: table; clear: both; } +} + +@mixin box-shadow($args) { + @each $prefix in $array { + #{$array}box-shadow: $args; + } +} + +@function em($size, $context: 14px) { + + @warn "size wasnt a unit, forcing pixels"; + + @return ($size / $context) * 1em; +} + + +@mixin switch($condition, $selector: ".lt-ie8"){ + @if $condition { + @content; + } @else { + #{$selector} & { + @content + } + } + + @debug "selector was #{$selector}"; +} + +.selector { + color: $brand; + background: $brand--alt or #000; + + width: 20%; + + ~ li { margin-left: 5px; } + + code { + text-align: right; + font-family: "monaco" + } + + + @media (min-width: 32em) { + float: left; + } +} + +@media (min-width: 32em) { + .grid { float: left; } +} + +footer { + position: relative; + + .copy { + background: url("images/#{$sprite}"); + } + +} + + +a { + // silent extend + @extend %button !optional; + + @include box-shadow(0 1px 0 1px #fff, inset 1px 1px 5px rgba(#000, 0.4)); + + // nesting of properties + font: { + size: em(28,18); + family: $font__serif; + weight: normal; + } + + &:hover, + &:focus { + + // extend via psuedo + @extend .button:hover; + + background: linear-gradient(to bottom, $brand, darken($brand, 20%)); + + } +} + + +#main {} + +div#main {} + +header { + &#main {} +} + + + +.nav { + position: absolute; + top: 0; left: 0; + + ul { margin: 0; padding: 0; } + + li { + float: left; + + + li { margin-left: 5px; } + } + + a { + display: block; + + &:hover, + &:focus { + background: $primary; + } + + &.link--root { background: #222; } + } + + .js & { position: static; } + + #hd & { float: left; } + +} + +#main ul.links a { display: inline-block; } + + + +// loops +@for $i from 1 through 3 { + .item-#{$i} { width: 2em * $i; } +} + +@each $animal in puma, sea-slug, egret, salamander { + .#{$animal}-icon { + background-image: url('/images/#{$animal}.png'); + } +} + +$i: 6; +@while $i > 0 { + .item-#{$i} { width: 2em * $i; } + $i: $i - 2; +} \ No newline at end of file diff --git a/scss/suite.rb b/scss/suite.rb new file mode 100644 index 0000000..791485e --- /dev/null +++ b/scss/suite.rb @@ -0,0 +1,2 @@ +class SCSS < CodeRay::TestCase +end