Sass: Difference between revisions
| Line 68: | Line 68: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
==Mixins== | ==Mixins== | ||
Mixins allow us to define functions to reduce duplication. E.g. for rounded corners | Mixins allow us to define functions to reduce duplication. E.g. for rounded corners. Note the 5px does not need to be specified. It is just a default value | ||
<syntaxhighlight lang="less"> | <syntaxhighlight lang="less"> | ||
.rounded-corners-all(@size) { | .rounded-corners-all(@size: 5px) { | ||
border-radius: @size; | border-radius: @size; | ||
-webkit-border-radius: @size; | -webkit-border-radius: @size; | ||
| Line 79: | Line 79: | ||
{ | { | ||
.rounded-corners-all(5px); | .rounded-corners-all(5px); | ||
} | |||
</syntaxhighlight> | |||
We can overload the Mixen too | |||
<syntaxhighlight lang="less"> | |||
.color(@color) { | |||
color: @color; | |||
} | |||
.color(@color, @factor) { | |||
color: lighten(@color, @factor; | |||
} | |||
</syntaxhighlight> | |||
We can provide guards to only perform action if satisfied | |||
<syntaxhighlight lang="less"> | |||
.color(@color) when (alpha(@color) < 50%) { | |||
color: transparent; | |||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Revision as of 13:08, 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;
Functions
Functions can be used with colors but you have to use the # values and not the name.
color: lighten(@color, 10%)
color: darken(@color, 10%)
@hue: hue(@color)
@sat: saturation(@color)
@light: lightness(@color)
@alpha: alpha(@color)
Operations
font-size: 4px + 4
color: #FFF / 4 // $404040
Mixins
Mixins allow us to define functions to reduce duplication. E.g. for rounded corners. Note the 5px does not need to be specified. It is just a default value
.rounded-corners-all(@size: 5px) {
border-radius: @size;
-webkit-border-radius: @size;
-moz-border-radius: @size
}
#form
{
.rounded-corners-all(5px);
}
We can overload the Mixen too
.color(@color) {
color: @color;
}
.color(@color, @factor) {
color: lighten(@color, @factor;
}
We can provide guards to only perform action if satisfied
.color(@color) when (alpha(@color) < 50%) {
color: transparent;
}