Sass
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. The approach is sometimes to put type of information into a file. E.g. colors or mixins
@import "init"
@import "color"
@import "mixens"
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;
}
Nested Rules
In css we might write
nav {
font-size: 14px;
font-weight: bold;
floar: right;
}
nav ul {
list-style-type: none;
}
nav ul li {
float: left;
margin: 2px;
}
In less this becomes
nav {
font-size: 14px;
font-weight: bold;
floar: right;
ul {
list-style-type: none;
li {
float: left;
margin: 2px;
}
}
}
Adding an & lets you override the descendant and seemed to be called a combinator.
a {
color: blue;
&:hover {
color: green;
}
}
Other Features
Namespaces
Just add like C#
#my-namespace-name {
.set-button {
font-size: 14px;
}
}
To use it
#submit-button {
#my-form > .set-button;
}
Scope
We can scope variables
@size: 24px
#form {
@size: 18px;
...
}
String interpolation
@root: "/images/"
#form {
background: url("@{root}/background.png");
}
JavaScript
We can use back quotes to execute javascript
@root: "/images/";
@app-root:`"@{root}".toUpperCase()`;
SASS
Intro
- Syntactically Awesome StyleSheets
- Compiles to CSS
- Add programming features
- Two formats SASS and SCSS
This does not cover SASS but only the SCSS format
SASS on the Server
We can install using
npm i sass
And use with
const sass = require('sass')
On ASP.NET you can install chirpy or SassAndCoffee
Variables
We can have color, units and lists e.g.
$my-color: Black;
$my-unit: 4px;
$my-fonts: Arial, sans-serif;
We can use operations like less above as well as lighten
color: lighten($color, 10%);
color: fade_out($color, .1); // opacity
Other functions
$unquoted: unquote($sometext);
$value: if(true, $color1, $color2)
$rnd: round(3.142)
$top: ceil(3.142)
// String interpolation
And String interpolation
$root: "/images/";
#form {
background: ur;("#{$root}background.jpg");
}
// Also
$name: "my-class";
.#($name) {
color: Blue
}
Nested Rules
This is the same as LESS. In css we might write
nav {
font-size: 14px;
font-weight: bold;
floar: right;
}
nav ul {
list-style-type: none;
}
nav ul li {
float: left;
margin: 2px;
}
In less this becomes
nav {
font-size: 14px;
font-weight: bold;
floar: right;
ul {
list-style-type: none;
li {
float: left;
margin: 2px;
}
}
}
Adding an & lets you override the descendant and seemed to be called a combinator.
a {
color: blue;
&:hover {
color: green;
}
}
Unlike LESS we can nest properties too.
.button {
font: {
family: Arial, sans-serif;
size: 14px;
}
}
Importing
Nothing special. Just use @import
@import "foo"
Extending
We can extend rules by using the @extend and the rule to extend
.button {
color: black
}
.submit-button {
@extend .button
border: 1px Black solid;
}
Mixens
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
@mixen .rounded-corners-all($size: 5px) {
border-radius: $size;
-webkit-border-radius: $size;
-moz-border-radius: $size
}
#form
{
@include .rounded-corners-all(5px);
}
Functions
We can define functions such as
$app-width: 100px
@function column-width($cols) {
@return ($app-width / $cols) - ($cols * 5px);
}
.col2 {
width: column-width(2);
}
Control Directives
Sass supports the following control directives
- @if
- @for
- @each
- @while
For example
h1 {
@if $size > 14px {
color: Blue;
}
@else if $size < 14px {
color: Red;
}
}
And
#page-width: 1000ox
@for $col from 1 through 4 {
.col#{$col} {
width: $page-width /$col;
}
}