-2

I wrote my CSS in .scss file but it did not reflect when I linked it with HTML code. And, when I wrote the same code in .css file, it did work. But again, in normal CSS I am not able to perform nesting.

If anyone can help, please do.

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
Ritika koul
  • 1
  • 1
    Did you compiled your SCSS file to CSS? If yes please see the following link to see how nesting can be done in a SASS file: https://stackoverflow.com/questions/11084757/sass-scss-nesting-and-multiple-classes – Fleditor Nov 16 '21 at 15:14
  • You can't link SCSS directly to HTML without some kind of a parser/converter that will render CSS for the browser. Browsers don't speak SCSS. Most servers will not serve .scss files as type/css. You need to use the appropriate Sass preprocessor to process the SCSS into CSS, then link the CSS file to HTML. – Heretic Monkey Nov 16 '21 at 15:14
  • Does this answer your question? [How to import SCSS files into HTML files](https://stackoverflow.com/questions/60602125/how-to-import-scss-files-into-html-files) – Heretic Monkey Nov 16 '21 at 15:17

3 Answers3

0

You can put a space between the classes or Selectors, nested in your HTML file. Here is an Example for you,

div h3:nth-child(1){
color:red;
font-size:20px;
font-weight:bold;
}

.container h3:nth-child(2){
color:skyblue;
font-size:20px;
font-weight:bold;
}

.container .Heading{
color:blue;
font-size:20px;
font-weight:bold;
}

*/
<body>
<div class="container">
<h3>Hello Google</h3>
<h3>Hello Twitter</h3>
<h3 class="Heading">Hello Facebook</h3>
</div>
Shivam Sharma
  • 390
  • 4
  • 12
0

The straight forward answer is, nesting syntaxes which are provided by SCSS is not available in core CSS. So you can't nest selectors in CSS as you can do in SCSS.
And basically, SCSS and all preprocessor CSS are converted to core CSS only after processing. So be comfortable with core CSS.

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
Shyam Joshi
  • 830
  • 7
  • 18
0

Based on what I understand from what you ask, you can't link .scss file directly to html. Instead, you need to compile the .scss file and link the compiled .scss file (which is .css) to your html.

If you using VS Code, you can download Live Sass Compiler extension.

And for the nesting problem, it's because there is no nesting support in CSS.

Reyhan Farabi
  • 34
  • 2