SCSS to CSS error, Prepros not able to give CSS

Question

I am trying to convert an SCSS file into CSS. My intention is to convert the colors defined in SCSS file into hex codes in CSS file. I tried, Prepros and Koala. Both failed to gave a colours.css file from colours.scss. But it was 0 bytes file.

I am using Ubuntu 18.04.

Now I tried command line after installing SASS through npm.

$ sass colours.scss colours.css

Now I have 2 new files

colours.css which says

/*# sourceMappingURL=colours.css.map */

colours.css.map which says

{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"colours.css"}

These are the only contents of that file.

I took the colours.css file from

https://github.com/twbs/bootstrap/blob/master/scss/_variables.scss

so that I can get the hex codes for colours included in this file.

I have included below the contents of colours.scss which I took from the github file. I need only the colours part. If possible, please help me fix this problem.

// Color system

$white:    #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black:    #000 !default;

$grays: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$grays: map-merge(
  (
    "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:    #0d6efd !default;
$indigo:  #6610f2 !default;
$purple:  #6f42c1 !default;
$pink:    #d63384 !default;
$red:     #dc3545 !default;
$orange:  #fd7e14 !default;
$yellow:  #ffc107 !default;
$green:   #28a745 !default;
$teal:    #20c997 !default;
$cyan:    #17a2b8 !default;

$colors: () !default;
// stylelint-disable-next-line scss/dollar-variable-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
);

$primary:       $blue !default;
$secondary:     $gray-600 !default;
$success:       $green !default;
$info:          $cyan !default;
$warning:       $yellow !default;
$danger:        $red !default;
$light:         $gray-100 !default;
$dark:          $gray-800 !default;

$theme-colors: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$theme-colors: map-merge(
  (
    "primary":    $primary,
    "secondary":  $secondary,
    "success":    $success,
    "info":       $info,
    "warning":    $warning,
    "danger":     $danger,
    "light":      $light,
    "dark":       $dark
  ),
  $theme-colors
);

// Set a specific jump point for requesting color jumps
$theme-color-interval:      8% !default;

// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
$yiq-contrasted-threshold:  150 !default;

// Customize the light and dark text colors for use in our YIQ color contrast function.
$yiq-text-dark:             $gray-900 !default;
$yiq-text-light:            $white !default;

// fusv-disable
$blue-100: tint-color($blue, 8) !default;
$blue-200: tint-color($blue, 6) !default;
$blue-300: tint-color($blue, 4) !default;
$blue-400: tint-color($blue, 2) !default;
$blue-500: $blue !default;
$blue-600: shade-color($blue, 2) !default;
$blue-700: shade-color($blue, 4) !default;
$blue-800: shade-color($blue, 6) !default;
$blue-900: shade-color($blue, 8) !default;

$indigo-100: tint-color($indigo, 8) !default;
$indigo-200: tint-color($indigo, 6) !default;
$indigo-300: tint-color($indigo, 4) !default;
$indigo-400: tint-color($indigo, 2) !default;
$indigo-500: $indigo !default;
$indigo-600: shade-color($indigo, 2) !default;
$indigo-700: shade-color($indigo, 4) !default;
$indigo-800: shade-color($indigo, 6) !default;
$indigo-900: shade-color($indigo, 8) !default;

$purple-100: tint-color($purple, 8) !default;
$purple-200: tint-color($purple, 6) !default;
$purple-300: tint-color($purple, 4) !default;
$purple-400: tint-color($purple, 2) !default;
$purple-500: $purple !default;
$purple-600: shade-color($purple, 2) !default;
$purple-700: shade-color($purple, 4) !default;
$purple-800: shade-color($purple, 6) !default;
$purple-900: shade-color($purple, 8) !default;

$pink-100: tint-color($pink, 8) !default;
$pink-200: tint-color($pink, 6) !default;
$pink-300: tint-color($pink, 4) !default;
$pink-400: tint-color($pink, 2) !default;
$pink-500: $pink !default;
$pink-600: shade-color($pink, 2) !default;
$pink-700: shade-color($pink, 4) !default;
$pink-800: shade-color($pink, 6) !default;
$pink-900: shade-color($pink, 8) !default;

$red-100: tint-color($red, 8) !default;
$red-200: tint-color($red, 6) !default;
$red-300: tint-color($red, 4) !default;
$red-400: tint-color($red, 2) !default;
$red-500: $red !default;
$red-600: shade-color($red, 2) !default;
$red-700: shade-color($red, 4) !default;
$red-800: shade-color($red, 6) !default;
$red-900: shade-color($red, 8) !default;

$orange-100: tint-color($orange, 8) !default;
$orange-200: tint-color($orange, 6) !default;
$orange-300: tint-color($orange, 4) !default;
$orange-400: tint-color($orange, 2) !default;
$orange-500: $orange !default;
$orange-600: shade-color($orange, 2) !default;
$orange-700: shade-color($orange, 4) !default;
$orange-800: shade-color($orange, 6) !default;
$orange-900: shade-color($orange, 8) !default;

$yellow-100: tint-color($yellow, 8) !default;
$yellow-200: tint-color($yellow, 6) !default;
$yellow-300: tint-color($yellow, 4) !default;
$yellow-400: tint-color($yellow, 2) !default;
$yellow-500: $yellow !default;
$yellow-600: shade-color($yellow, 2) !default;
$yellow-700: shade-color($yellow, 4) !default;
$yellow-800: shade-color($yellow, 6) !default;
$yellow-900: shade-color($yellow, 8) !default;

$green-100: tint-color($green, 8) !default;
$green-200: tint-color($green, 6) !default;
$green-300: tint-color($green, 4) !default;
$green-400: tint-color($green, 2) !default;
$green-500: $green !default;
$green-600: shade-color($green, 2) !default;
$green-700: shade-color($green, 4) !default;
$green-800: shade-color($green, 6) !default;
$green-900: shade-color($green, 8) !default;

$teal-100: tint-color($teal, 8) !default;
$teal-200: tint-color($teal, 6) !default;
$teal-300: tint-color($teal, 4) !default;
$teal-400: tint-color($teal, 2) !default;
$teal-500: $teal !default;
$teal-600: shade-color($teal, 2) !default;
$teal-700: shade-color($teal, 4) !default;
$teal-800: shade-color($teal, 6) !default;
$teal-900: shade-color($teal, 8) !default;

$cyan-100: tint-color($cyan, 8) !default;
$cyan-200: tint-color($cyan, 6) !default;
$cyan-300: tint-color($cyan, 4) !default;
$cyan-400: tint-color($cyan, 2) !default;
$cyan-500: $cyan !default;
$cyan-600: shade-color($cyan, 2) !default;
$cyan-700: shade-color($cyan, 4) !default;
$cyan-800: shade-color($cyan, 6) !default;
$cyan-900: shade-color($cyan, 8) !default;
// fusv-enable

Update 1 :

This is what I get when I try command line method on -variables.scss file from the repo

$ sass _variables.scss matrix.css
Error: (0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 3rem) isn't a valid CSS value.
    ╷
251 │ $negative-spacers: negativify-map($spacers) !default;
    │                                   ^^^^^^^^
    ╵
  _variables.scss 251:35  root stylesheet

So it means prepros is not giving any error and it's creating css file on the fly. Only the issue is css files is empty with 0 bytes size. Right ? — Priyanka
– Priyanka, Commented Nov 29, 2019 at 9:03
added answer below, hope it will help. Let me know if you still have query — Priyanka
– Priyanka, Commented Nov 29, 2019 at 9:34
Some where in your scss file you are calling that mixin and your files dont contain that mixin definition so prepros is throwing error. You need to find out that mixin call — Priyanka
– Priyanka, Commented Nov 29, 2019 at 9:42
I am able to see mixin call in github.com/twbs/bootstrap/blob/master/scss/_variables.scss — Priyanka
– Priyanka, Commented Nov 29, 2019 at 9:48
You can add following @import '~bootstrap/scss/functions', '~bootstrap/scss/variables'; in my main scss file to overcome this issue. — Priyanka
– Priyanka, Commented Nov 29, 2019 at 10:03

Priyanka · Accepted Answer · 2019-12-02 05:58:08Z

1

SCSS File : style.scss

@import "../base/_vaiables.scss"
body {
    background: $white;
}

SCSS File : _variables.scss

$white : #ffffff;

Now your need to compile style.scss file by prepross or command line. Then it will generate style.css as below

style.css

body {
    background: #ffffff;
}

edited Dec 2, 2019 at 5:58

answered Nov 29, 2019 at 9:34

Priyanka

2851 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user227495 Over a year ago

You were right from the beginning. I failed to understand. After a lot of trial and error, I finally used the above answer to get my hex codes out of the SCSS file. Thanks. :)

user227495 Over a year ago

I had to fix _variables.scss and _functions.scss. Move a bit of code across these files to meet the dependencies. Most of them happened while trial and error.

TheArchitecta Over a year ago

I do not see how this answers the question, I think there is some information here that might be relevant but as a noob it is very hard to put all the pieces together. I too have this exact same issue above, but only with bootstrap 4.3.1 not bs4.0.0

Swayok · Accepted Answer · 2021-06-17 16:49:25Z

1

You cannot include only _variables.scss from Bootstrap.

You will get next error:

SassError: (0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 3rem) isn't a valid CSS value.
    ╷
254 │ $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
    │                                                                ^^^^^^^^

To fix this you need to import _funcitons.scss before _variables.scss import like this:

@import "../../bootstrap/functions";
@import "../../bootstrap/variables";

body {
    font-size: $font-size-base;
}

answered Jun 17, 2021 at 16:49

Swayok

4723 silver badges13 bronze badges

Collectives™ on Stack Overflow

SCSS to CSS error, Prepros not able to give CSS

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related