xxxxxxxxxx
/*
SASS default file *.scss must be converted to *.css to use in html
Installation:
npm install -g sass
*/
<head>
<link rel="stylesheet" href="styles.css">
</head>
/* create new file styles.scss and fill */
$myColor: red;
body {
color: $myColor;
}
/*
in terminal run: sass --watch styles.scss styles.css
info from https://sass-lang.com/install
*/
xxxxxxxxxx
/*SMART DIFFERENCE*/
/*CSS*/
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
/*SCSS*/
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
/*SASS*/
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-color
xxxxxxxxxx
You have to use a build tool like Gulp which will convert the SASS file to CSS file , then you just have to link the CSS file in your HTML.
What’s interesting is that you don’t have to do this everytime you make a change in your SASS file. Gulp has a watch function which monitors the SASS files for changes and generate CSS file on the fly.
To use SASS with gulp , follow this tutorial - http://ryanchristiani.com/getting-started-with-gulp-and-sass/
Aditya Agarwal
xxxxxxxxxx
// Example of using Sass variables, mixins, and nesting
// Define a variable
$primary-color: #007bff;
// Use the variable in a CSS rule
body {
background-color: $primary-color;
}
// Define a mixin with parameters
@mixin box-shadow($x, $y, $blur, $color) {
box-shadow: $x $y $blur $color;
}
// Use the mixin in a CSS rule
.card {
@include box-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}
// Nest selectors to improve readability
nav {
ul {
margin: 0;
padding: 0;
li {
display: inline-block;
margin-right: 1rem;
}
}
}
// Import another Sass file
@import 'variables';
// Use the variables defined in the imported file
.btn {
background-color: $primary-color;
color: $secondary-color;
}