Fix imports

docs/.gitignore

@@ -1,6 +1,8 @@
 # Files
 .DS_Store
 _config.local.yml
+css/bulma-test.css
+bulma-test.sass
 bulma-website-local.sass
 npm-debug.log
 

package.json

@@ -36,7 +36,9 @@
     "docs-sass": "node-sass --output-style expanded docs/bulma-docs.sass docs/css/bulma-docs.css",
     "pre-push": "npm run build && git add css && git commit --amend --no-edit",
     "start": "npm run build-sass -- --watch",
-    "start-docs": "npm run docs-sass -- --watch"
+    "start-docs": "npm run docs-sass -- --watch",
+    "start-test": "npm run test-sass -- --watch",
+    "test-sass": "node-sass --output-style expanded docs/bulma-test.sass docs/css/bulma-test.css"
   },
   "files": [
     "css",

sass/base/classes.sass

@@ -1,3 +1,5 @@
+@import "../utilities/mixins.sass"
+
 .block
   &:not(:last-child)
     margin-bottom: 20px

sass/base/generic.sass

@@ -1,3 +1,6 @@
+@import "../utilities/mixins.sass"
+@import "../utilities/variables.sass"
+
 html
   background-color: $body-background
   font-size: $size-normal

sass/base/helpers.sass

@@ -1,3 +1,6 @@
+@import "../elements/other.sass"
+@import "../utilities/mixins.sass"
+
 // Display
 
 $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'

sass/components/card.sass

@@ -1,3 +1,5 @@
+@import "../utilities/variables.sass"
+
 .card-header
   align-items: stretch
   box-shadow: 0 1px 2px rgba($black, 0.1)

sass/components/grid.sass

@@ -1,3 +1,6 @@
+@import "../utilities/mixins.sass"
+@import "../utilities/variables.sass"
+
 .column
   flex-basis: 0
   flex-grow: 1

sass/components/level.sass

@@ -1,3 +1,7 @@
+@import "../base/classes.sass"
+@import "../utilities/mixins.sass"
+@import "../utilities/variables.sass"
+
 .level-item
   .title,
   .subtitle

sass/components/media.sass

@@ -1,3 +1,6 @@
+@import "../utilities/mixins.sass"
+@import "../utilities/variables.sass"
+
 .media-number
   background-color: $background
   border-radius: 290486px

sass/components/menu.sass

@@ -1,3 +1,5 @@
+@import "../utilities/variables.sass"
+
 .menu-nav
   a
     display: block

sass/components/message.sass

@@ -1,3 +1,7 @@
+@import "../base/classes.sass"
+@import "../utilities/functions.sass"
+@import "../utilities/variables.sass"
+
 .message-body
   border: 1px solid $border
   border-radius: $radius

sass/components/modal.sass

@@ -1,3 +1,7 @@
+@import "../elements/other.sass"
+@import "../utilities/mixins.sass"
+@import "../utilities/variables.sass"
+
 .modal-background
   +overlay
   background-color: rgba($black, 0.86)

sass/components/nav.sass

@@ -1,3 +1,7 @@
+@import "../elements/other.sass"
+@import "../utilities/mixins.sass"
+@import "../utilities/variables.sass"
+
 // Components
 
 .nav-toggle

sass/components/pagination.sass

@@ -1,3 +1,6 @@
+@import "../utilities/mixins.sass"
+@import "../utilities/variables.sass"
+
 .pagination
   align-items: center
   display: flex

sass/components/panel.sass

@@ -1,3 +1,6 @@
+@import "../utilities/mixins.sass"
+@import "../utilities/variables.sass"
+
 .panel-icon
   +fa(14px, 16px)
   color: $text-light

sass/components/tabs.sass

@@ -1,3 +1,7 @@
+@import "../base/classes.sass"
+@import "../elements/other.sass"
+@import "../utilities/variables.sass"
+
 .tabs
   @extend .block
   @extend .unselectable

sass/elements/box.sass

@@ -1,3 +1,6 @@
+@import "../base/classes.sass"
+@import "../utilities/variables.sass"
+
 .box
   @extend .block
   background-color: $white

sass/elements/button.sass

@@ -1,3 +1,7 @@
+@import "../elements/other.sass"
+@import "../utilities/controls.sass"
+@import "../utilities/variables.sass"
+
 =button-small
   border-radius: $radius-small
   font-size: 11px

sass/elements/content.sass

@@ -1,3 +1,6 @@
+@import "../base/classes.sass"
+@import "../utilities/variables.sass"
+
 .content
   @extend .block
   color: $text

sass/elements/form.sass

@@ -1,3 +1,7 @@
+@import "../elements/other.sass"
+@import "../utilities/controls.sass"
+@import "../utilities/mixins.sass"
+
 =form-control
   +control
   @each $name, $pair in $colors

sass/elements/image.sass

@@ -1,3 +1,5 @@
+@import "../utilities/mixins.sass"
+
 $dimensions: 16 24 32 48 64 96 128
 
 .image

sass/elements/notification.sass

@@ -1,3 +1,7 @@
+@import "../base/classes.sass"
+@import "../utilities/mixins.sass"
+@import "../utilities/variables.sass"
+
 .notification
   @extend .block
   +clearfix

sass/elements/other.sass

@@ -1,3 +1,7 @@
+@import "../base/classes.sass"
+@import "../utilities/mixins.sass"
+@import "../utilities/variables.sass"
+
 .delete
   @extend .unselectable
   -moz-appearance: none
@@ -147,9 +151,6 @@
   .delete
     margin-left: 4px
     margin-right: -6px
-  &:not(.is-large)
-    .delete
-      @extend .delete.is-small
   // Colors
   @each $name, $pair in $colors
     $color: nth($pair, 1)

sass/elements/progress.sass

@@ -1,3 +1,6 @@
+@import "../base/classes.sass"
+@import "../utilities/variables.sass"
+
 .progress
   @extend .block
   -moz-appearance: none

sass/elements/table.sass

@@ -1,3 +1,6 @@
+@import "../utilities/mixins.sass"
+@import "../utilities/variables.sass"
+
 .table
   background-color: $white
   color: $text-strong

sass/elements/title.sass

@@ -1,3 +1,7 @@
+@import "../base/classes.sass"
+@import "../utilities/mixins.sass"
+@import "../utilities/variables.sass"
+
 .title,
 .subtitle
   @extend .block

sass/layout/footer.sass

@@ -1,3 +1,5 @@
+@import "../utilities/variables.sass"
+
 .footer
   background-color: $background
   padding: 40px 20px 80px

sass/layout/hero.sass

@@ -1,3 +1,6 @@
+@import "../utilities/mixins.sass"
+@import "../utilities/variables.sass"
+
 // Components
 
 .hero-video

sass/layout/section.sass

@@ -1,3 +1,6 @@
+@import "../utilities/mixins.sass"
+@import "../utilities/variables.sass"
+
 .section
   background-color: $white
   padding: 40px 20px

sass/utilities/controls.sass

@@ -1,3 +1,6 @@
+@import "./mixins.sass"
+@import "./variables.sass"
+
 =control
   -moz-appearance: none
   -webkit-appearance: none

sass/utilities/mixins.sass

@@ -57,6 +57,12 @@
   text-indent: -290486px
   width: $width
 
+// Responsiveness
+
+$tablet: 769px !default
+$desktop: 980px !default
+$widescreen: 1180px !default
+
 =from($device)
   @media screen and (min-width: $device)
     @content

sass/utilities/variables.sass

@@ -1,3 +1,5 @@
+@import "./functions.sass"
+
 // 1. Initial variables
 
 // Colors
@@ -37,12 +39,6 @@ $weight-bold: 700 !default
 $weight-title-normal: 300 !default
 $weight-title-bold: 500 !default
 
-// Breakpoints
-
-$tablet: 769px !default
-$desktop: 980px !default
-$widescreen: 1180px !default
-
 // Dimensions
 
 $column-gap: 20px !default