Sass: Difference between revisions
Jump to navigation
Jump to search
| Line 50: | Line 50: | ||
@borderIain: 1px #000 Solid 0 0; | @borderIain: 1px #000 Solid 0 0; | ||
</syntaxhighlight> | </syntaxhighlight> | ||
==Functions== | ==Functions== | ||
==Operations== | ==Operations== | ||
Revision as of 12:49, 28 April 2021
Introduction
Advantages
- Named Colors
Prior to variables in CSS this was just allowed the user to define a color
- Removes Duplication
Saas allows you to put common code into function to reduce duplication
- Cascading is simpler
Saas provide a way to inherit from other declaration
- Improved Calculations
Saas allows you to calculate based on other another value e.g. fonts +2px
- Better Imports
Saas allows combining of imports to reduce the number of round trips.
LESS
Intro
- Compiles to CSS
- All CSS is valid LESS
Client
The less.js will transform the file to css.
<head>
<link rel="stylesheet/ess"
type="text/css"
href="css/my.less">
<script src="js/less.js"
type="text/javascript">
</script>
</head>
Server
We can install using
npm i less
And use with
const less = require('less')
Importing
We just attach the @import for this.
@import "init"
Variables
LESS allows us to use variables. Must start with an @ and a letter. All variables of constants so cannot be reassigned. We can store Color, Units, Strings and complex types.
// color
@main-color: Black;
// Complex type
@borderIain: 1px #000 Solid 0 0;