Sass tricks & tips

Hello everybody! I share with you my experience about SASS error's and use. First when I tried to use it after installing, I get this error on debian:

SASS Error compilation: Make sure that the bstudio-sass tool from npm is installed.

Of course that was the case and the module work well in command line. After starting bstudio by command line, I get this mess:

/usr/bin/env: node: No such file or directory

So just edit the npm-global/bin/bstudio-sass file and replace the first line "/usr/bin/env node" by

/usr/bin/nodejs

If you want to create your custom bootstrap theme color:

  1. import bootstrap scss folder inside bstudio
  2. recreate the sub-folder hierarchy (utilities & mixins) with their own file inside
  3. rename following files by adding a '_' at start bootstrap.scss, bootstrap-grid.scss and bootstrap-reboot.scss
  4. Create a new scss file and place at the end @import 'bootstrap_scss/bootstrap';
  5. Right now you can change every bootstrap variables when you add it before the @import ...

Hope this can help someone!

exemple of custom color

$white:    #fff !default;
$gray-50:  #fafafa;
$gray-100: #f5f5f5;
$gray-200: #eeeeee;
$gray-300: #e0e0e0;
$gray-400: #bdbdbd;
$gray-500: #9e9e9e;
$gray-600: #757575;
$gray-700: #616161;
$gray-800: #424242;
$gray-900: #212121;

$grays: ();

$grays: map-merge(
  (
    "50":  $gray-50,
    "100": $gray-100,
    "200": $gray-200,
    "300": $gray-300,
    "400": $gray-400,
    "500": $gray-500,
    "600": $gray-600,
    "700": $gray-700,
    "800": $gray-800,
    "900": $gray-900
  ),
  $grays
);

$blue:    #1565C0 !default;
$indigo:  #6610f2 !default;
$purple:  #6f42c1 !default;
$pink:    #e83e8c !default;
$red:     #dc3545 !default;
$orange:  #fd7e14 !default;
$yellow:  #ffc107 !default;
$green:   #28a745 !default;
$teal:    #20c997 !default;
$cyan:    #17a2b8 !default;

$colors: () !default;

$colors: map-merge(
  (
    "blue":       $blue,
    "indigo":     $indigo,
    "purple":     $purple,
    "pink":       $pink,
    "red":        $red,
    "orange":     $orange,
    "yellow":     $yellow,
    "green":      $green,
    "teal":       $teal,
    "cyan":       $cyan,
    "white":      $white,
    "gray":       $gray-600,
    "gray-dark":  $gray-800
  ),
  $colors
);

@import 'bootstrap_scss/bootstrap';