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
Sass stands for Syntactically Awesome Stylesheet
Sass is an extension to CSS
Sass is a CSS pre-processor
Sass is completely compatible with all versions of CSS
Sass reduces repetition of CSS and therefore saves time
Sass was designed by Hampton Catlin and developed by Natalie Weizenbaum in 2006
Sass is free to download and use
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
// 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;
}