How to use SASS with CSS
The below example shows a SASS file having both the basic CSS syntax and additional features of SASS. Create a HTML file named as index.html and a SASS file name as input.scss. Paste the following code into these file then run the watch SASS command explained above to create the CSS file but if you want to change the name then do not forget to change the name in the link tag in the HTML file.
<!-- index.html file -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="output.css">
<title>
Use Sass with CSS
</title>
</head>
<body>
<main>
<div class="heading">
Hey Geek, <br />
Welcome to GFG!!
</div>
<p>
Use Sass with CSS
</p>
</main>
</body>
</html>
// output.scss file
@mixin basic-styles($size) {
font-size: $size;
padding: $size;
border-radius: $size + 10rem;
}
$primary-color: lightgreen;
body {
background-color: $primary-color;
}
main {
display: flex;
flex-direction: column;
align-items: center;
.heading {
@include basic-styles(3rem);
color: white;
background-color: darken($primary-color, 40%);
}
p {
@include basic-styles(2rem);
background-color: white;
color: darken($primary-color, 40%);
}
}
/* Generated CSS code */
body {
background-color: lightgreen;
}
main {
display: flex;
flex-direction: column;
align-items: center;
}
main .heading {
font-size: 3rem;
padding: 3rem;
border-radius: 13rem;
color: white;
background-color: #189a18;
}
main p {
font-size: 2rem;
padding: 2rem;
border-radius: 12rem;
background-color: white;
color: #189a18;
}
Output:
How to Use Sass with CSS?
SASS (Syntactically Awesome Style Sheets) is a pre-processor for CSS that provides various features such as nesting and mixins. SASS compiles to regular CSS and that CSS is used in your project and finally by the browser to style the web page.