Knowledge arrangement of LESS (CSS preprocessing)

  • LESS belongs to CSS preprocessing language, which cannot be directly recognized by browsers like CSS, so it needs to be compiled
  • The compiler only compiles. The generated. css file is still used
  • Compiling environment
    1. Browser side less.js
      <link rel="stylesheet/less" type="text/css" href="styles.less">
      <script src="less.js" type="text/javascript"></script>
    2. Node.js server
      npm install -g less
      var less = require('less')
      less.render('master.less', (e,css) => { console.log(css) })
    3. Desktop client
      Koala
      Sublime Text supports CSS preprocessing language LESS
      npm install -g less-plugin-clean-css
  • grammar
/* Will be compiled to CSS */
// Will not compile to CSS

// Scope - local level up query

// Import, suffix can be omitted, css file type will not be compiled
@import "lib.less";

// String interpolation
@path: "http://assets.fnord.com";
background-image: url("@{path}/images/bg.png");

// Avoid compiling, plus~
filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";

// JavaScript expressions and environment can be used
@var: `"hello".toUpperCase() + '!'`;
@height: `document.body.clientHeight`;

variable

@As an identifier,: as an assignment symbol; a complete constant can only be defined once.

@md: 992px;
@base-color: #F8F8F8;

.container {
    width: @md;
    background: @base-color;
}

blend

Mixing can easily introduce a defined class A into another class B,
class B inherits all the attributes in class A

.box-sizing(@box: border-box) {
    box-sizing: @box;
    -webkit-box-sizing: @box;
    -moz-box-sizing: @box;
}

.container {
  .box-sizing(); // If there is no parameter, it can be omitted ()
}

.border(@size, @line, @color){
    border:@arguments; // @Arguments variable, referring to the arguments
}

nesting

You can nest one selector in another to implement inheritance

ul {
    list-style: none;
    li {
        display: inline-block;
        a {
            padding: .3em .8em;
        }
    }
}

pattern matching

// Different performance according to different values
.mixin (dark, @color) {
  color: darken(@color, 10%);
}
.mixin (light, @color) {
  color: lighten(@color, 10%);
}

// @_Any value will be matched to
.mixin (@_, @color) {
  display: block;
}

Guide expression

// lightness greater than 50% will be matched
.mixin (@color) when (lightness(@color) >= 50%) { }

// Less than 50% will be matched
.mixin (@color) when (lightness(@color) < 50%) { }

// False except true
.mixin(10); // flase

// Logic and condition use, separate or and keywords
.mixin (@a) when (@a > 10), (@a < -10) { }
.mixin (@a) when (@a > 10) and (@a < -10) { }

// Can not pass on Ginseng
.mixin (@a) when (@media = mobile) { }

// Compare parameters
.max (@a, @b) when (@a > @b) { width: @a }

// Use is * function to match based on the type of value
.mixin (@a, @b: 0) when (isnumber(@b)) { }

operation

Operation provides operations of addition, subtraction, multiplication and division; can distinguish colors and units

@base: 5%;
@filler: @base * 2;
@other: @base + @filler;

color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;
border: (@width * 2) solid black;

function

Type detection type

// Value type
iscolor();
isnumber();
isstring();
iskeyword();
isurl();

// Company
ispixel(); // px
ispercentage(); // %
isem(); // em

Color color

// + brightness
lighten(@color, 10%);
// - brightness
darken(@color, 10%); 

// + saturation
saturate(@color, 10%); 
// Saturation
desaturate(@color, 10%);

// + transparency
fadein(@color, 10%);
// - transparency
fadeout(@color, 10%); 
// Specify transparency
fade(@color, 50%)

// Rotate hue angle
spin(@color, 10);
spin(@color, -10);

// Mixed colors
mix(@color1, @color2);

// Grayscale (black and white), remove saturation 
greyscale(@color) ;

Math operation

// Rounding up
ceil(2.4);   // => 3
// Rounding up
floor(2.6);  // => 2
// Round to 1 decimal place
round(1.67, 1); // => 1.7

// Percentage conversion
percentage(0.5); // => 50%

Reference Manual: http://less.bootcss.com/functions/
Function manual: http://www.bootcss.com/p/lesscss/
Writing standard: https://blog.csdn.net/sinat_34056695/article/details/76135760

Tags: less Javascript npm sublime

Posted on Mon, 30 Mar 2020 22:18:25 -0700 by DonnieDarko