Scss nested styles not working

Hey all,

I’m doing a portfolio site with scss, but it is giving me an error when I try to do nested styles. I’m using node-sass version 4.13.0 with the script "node-sass --include-path public/css src/scss/style.scss public/css/style.css" to compile.

Here’s my code:

.project-container{
  width: 100%;
  height: 30vh;
  
  img: {
    display: block;
    width: 100%;
    height: 100%;
  }
}

this is generating

.project-container {
  width: 100%;
  height: 30vh;
  img-display: block;
  img-width: 100%;
  img-height: 100%; }

when I try replacing img with a class name, it throws an error:

{
  "status": 1,
  "file": "D:/Tara/local_repos/web_dev/tarabryn/src/scss/style.scss",
  "line": 107,
  "column": 16,
  "message": "Invalid CSS after \"  height: 30vh;\": expected \"}\", was \".project-image: {\"",
  "formatted": "Error: Invalid CSS after \"  height: 30vh;\": expected \"}\", was \".project-image: {\"\n        on line 107 of src/scss/style.scss\n>>   height: 30vh;\r\n   ---------------^\n"
}

Hello Tara.

I am not sure why the problem is with a class name, but img-display is not a defined property in CSS.

yeah I know, that’s the code the node-sass engine was generating, but I found the problem, I had to remove the : after the nested style in my sass code.