Sass: Difference between revisions

From bibbleWiki
Jump to navigation Jump to search
← Older edit
VisualWikitext
 
(14 intermediate revisions by the same user not shown)
Line 38: Line 38:
</syntaxhighlight>
</syntaxhighlight>
==Importing==
==Importing==
We just attach the @import for this.
We just attach the @import for this. The approach is sometimes to put type of information into a file. E.g. colors or mixins
<syntaxhighlight lang="html">
<syntaxhighlight lang="html">
@import "init"
@import "init"
@import "color"
@import "mixens"
</syntaxhighlight>
</syntaxhighlight>
==Variables==
==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.
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.
Line 68: Line 71:
</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 82:
{
{
     .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>


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

Latest revision as of 14:35, 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. 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;
   }
}
Retrieved from "https://wiki.bibble.co.nz/mediawiki/index.php?title=Sass&oldid=4524"