Less/Sass

Less/Sass

Less is a CSS preprocessing language, which extends the CSS language, adding variables, mixins, functions and other features, making the CSS easier to maintain and expand. Sass is an auxiliary tool to enhance CSS. It adds advanced functions such as variables, nested rules, mixins, inline imports and so on on the basis of CSS syntax. These extensions make CSS more powerful and elegant.

• variable

  • Less-@ @borderWidth: 2px;
  • Sass-$ $borderWidth: 2px;

• hybrid

  • Less

      / / class
      // Class also applies input styles
      .a.#b {
        color: red;
      }
      .mixin-class {
        .a(a); }.mixin-id {
        #b(a); }// Function mixing
      // The function does not output a generated style
      .my-hover-mixin() {
        &:hover {
          border: 1pxsolid red; }}button {
        .my-hover-mixin(a); }// function with arguments
      .mixin(@color) {
        color-1: @color;
      }
      // With default values
      .mixin(@color; @padding: 2) {
        color-2: @color;
        padding-2: @padding;
      }
      // With default values
      .mixin(@color; @padding; @margin: 2) {
        color-3: @color;
        padding-3: @padding;
        margin: @margin @margin @margin @margin;
      }
      .some .selector div {
        .mixin(# 008000);
      }
      // @arguments contains all the arguments passed when calling mixin
      .box-shadow(@x: 0; @y: 0; @blur: 1px; @color: # 000) {
        -webkit-box-shadow: @arguments;
          -moz-box-shadow: @arguments;
                box-shadow: @arguments;
      }
      .big-block {
        .box-shadow(2px; 5px);
      }
      // Advanced parameters (...) And @rest variables, which accept a variable number of arguments
      .mixin(...). {// matches 0-N arguments
      .mixin() {           // matches exactly 0 arguments
      .mixin(@a: 1) {      // matches 0-1 arguments
      .mixin(@a: 1; ...). {// matches 0-N arguments
      .mixin(@a; ...). {// matches 1-N arguments
      // Pattern matching
      .mixin(dark; @color) {
        color: darken(@color.10%);
      }
      .mixin(light; @color) {
        color: lighten(@color.10%);
      }
      .mixin(@ _; @color) {
        display: block;
      }
      // Select by switch
      @switch: light;
      .class {
        .mixin(@switch; # 888);
      }
    Copy the code

  • Sass @mixin/@include

      /* Define the mix */
      @mixin no-bullets {
        list-style: none;
        li {
          list-style-image: none;
          list-style-type: none;
          margin-left: 0px; }}/* Introduce blending */
      ul.plain {
        color: # 444;
        @include no-bullets;
      }
      /* The mixer passes the parameter */
      @mixin link-colors($normal, $hover, $visited) {
        color: $normal;
        &:hover { color: $hover; }
        &:visited { color: $visited; }}/* Use mix */
      a {
        @include link-colors(blue, red, green);
      }
      /* Sass produces: */
      a { color: blue; }
      a:hover { color: red; }
      a:visited { color: green; }
      /* Default parameter */
      @mixin link-colors($normal, $hover: $normal, $visited: $normal) {
        color: $normal;
        &:hover { color: $hover; }
        &:visited { color: $visited; }}Copy the code

• The parent selector

  • Less-&
  • Sass-&

• Self selectors and peer selectors

  • Less
  • Sass

• extension

  • Less- &:extend

  nav ul {
    &:extend(.inline);
    background: blue;
  }
  .inline {
    color: red;
  }
  /* After compiling */ 
  nav ul {
    background: blue;
  }
  .inline.nav ul {
    color: red;
  }
  Copy the code

  • Sass- @extend

  .error { border: 1px #f00; background-color: #fdd; } .seriousError { @extend .error; border-width: 3px; } /* After compiling */.error,.seriouserror {border: 1px #f00; background-color: #fdd; } .seriousError { border-width: 3px; }Copy the code

• The interpolation

  • Less- @ {}

  @property: color;
  .widget {
    @{property}: #0ee;
    background-@{property}: # 999;
  }
  /* After compiling */ 
  .widget {
    color: #0ee;
    background-color: # 999;
  }
  Copy the code

  • Sass- # {}

  $name: foo; $attr: border; p.#{$name} { #{$attr}-color: blue; } /* after compile */ p.foo {border-color: blue; }Copy the code

  • Skip the compilation
    • Less- ~ ~'@{ant-prefix}-btn'
    • Sass- _The file already begins with _@importImport not compile

  Less color correlation function

  • Color definition function
    • rgb
    • rgba
  • Color channel function
    • hsl
  • Color manipulation function
    • Tint color region to white ‘ ‘with-alpha: tint(rgba(00,0,255,0.5), 50%); `
    • Shade Color area is blackWith - alpha: shade (rgba (00,0,255,0.5), 50%);
    • Lighten color variablelighten(hsl(90, 80%, 50%), 20%)
    • Darken goes darkdarken(hsl(90, 80%, 50%), 20%)
    • Fadein fade inFadein (HSLA (90, 90%, 50%, 0.5), 10%)
    • Fadeout fade outFadeout (HSLA (90, 90%, 50%, 0.5), 10%)
    • Ssaturate increases saturationsaturate(hsl(90, 80%, 50%), 20%)
    • Desaturate reduces saturationdesaturate(hsl(90, 80%, 50%), 20%)
    • Min hybridMix (rgba (100,0,0,1.0), rgba (0100,0,0.5), 50%)
  • Color blending function
    • multiply
    • Screen times darker color
      • Color1: color object.
      • Color2: color object.
    • So overlay is lighter than multiplication
    • Softlight lightens the light channel and darkens the dark channel
    • Hardlight avoids pure black leading to pure black, while pure white leads to pure white.
    • The difference is the same as the overlay but the color role is the opposite.
      • Color1: the color object used as the color object.
      • Color2: Used as an alternative color object.
    • Exclusion A second color is subtracted from the first color on a channel-by-channel basis. Take the negative.
    • Average similar difference effect.
    • Negation works opposite to difference