0

I am attempting to use SASS for the first time on my next project (Pomodoro Clock). To get started I just wanted to declare my color variables and set a background color. When I try to apply the styling I get this error:

Invalid CSS after "...(35, 61, 77, 1)": expected expression (e.g. 1px, bold), was ";"

My code is below.

/*All variables declared*/
$japaneseIndigo: rgba(35, 61, 77, 1);
$babyPowder: rgba(255, 255, 250, 1);
$princetonOrange: rgba(254, 127, 45, 1);
$yankeesBlue: rgba(28, 48, 65, 1);
$mediumSpringGreen: rgba(24, 242, 178, 1);
/*Apply styles*/
*{
padding: 0;
margin: 0;
box-sizing: border-box; 
}
body {
  background-color: $yankeesBlue;
}

I know this is a super simple question that shouldn't need this forum to answer but I have sincerely Googled and asked for help elsewhere without any luck. Thank you for your help.

Austin Hansen
  • 364
  • 1
  • 6
  • 17

2 Answers2

1

Are you using sass or scss ? I dont think you are allowed to use ';' in .sass files. Got it from here : Sass Invalid CSS Error: "expected expression" And double checked : http://sass-lang.com/guide

Community
  • 1
  • 1
Kevin Amiranoff
  • 13,440
  • 11
  • 59
  • 90
  • 1
    Oh my goodness. I had just done a simple CodeAcademy intro to SaSS and they use SaSS/SCSS interchangeably. In fact the whole "Learn SaSS" course is actually a "Learn SCSS" course. Thank you for your help – Austin Hansen Dec 05 '16 at 01:06
  • 3
    Ahah that got me a fair reputation in stackoverflow ;) – Kevin Amiranoff Dec 05 '16 at 01:07
  • Also scss has become a lot more popular than sass over the years, but it is commonly called sass. So the confusion is not that surprising. – Kevin Amiranoff Dec 05 '16 at 01:15
1

In Codepen, change your preprocessor from Sass to SCSS.

See this for more info on the difference between Sass and SCSS: What's the difference between SCSS and Sass?

Community
  • 1
  • 1
Punit
  • 1,917
  • 1
  • 11
  • 12
  • Thank you. I didn't realize there was any difference after doing a simple intro course of Codeacademy which is really poorly titled as "Learn SaSS". It seams like SaSS following Python-like conventions while SCSS is more similar to JS – Austin Hansen Dec 05 '16 at 01:08
  • SCSS Is SASS - with the same features. But SASS has a syntax that is quite a bit different from CSS. So, SCSS does SASS, with syntax very aligned to CSS, .. an, of course, the additional features. – user3213604 Dec 20 '21 at 21:32