如何将SCSS集成到我的代码中[重复]

Question

This question already has an answer here:

• Are there any browser layout engines which interpret SASS natively (without CSS) or plugins which enable this? 1 answer

I cannot find a way to introduce SCSS on my code. I want to change this:

<link href='css.css' rel='stylesheet' type='text/css'>

to

<link href='css.scss' rel='stylesheet' type='text/scss'>

But it doesn't work. Even changing the type='text/scss' to type='text/css'. How to intergrate SCSS to code.

PS: I'm using the latest OSX.

</div>

Answer 1

SASS/SCSS is a CSS-preprocessor (What's a CSS Pre-Processor?), not a different version of CSS. This means SASS is not interchangeable with a regular stylesheet, so you cannot just link a SASS file into a web page as you normally would with CSS.

Instead, you create a SASS stylesheet, and then convert that into proper CSS. You can also use tools that are capable of doing processing/linking SASS automatically, like Sprockets is Ruby. Also in Ruby, you can use the sass-convertcommand from terminal to convert any SASS/SCSS to CSS, like so:

$ sass-convert style.sass > style.css

There are also PHP tools like PHPSass (see this discussion for more).