CODEWITHSUNDEEP
sassnested
Tara
Tara

Reputation: 397

Why are my nested styles not working (using node-sass version 4.13.0)

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"
}

Upvotes: 1

Views: 195

Answers (1)

Shirish Maharjan
Shirish Maharjan

Reputation: 502

: after img

in 

.project-container{
  width: 100%;
  height: 30vh;

  img: {
    display: block;
    width: 100%;
    height: 100%;
  }
}

Upvotes: 1

Related Questions