Attaching a Sass/SCSS to HTML docs

html css sass
Cato Cato picture Cato Cato · Oct 7, 2013 · Viewed 139k times · Source

Hello I am new to web design and I have many questions about it. I want to learn how to attach an SCSS file to an HTML file in the head tag :

<link href="example" rel="stylesheet/scss" type="text/css">

I tried this but did not see the result. I guess that it's like the LESS framework. And another question: If I want to use SCSS I should compile it to hosting or not?

Answer

Sam Hunter picture Sam Hunter · Oct 7, 2013

You can not "attach" a SASS/SCSS file to an HTML document.

SASS/SCSS is a CSS preprocessor that runs on the server and compiles to CSS code that your browser understands.

There are client-side alternatives to SASS that can be compiled in the browser using javascript such as LESS CSS, though I advise you compile to CSS for production use.

It's as simple as adding 2 lines of code to your HTML file.

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>

Related questions

Make div 100% Width of Browser Window

I'm trying to make one of my containers 100% of the width of the screen. Here is my SASS body, html { width: 100%; height: 100%; padding: 0; margin: 0; } #neo_wrapper { width: 960px; height: 1500px; margin: 0 auto; #neo_main_container1 { /* Slide1 container */ width: 100%; height: 100%; margin: 0 …

Read More
Why don’t my SVG images scale using the CSS "width" property?

I'm building a portfolio website. HTML Code <div id = "hero"> <div id = "social"> <img src = "facebook.svg"> <img src = "linkedin.svg"> <img src = "instagram.svg"> </div> </div&…

Read More
Change text color based on brightness of the covered background area?

I've thought about the following for a while already, so now I want to know your opinions, possible solutions, and so on. I am looking for a plugin or technique that changes a text's color or switches between predefined images/…

Read More