🎉 Switch to SASS

mango.yaml

@@ -1,9 +1,9 @@
 src_folder: src
 dist_folder: dist
 styles:
-  - src/styles/index.styl
-  - src/styles/oldie.styl
-  - src/styles/print.styl
+  - src/styles/index.sass
+  - src/styles/oldie.sass
+  - src/styles/print.sass
 scripts:
   - src/scripts/index.es6
   #- src/serviceWorker.es6
@@ -25,10 +25,11 @@ buildstamp:
   - dist/scripts/index.js
 dependencies:
   - lt-ie-9
-  - stylus-normalize
+  - normalize-scss
+  - bourbon
   - jquery
 data:
   manifest: src/data/manifest.json
 hooks:
   init: mango install
-version: ">=0.27"
+version: ">=0.30"

src/styles/_animations.sass

@@ -0,0 +1,5 @@
+@keyframes spin
+	0%
+		transform: rotate(0deg) translateZ(0)
+	100%
+		transform: rotate(360deg) translateZ(0)

src/styles/abstract/accessible.sass

@@ -0,0 +1,6 @@
+%accessible
+	+size(1px)
+	position: absolute !important
+	clip: rect(1px 1px 1px 1px) /* IE6, IE7 */
+	clip: rect(1px, 1px, 1px, 1px)
+	overflow: hidden

src/styles/comps/layout.sass

@@ -0,0 +1,8 @@
+.layout
+	display: block
+	max-width: 45em
+	margin: $spacing auto
+
+
+	+media($landscape)
+		padding: 0 60px

src/styles/global.sass

@@ -0,0 +1,66 @@
+/*! Default styles from your beloved manGoweb (http://mangoweb.cz) */
+
+*, *:before, *:after
+	box-sizing: border-box
+
+html
+	font-size: $base-font-size
+
+body
+	background: $c-text-back
+	color: $c-text
+	font-family: $font-family-base
+	font-size: $base-font-size
+	line-height: $gratio
+	overflow-x: hidden
+	padding: 1em
+
+a
+	color: $c-main
+	text-decoration: underline
+
+h1, h2, h3, h4, h5, h6
+	font-family: $font-family-head
+	line-height: 1
+	margin: $spacing*2 0 1em
+	text-rendering: optimizeLegibility
+
+img
+	max-width: 100%
+	height: auto
+	vertical-align: middle
+
+p
+	margin: 0 0 $spacing
+
+	img
+		margin-bottom: $spacing
+
+ol, ul, li
+	margin: 0
+	padding: 0
+
+blockquote
+	margin: $spacing 0
+	padding: $padding 0 $padding $spacing
+	border-left: 2px solid
+	color: $c-text-light
+
+table
+	width: 100%
+
+input,
+button,
+select,
+textarea
+	font-family: inherit
+	font-size: inherit
+	line-height: inherit
+
+svg
+	pointer-events: none
+
+b, i
+	font-style: normal
+	font-weight: normal
+

src/styles/index.sass

@@ -0,0 +1,29 @@
+
+// ## Mixins
+// Bourbon docs at http://bourbon.io/docs/
+@import '../../node_modules/bourbon/app/assets/stylesheets/bourbon'
+
+// ## Settings and variables
+@import 'variables'
+
+// ## Animations
+@import '_animations'
+
+// ## Mixins
+@import 'mixins/*'
+
+// ## Abstract
+@import 'abstract/*'
+
+// ## Frameworks
+@import '../../node_modules/normalize-scss/sass/normalize/import-now'
+
+// ## Web styles
+@import 'global'
+
+// ## Components
+@import 'parts/*'
+
+// ## Compositions
+@import 'comps/*'
+

src/styles/mixins/media.sass

@@ -0,0 +1,45 @@
+// A helper mixin for @media queries
+	Usage:
+		+media(mediaQuery [, mediaQuery]*)
+			foo: bar
+			…
+
+		where mediaQuery is a sass list of one of
+		- string of a classic css feature query
+		- unitless number (will be interpreted as the pixel argument for min-width)
+		- number with a special unit 'M' (e.g. 123M) (will be interpreted as the pixel argument for max-width)
+
+	Examples:
+		+media($break480 $break768M, $break992 $break1200M)
+		// @media (min-width: 480px) and (max-width: 767px), (min-width: 992px) and (max-width: 1199px)
+
+		+media(123)
+		// @media (min-width: 123px)
+
+		+media(123M)
+		// @media (max-width: 456px)
+
+		+media($break480 '(screen)', 300 500M, $landscape)
+		// @media (min-width: 480px) and (screen), (min-width: 300px) and (max-width: 500px), (orientation: landscape)
+
+
+=media($breakpoints...)
+	$media: ''
+	$disjunctionCount: length($breakpoints)
+
+	@for $i from 1 through $disjunctionCount
+		$conjunction: nth($breakpoints, $i)
+		$conjunctionCount: length($conjunction)
+
+		@for $j from 1 through $conjunctionCount
+			$literal: nth($conjunction, $j)
+
+			@if type-of($literal) == number
+				$literal: '(#{if(unit($literal) == 'M', 'max', 'min')}-width: #{$literal / ($literal * 0 + 1)}px)'
+
+			$media: $media + $literal + if($j == $conjunctionCount, '', ' and ')
+
+		$media: $media + if($i == $disjunctionCount, '', ', ')
+
+	@media #{$media}
+		@content

src/styles/mixins/position.sass

@@ -0,0 +1,34 @@
+// Usage:
+		+absolute(top right bottom left)
+		+absolute(top horizontal bottom)
+		+absolute(vertical horizontal)
+		+absolute(offset)
+
+	Examples:
+		+absolute(1px 2px 3px 4px) // position: absolute; top: 1px; right: 2px; bottom: 3px; left: 4px
+
+		+absolute(1px 2px 3px) // position: absolute; top: 1px; right: 2px; bottom: 3px; left: 2px
+
+		+absolute(1px 2px) // position: absolute; top: 1px; right: 2px; bottom: 1px; left: 2px
+
+		+absolute(1px) // position: absolute; top: 1px; right: 1px; bottom: 1px; left: 1px
+
+		+absolute(1px null null 2px) // position: absolute; top: 1px; left: 2px
+
+	All the other position mixins behave identically
+
+
+=absolute($properties: null null null null)
+	+position(absolute, $properties)
+
+
+=fixed($properties: null null null null)
+	+position(fixed, $properties)
+
+
+=relative($properties: null null null null)
+	+position(relative, $properties)
+
+
+=sticky($properties: null null null null)
+	+position(sticky, $properties)

src/styles/parts/appName.sass

@@ -0,0 +1,3 @@
+.appName
+	padding-left: 0.3em
+	border-left: 0.3em solid $c-main

src/styles/parts/example.sass

@@ -0,0 +1,43 @@
+.example
+	+clearfix
+	margin: $spacing 0
+	padding: $padding
+	background: #f0f0f0
+	border-radius: $radius
+	text-align: center
+
+	&-child
+		+relative
+		display: block
+		margin: 10px auto
+		background: lightyellow
+		border: 1px solid yellow
+		border-radius: $radius
+		outline: none
+		cursor: pointer
+		box-shadow: 1px 1px 5px rgba(#000, .5)
+
+		&:active
+			top: 1px
+			left: 1px
+			box-shadow: 0 0 3px rgba(#000, .5)
+
+		&:hover .example-shape
+			animation: spin 1.1s infinite linear
+
+
+	&-shape
+		margin-right: 5px
+
+	&-text
+		font-weight: bold
+		vertical-align: middle
+
+
+	+media($break480)
+		padding: $padding*2 $padding
+		text-align: left
+
+		&-child
+			float: right
+			margin: -3px 10px 0