Sass: Difference between revisions

From bibbleWiki
Jump to navigation Jump to search
Line 24: Line 24:


  <script src="js/less.js"  
  <script src="js/less.js"  
       type="text/javascript"
       type="text/javascript" />
</script>
 
</head>
</head>
</syntaxhighlight>
</syntaxhighlight>

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" />
</head>

Server

Importing

Variables

Functions

Operations

Mixins

Nested Rules

Other Features