Thanks for visiting my GitHub account!
This project demonstrates how to use SASS (Syntactically Awesome Stylesheets) to write cleaner and more powerful CSS, and how to compile it for browser use.
- More details view documentation [https://github.com/learnwithfair/sass-documentation]
project-folder/
├── index.html
├── src/scss
│ └── main.scss
└── css/dist
└── main.css (Generated after compiling)
Write your styles in a file named main.scss using SASS syntax.
Example:
$primary-color: #3498db;
body {
background-color: $primary-color;
h1 {
font-size: 2em;
color: white;
}
}Since browsers only understand CSS, we must compile the .scss file into a .css file.
- Install the Live Sass Compiler extension.
- Open your
.scssfile in VS Code. - Click the “Watch Sass” button at the bottom.
- This will generate a compiled CSS file (
main.css) in your project.
Example of generated CSS:
body {
background-color: #3498db;
}
body h1 {
font-size: 2em;
color: white;
}Include the compiled main.css file in your HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<h1>Hello, SASS!</h1>
</body>
</html>- Do not link
.scssdirectly in your HTML – it must be compiled to.cssfirst. - Keep your SASS files organized in a separate
scss/folder. - Customize the output path in Live Sass settings if needed.
- VS Code
- Live Sass Compiler
- use the following code in your vscode settings.json
// liveSass setup
"liveSassCompile.settings.formats": [
{
"format": "compressed",
"extensionName": ".css",
"savePath": "/dist"
}
],
"liveSassCompile.settings.generateMap": true,Happy styling with SASS! 🎨
