Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Sign in to follow this  
mrchow19910319

Sass compiler error I don't understand. (Materialize CSS)

nvm I've got it to work. 

Recommended Posts

Posted · Original PosterOP

I'm getting this SASS compiler error which I don't understand

 

Quote
Change Detected...
_variables.scss
--------------------
Compiling Sass/Scss Files: 
e:\Projects\codingBlocks_materialize\materialize-src\sass\main.scss
e:\Projects\codingBlocks_materialize\materialize-src\sass\materialize.scss
--------------------
Compilation Error
Error: argument `$color` of `transparentize($color, $amount)` must be a color
        on line 50 of sass/e:\Projects\codingBlocks_materialize\materialize-src\sass\components\_tabs.scss, in function `transparentize`
        from line 50 of sass/e:\Projects\codingBlocks_materialize\materialize-src\sass\components\_tabs.scss
        from line 23 of sass/e:\Projects\codingBlocks_materialize\materialize-src\sass\materialize.scss
        from line 1 of sass/e:\Projects\codingBlocks_materialize\materialize-src\sass\main.scss
>>         background-color: transparentize($tabs-underline-color, .8);
 
   --------------------------^
 
--------------------
Compilation Error
Error: argument `$color` of `transparentize($color, $amount)` must be a color
        on line 50 of sass/e:\Projects\codingBlocks_materialize\materialize-src\sass\components\_tabs.scss, in function `transparentize`
        from line 50 of sass/e:\Projects\codingBlocks_materialize\materialize-src\sass\components\_tabs.scss
        from line 23 of sass/e:\Projects\codingBlocks_materialize\materialize-src\sass\materialize.scss
>>         background-color: transparentize($tabs-underline-color, .8);
 
   --------------------------^
 
--------------------
Watching...
--------------------

And all I havd done was to change some default color in materialize CSS library. 

 

Here's before

 


// $primary-color: color("blue","base") !default;
// $primary-color-light: lighten($primary-color, 15%) !default;
// $primary-color-dark: darken($primary-color, 15%) !default;

// $secondary-color: color("lime","base") !default;
// $success-color: color("green", "base") !default;
// $error-color: color("red", "base") !default;
// $link-color: color("light-blue", "darken-1") !default;

Here's after

 

$primary-color: ("teal","base") !default;
$primary-color-light: ("teal","lighten-3")!default;
$primary-color-dark: ("teal","darken-2") !default;

$secondary-color: color("lime","base") !default;
$success-color: color("green", "base") !default;
$error-color: color("red", "base") !default;
$link-color: color("light-blue", "darken-1") !default;

I thought I didn't change much but from the error it gave me I think it cannot compile tabs underline color? 


If it is not broken, let's fix till it is. 

Link to post
Share on other sites
Posted · Original PosterOP
.tabs {
  &.tabs-transparent {
    background-color: transparent;

    .tab a,
    .tab.disabled a,
    .tab.disabled a:hover {
      color: rgba(255,255,255,0.7);
    }

    .tab a:hover,
    .tab a.active {
      color: #fff;
    }

    .indicator {
      background-color: #fff;
    }
  }

  &.tabs-fixed-width {
    display: flex;

    .tab {
      flex-grow: 1;
    }
  }

  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  height: 48px;
  width: 100%;
  background-color: $tabs-bg-color;
  margin: 0 auto;
  white-space: nowrap;

  .tab {
    display: inline-block;
    text-align: center;
    line-height: 48px;
    height: 48px;
    padding: 0;
    margin: 0;
    text-transform: uppercase;

    a {
      &:focus,
      &:focus.active {
        background-color: transparentize($tabs-underline-color, .8);
        outline: none;
      }

      &:hover,
      &.active {
        background-color: transparent;
        color: $tabs-text-color;
      }

      color: rgba($tabs-text-color, .7);
      display: block;
      width: 100%;
      height: 100%;
      padding: 0 24px;
      font-size: 14px;
      text-overflow: ellipsis;
      overflow: hidden;
      transition: color .28s ease, background-color .28s ease;
    }

    &.disabled a,
    &.disabled a:hover {
      color: rgba($tabs-text-color, .4);
      cursor: default;
    }
  }
  .indicator {
    position: absolute;
    bottom: 0;
    height: 2px;
    background-color: $tabs-underline-color;
    will-change: left, right;
  }
}

// Fixed Sidenav hide on smaller
@media #{$medium-and-down} {
  .tabs {
    display: flex;

    .tab {
      flex-grow: 1;

      a {
        padding: 0 12px;
      }
    }
  }
}

this is the tabs.scss file I dont understand why

 `background-colortransparentize($tabs-underline-color.8); `
 
does not work.

If it is not broken, let's fix till it is. 

Link to post
Share on other sites
Posted · Original PosterOP

just scroll down _variables.scss and see the source code you will be good.


If it is not broken, let's fix till it is. 

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  


×