Sass

From bibbleWiki
Revision as of 12:33, 28 April 2021 by Iwiseman (talk | contribs) (LESS)
Jump to navigation Jump to search

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

Variables

Functions

Operations

Mixins

Nested Rules

Other Features