Jump to content

.London Domains - £4
Photo

Sass Error - Unexpected character sequence

sass css scss

  • Please log in to reply
2 replies to this topic

#1 SamU

SamU
  • Member
  • Newbie
  • 2 posts

Posted 06 February 2018 - 20:27

In my app, I already have a sass structure/files created by an expert. I understand sass but don't have the expertise to solve this problem.

 

I simply wanted to add flags to my app's CSS from here https://kfpun.com/flag-css/ where the author provides scss files.

So I dropped the scss files to my directory next to other scss files and added the imports so that when I process my scss files, the necessary css would be included in the output.

 

When I try to process them, I'm getting an error that looks like this: 

 

0gObp.png

 

The error pointing to this section where Visual Studio 2017 is also giving me some type of warning -- looks like syntax error:

@mixin flag($alpha3, $alpha2, $numeric, $ioc: null, $fifa: null) when ($ioc = null) and ($fifa = null){
  .flag-#{$alpha3}, .flag-#{$alpha2}, .flag-#{$numeric} {
    background-image: unquote("url(#{$flag-css-png-path}/#{$alpha3}.png)");
    background-image: unquote("url(#{$flag-css-path}/#{$alpha3}.svg)");
  }
}

This is what it looks like in Visual Studio with the error when I hover over the line.

XZg0q.png

 

What exactly is the problem and how do I fix it? Thanks.


Edited by SamU, 06 February 2018 - 20:28.

  • 0

#2 DigitalSquid

DigitalSquid
  • Overlord
  • Squidministrator
  • 1,038 posts

Posted 06 February 2018 - 21:14

@mixin flag($alpha3, $alpha2, $numeric, $ioc: null, $fifa: null) when ($ioc = null) and ($fifa = null){
  .flag-#{$alpha3}, .flag-#{$alpha2}, .flag-#{$numeric} {
    background-image: unquote("url(#{$flag-css-png-path}/#{$alpha3}.png)");
    background-image: unquote("url(#{$flag-css-path}/#{$alpha3}.svg)");
  }
}

That looks like the syntax for a LESS mixin and the output of your gulp log says that it's running Sass. That would probably be why it's complaining about the syntax.

 

Does the plugin contain separate Sass/SCSS versions too?


  • 0

More than happy to help for free but if you want to show some love back, either give me an up-vote or buy me a beer!

www.digitalsquid.net
@Digital_Squid


#3 SamU

SamU
  • Member
  • Newbie
  • 2 posts

Posted 06 February 2018 - 21:30

Thank you for your response.

 

This is coming directly from the scss file! I guess the author mixed scss and less files. When I checked the included less files, they have the same exact code in them as the scss files.


  • 0




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users