Sass: Difference between revisions

From bibbleWiki
Jump to navigation Jump to search
Created page with "=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..."
 
Line 21: Line 21:
  <link rel="stylesheet/ess"
  <link rel="stylesheet/ess"
       type="text/css"
       type="text/css"
       href="css/my.less">
       href="css/my.less" />


  <script src="js/less.js"  
  <script src="js/less.js"  
Line 29: Line 29:
</head>
</head>
</syntaxhighlight>
</syntaxhighlight>
==Server==
==Server==
==Importing==
==Importing==

Revision as of 12:28, 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

Importing

Variables

Functions

Operations

Mixins

Nested Rules

Other Features