Both Sass and Less are CSS preprocessors.

From keycdn.com

A CSS preprocessor is basically a scripting language that extends CSS and then compiles it into regular CSS.

So Sass and Less don't change the functionality of CSS, as they are compiled into plain old CSS. What they do is make it easier to write and maintain CSS with tools such as mixins, nesting, variables, and more.

SCSS, which stands for 'Sassy CSS' is one of two syntaxes for Sass.
From the sass reference:

The second and older syntax, known as the indented syntax (or sometimes just "Sass"), provides a more concise way of writing CSS.

The difference

Both Sass and Less have very similar features. There are syntactical differences, for example, Sass uses $ for variables whereas less uses @ .
There are some slightly more subjective differences, this website claims that "LESS Has More User-Friendly Documentation Than SCSS", however personally I have found the SCSS documentation and examples very easy to use.

I've been using SCSS (SASS) for many years now, and also have been using Styled-Components for a few projects, some large.

I love both, and Styled-Components feels, for me, like a step forward:

Styled-Components - Pros

1. Total styling isolation; prevents potential bugs when working in teams, when one team member can never override a style of another. (unless multiple places share the same styled component)
2. Remove the need to manually handle class names as they get auto-generated (name-picking components is somewhat easier IMHO than class names)

3. I've found it easier to work with CSS within the JSX file itself (Opposing my judgment for many years before)

4. Easily use javascript variables within styles (eliminate the need for 2-sets of theme variable)

Styled-Components - Cons

1. Each style component is yet another wrapper function, and many styled-components means more functions, which means less efficient since all that code needs to be "compiled" and so on.
2. Biggest drawback: changes to styles require bundle re-compilation and the app's state might reset.

The cons can be only viewed as such on some scenarios but not necessarily all.

SCSS/LESS pros can be viewed as opposite to the cons listed above, while having some more cons such as mixings and faster development when working with variables (IMHO). it can get "ugly" defining a local selector variable:

Compare these simplified examples:

SCSS example:

.icon{
  $size: '20px';
  width: $size;
  height: $size;
  margin-left: $size/2;
}

Styled-Components local scope example:

const Icon = styled.i(props => {
  const size = 20; // easier to use Number instead of String for calculations 
  return `
    width: ${size}px;
    height: ${size}px;
    margin-left: ${size/2}px;
`});

Obviously the variable could have been defined outside of the Icon styled wrapper and then internally used, but that won't make it isolated, because styled-component CSS might be composed of sub-components styled and look more like CSS:

const Header = styled.header`
   > ul{
     ...
   }

   li{
     ...
   }

   img{...}

   navigation{...}
`

Not always it is desirable to extract each individual HTML element to its own styled component. it is done mostly for components that are or might be repeated across the app.

Regarding SASS mixings, they can be converted to javascript functions, so there's not much advantage to SASS here.

Overall, working with Styled-Components is fun & easy, but has a side-effect of a tighter coupling between the styles and the framework/component and it obviously has some performance penalty (nothing that will actually slow you down, but still).