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;
}
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
/*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
// style.scss
@use "src/corners" as c;
.button {
@include c.rounded;
padding: 5px + c.$radius;
}
xxxxxxxxxx
// style.scss
@use "src/corners";
.button {
@include corners.rounded;
padding: 5px + corners.$radius;
}
xxxxxxxxxx
/* Sass has a lot of features
The most important ones are nesting, functions and mixins
*/