REFERENCE PR

app/assets/utensils/breadcrumb/_breadcrumb.sass

@@ -13,7 +13,7 @@ $breadcrumb-divider-color: $breadcrumb-color !default
   border-radius: $breadcrumb-radii
 
 .breadcrumb > li
-  +inline-block
+  display: inline-block
   color: $breadcrumb-color
   font-weight: $breadcrumb-font-weight
   &:after

app/assets/utensils/button_group/_button_group.sass

@@ -2,14 +2,14 @@ $button-group-next-offset: 0.5em !default
 
 .button-group
   @extend %clearfix
-  +box-sizing(border-box)
+  box-sizing: border-box
   position: relative
 
 .button-group + .button-group
   margin-left: $button-group-next-offset
 
 .button-toolbar .button-group
-  +inline-block
+  display: inline-block
 
 .button-group > a,
 .button-group > button
@@ -26,7 +26,7 @@ $button-group-next-offset: 0.5em !default
   z-index: 2
 
 .button-group-vertical
-  +inline-block
+  display: inline-block
 
 .button-group-vertical > a,
 .button-group-vertical > button

app/assets/utensils/button_modifiers/_button_modifiers.sass

@@ -13,7 +13,7 @@ $btn-size-multiplier: 2 !default
   margin-top: $btn-block-spacing
 
 .btn-transition
-  +transition(all $btn-speed $btn-timing-function)
+  transition: all $btn-speed $btn-timing-function
 
 .btn-xsmall
   +font-size($btn-base-font-size - ($btn-size-multiplier * 2))

app/assets/utensils/button_semigloss/_button_semigloss.sass

@@ -2,9 +2,16 @@ $auto-generate-semigloss: false !default
 
 // The base mixin for creating a semigloss button
 @mixin semigloss-button($bgc, $color:#fff, $hover-percent:10%, $active-percent:15%, $border-percent:30%, $padding:$base-padding, $radii:$radii)
-  +box-sizing(border-box)
-  +inline-block
-  +linear-gradient(rgba(white, 0.2), rgba(black, 0.05), $fallback: $bgc)
+  box-sizing: border-box
+  display: inline-block
+
+  // The Bourbon linear-gradient mixin has been deprecated. Translated
+  // replacement CSS from the old source:
+  // https://github.com/thoughtbot/bourbon/blob/v4.2.2/app/assets/stylesheets/css3/_linear-gradient.scss
+  //+linear-gradient(rgba(white, 0.2), rgba(black, 0.05), $fallback: $bgc)
+
+  background: linear-gradient(rgba(white, 0.2), rgba(black, 0.05))
+
   +font-size($base-font-size)
   border: 1px solid darken($bgc, $border-percent)
   border-radius: $radii

app/assets/utensils/carousel/_carousel.sass

@@ -2,7 +2,7 @@ $carousel-height: 400px !default
 
 .carousel
   @extend %clearfix
-  +box-sizing(border-box)
+  box-sizing: border-box
   overflow: hidden
   position: relative
   width: 100%
@@ -25,13 +25,13 @@ $carousel-height: 400px !default
   z-index: 2
 
 .carousel .carousel-panel
-  +box-sizing(border-box)
+  box-sizing: border-box
   +user-select()
   position: relative
   float: left
 
 .carousel-figure
-  +box-sizing(border-box)
+  box-sizing: border-box
 
 .carousel[data-bindable="carousel"]
   height: $carousel-height

app/assets/utensils/collapse/_collapse.sass

@@ -2,7 +2,7 @@ $collapse-duration: $speed !default
 $collapse-timing-function: $ease-in-out-quart !default
 
 .collapse
-  +transition(height $collapse-duration $collapse-timing-function)
+  transition: height $collapse-duration $collapse-timing-function
   position: relative
   overflow: hidden
   height: 0

app/assets/utensils/container/_container.sass

@@ -3,7 +3,7 @@ $container-padding-right: $container-padding-left !default
 
 .container
   @extend %clearfix
-  +box-sizing(border-box)
+  box-sizing: border-box
   max-width: $base-width * 1px
   margin-left: auto
   margin-right: auto

app/assets/utensils/cursor_hand/_cursor_hand.sass

@@ -8,7 +8,7 @@ $cursor-closed-hand-path: "cursor_hand/cursors/closedhand.cur" !default
   cursor: -webkit-grab
 
 .handCursor
-  cursor: asset-url($cursor-open-hand-path, image), default !important
+  cursor: image-url($cursor-open-hand-path), default !important
 
 .handGrab
   cursor: hand
@@ -17,5 +17,5 @@ $cursor-closed-hand-path: "cursor_hand/cursors/closedhand.cur" !default
   cursor: -webkit-grabbing
 
 .handGrabCursor
-  cursor: asset-url($cursor-closed-hand-path, image), default !important
+  cursor: image-url($cursor-closed-hand-path), default !important
 

app/assets/utensils/form_controls/_form_controls.sass

@@ -34,12 +34,12 @@ $form-actions-well-fill-bgc: darken($form-actions-well-bgc, 10%) !default
 
 // Base container settings
 .control-group
-  +box-sizing(border-box)
+  box-sizing: border-box
   margin-bottom: $form-group-spacing
 
 .form-actions
   @extend %clearfix
-  +box-sizing(border-box)
+  box-sizing: border-box
   background-color: transparent
   border-top: 1px solid $form-border
   margin-top: $form-group-spacing * 2
@@ -92,7 +92,7 @@ label
 .hint-block
   display: block
 .hint-inline
-  +inline-block
+  display: inline-block
 
 // Text input controls
 input[type="text"],
@@ -110,8 +110,8 @@ input[type="week"],
 input[type="number"],
 .input-bg,
 textarea
-  +inline-block
-  +box-sizing(border-box)
+  display: inline-block
+  box-sizing: border-box
   +font-size($base-font-size)
   background-color: $form-bgc
   border: 1px solid $form-border
@@ -126,8 +126,8 @@ textarea
 input[type="range"],
 input[type="color"],
 input[type="file"]
-  +inline-block
-  +box-sizing(border-box)
+  display: inline-block
+  box-sizing: border-box
   +font-size($base-font-size)
   color: $form-color
   margin-bottom: 0.5em
@@ -159,17 +159,17 @@ textarea
 // Define colors for placeholders
 input,
 textarea
-  @include placeholder
+  ::placeholder
     color: $placeholder
 input.search-query
-  @include placeholder
+  ::placeholder
     color: $placeholder-search
 
 // Select controls
 select
-  +box-sizing(border-box)
+  box-sizing: border-box
   +font-size($base-font-size)
-  +inline-block
+  display: inline-block
   background-color: $form-bgc
   border: 1px solid $form-border
   color: $form-color
@@ -191,7 +191,7 @@ select[size]
 
 .checkbox-inline,
 .radio-inline
-  +inline-block
+  display: inline-block
   margin-right: 1em
   margin-bottom: 1.5em
 
@@ -265,7 +265,7 @@ input[type="file"]
 
     .control-group.#{$_class_name}
       input, textarea
-        @include placeholder
+        ::placeholder
           color: lighten($_color_value, 30%)
 
       input, textarea, select
@@ -278,7 +278,7 @@ input[type="file"]
       .hint-block.#{$_class_name}-msg
         display: block
       .hint-inline.#{$_class_name}-msg
-        +inline-block
+        display: inline-block
 
 // HTML5 invalid states
 input:focus:required:invalid,

app/assets/utensils/form_inline/_form_inline.sass

@@ -23,7 +23,7 @@
 
 .form-inline .checkbox-label,
 .form-inline .radio-label
-  +inline-block
+  display: inline-block
   margin-right: 1em
 
 .form-inline .checkbox-label,
@@ -34,7 +34,7 @@
   margin-bottom: 0
 
 .form-inline .control-label
-  +inline-block
+  display: inline-block
 
 .form-inline input[type="button"],
 .form-inline input[type="submit"],

app/assets/utensils/form_stack/_form_stack.sass

@@ -72,10 +72,10 @@
   margin-left: -1em
 
 .form-stack .control-grouping
-  +box-sizing(border-box)
+  box-sizing: border-box
   margin-bottom: $form-group-spacing
   .control-group
-    +inline-block
+    display: inline-block
     vertical-align: top
     width: 31%
     margin-right: 2%

app/assets/utensils/icon_caret/_caret.sass

@@ -4,7 +4,7 @@ $caret-color-hover: $link-hover !default
 $caret-color-active: $link-active !default
 
 .caret
-  +inline-block
+  display: inline-block
   vertical-align: middle
   border-width: $caret-size
   border-style: solid

app/assets/utensils/lib/index.sass

@@ -1,4 +1,4 @@
-@import functions
-@import mixins
-@import placeholders
+@import functions/index
+@import mixins/index
+@import placeholders/index
 

app/assets/utensils/lib/mixins/_containers.sass

@@ -1,15 +1,15 @@
 @mixin base-column
-  +box-sizing(border-box)
+  box-sizing: border-box
   display: block
   float: left
 
 @mixin base-column-right
-  +box-sizing(border-box)
+  box-sizing: border-box
   display: block
   float: right
 
 @mixin base-row
-  +box-sizing(border-box)
+  box-sizing: border-box
   +clearfix
   display: block
 

app/assets/utensils/lib/mixins/_float-fill.sass

@@ -5,7 +5,7 @@
 // .col-flex
 //   +float-fill(100px, right)
 @mixin float-fill($spacer, $float)
-  +box-sizing(border-box)
+  box-sizing: border-box
   float: $float
   width: 100%
   @if $float == right
@@ -25,7 +25,7 @@
 //   float: right
 //   width: 100px
 @mixin float-fill-3-col-center($spacer-left, $min-width:0px, $spacer-right:0)
-  +box-sizing(border-box)
+  box-sizing: border-box
   float: left
   min-width: $min-width
   padding: 0 $spacer-right 0 $spacer-left

app/assets/utensils/media_grid/_media_grid.sass

@@ -4,15 +4,15 @@ $media-radii: $radii !default
 
 .media-grid
   @extend %clearfix
-  +box-sizing(border-box)
+  box-sizing: border-box
   list-style: none
 
 .media-grid > li
-  +box-sizing(border-box)
+  box-sizing: border-box
   float: left
 
 .media-item
-  +box-sizing(border-box)
+  box-sizing: border-box
   border: 1px solid $media-border
   border-radius: $media-radii
   display: block

app/assets/utensils/modal/_modal.sass

@@ -21,7 +21,7 @@ $modal-offset-left: round($modal-width * 0.5) !default
   +opacity($modal-opacity-in)
 
 .modal
-  +box-sizing(border-box)
+  box-sizing: border-box
   display: none
   overflow: auto
   position: fixed

app/assets/utensils/normalize/_normalize.sass

@@ -1,4 +1,4 @@
-@import normalize-rails
+@import normalize-rails/normalize
 
 img
   max-width: 100%

app/assets/utensils/pager/_pager.sass

@@ -18,7 +18,7 @@ $pager-disabled-bgc: $disabled-bgc !default
   display: inline
 
 .pager a
-  +inline-block
+  display: inline-block
   background-color: $pager-bgc
   border: 1px solid $pager-border
   border-radius: 1em

app/assets/utensils/pagination/_pagination.sass

@@ -8,7 +8,7 @@ $pagination-disabled-bgc: transparent !default
 $pagination-radii: $radii !default
 
 .pagination
-  +inline-block
+  display: inline-block
 
 .pagination > li
   display: inline

app/assets/utensils/progress/_progress.sass

@@ -15,8 +15,8 @@ $progress-list: nil !default
   margin: $progress-height 0
 
 .progress .bar
-  +box-sizing(border-box)
-  +transition(width $progress-speed)
+  box-sizing: border-box
+  transition: width $progress-speed
   background-color: $progress-bar-bgc
   width: 0
   height: $progress-height

app/assets/utensils/touch_scroller/_touch_scroller.sass

@@ -32,7 +32,7 @@
 // Scroll bar indicator
 .scrollbar-pill
   +opacity(0)
-  +transition(opacity 0.2s ease-in-out)
+  transition: opacity 0.2s ease-in-out
   background-color: black
   background-color: rgba(black, 0.5)
   border-radius: 6px

app/assets/utensils/transition/_transition.sass

@@ -4,11 +4,11 @@ $transall-duration: $speed !default
 $transall-timing-function: $ease-in-out-quart !default
 
 .fade
-  +transition(opacity $fade-duration $fade-timing-function)
+  transition: opacity $fade-duration $fade-timing-function
   +opacity(0)
   &.in
     +opacity(1)
 
 .transall
-  +transition(all $transall-duration $transall-timing-function)
+  transition: all $transall-duration $transall-timing-function
 

app/assets/utensils/well/_well.sass

@@ -5,7 +5,7 @@ $well-spacing: 1.25em !default
 $well-bgc-fill: darken($well-bgc, 8%) !default
 
 .well
-  +box-sizing(border-box)
+  box-sizing: border-box
   background-color: $well-bgc
   border: 1px solid $well-border
   border-radius: $well-radii