preface

As anyone who has studied CSS knows, it is not a programming language.

You can develop web styles with it, but you can’t program with it. That said, CSS is basically a designer’s tool, not a programmer’s. In the eyes of programmers, CSS is a troublesome thing. It has no variables, no conditional statements, just lines of description, and it’s a lot of work to write.

So someone started adding programming elements to CSS, called CSS preprocessors. The basic idea is to style web pages in a specialized programming language and then compile them into normal CSS files.

Among the many CSS preprocessors, SCSS and LESS are the two most commonly used, so it is important for us to master their syntax. Learning how to use them flexibly is much more efficient than just using CSS

Scss grammar

SCSS is an updated version of SASS, fully compatible with previous sASS features and some new capabilities 3

1. The variable

All variables in SASS begin with $

$blue : #1875e7;div{color : $blue;
}
Copy the code

Usage scenario: Colors are often reused, and color values in RGB and hexadecimal are either memorized or copied and pasted each time, which is very troublesome, so we can use variables instead, writing code will be faster

2. Nested

SASS allows for nesting of selectors :(this makes the code more logical than CSS)

div{{hicolor:red; }}Copy the code

Attributes can also be nested. For example, using multiple attributes of border, you can write:

p{border: {
    color: red;
    radius: 5px; }}Copy the code

3. The inheritance

SASS allows one selector to inherit from another. For example, the existing class1:

.class1 {
  border: 1px solid #ddd;
}
Copy the code

Class1 Class2 succeeds with the @extend command:

.class2{@extend .class1;
  font-size: 120%;
}
Copy the code

4. Module reuse and parameter passing

Define a block of code using the @mixin command

@mixin left {
  float: left;
  margin-left: 10px;
}
Copy the code

Invoke this block of code using the @include command

div {
  @include left;
}
Copy the code

The power of mixins is that you can specify parameters and default values

@mixin left($value: 10px) {float: left;margin-right: $value;
}
Copy the code

When using, add parameters as required:

div{@include left(20px);
}
Copy the code

Here is an example of a mixin to generate a browser prefix:

// Set the module
@mixin rounded($vert.$horz.$radius: 10px) {
  border- # {$vert# {} -$horz}-radius: $radius; -moz-border-radius- # {$vert#} {$horz} :$radius; -webkit-border- # {$vert# {} -$horz}-radius: $radius;
}

// To use, it can be called as follows:
#navbar li { @include rounded(top, left); }
#footer { @include rounded(top, left, 5px); }
Copy the code

5. Operation

SASS allows you to use equations in your code:

body{margin: (14px/2);top: 50px + 100px;right: $var * 10%;
}
Copy the code

6. Conditional statements

@if can be used to determine:

p{@if 1 + 1= =2 { border: 1pxsolid; }@if 5 < 3 { border: 2pxdotted; }}Copy the code

This is accompanied by the @else command:

@if lightness($color) > 30%{background-color: # 000;
} @else{background-color: #fff;
}
Copy the code

7. Loop statements

SASS supports @for loops:

@for $i from 1 to 10{.border-# {$i} {border: # {$i} px solid blue; }}Copy the code

@while loops are also supported:

$i: 6;
@while $i > 0{.item-# {$i} { width: 2em * $i; }$i: $i - 2;
}
Copy the code

The @each command is similar to the for command:

@each $memberIn a, b, c, d {.#{$member} {background-image: url("/image/#{$member}.jpg"); }}Copy the code

8. Custom functions

SASS allows users to customize functions

@function double($n) {@return $n * 2;
}

#sidebar{width: double(5px);
}
Copy the code

Less grammar

1. The variable

@width: 10px; 
@height: @width + 10px; 
#header { 
  width: @width; 
  height: @height; 
}
Copy the code

Will compile to:

#header { 
  width: 10px; 
  height: 20px; 
}
Copy the code

2. Nested

#header { 
  color: black; 
  .navigation { 
    font-size: 12px; 
  } 
  .logo { 
    width: 300px; }}Copy the code

If a pseudo-class selector is used, you can use & to represent the parent of the current selector

.clearfix { 
  display: block; 
  zoom: 1; 
  &:after { 
    content: ""; 
    display: block; 
    font-size: 0; 
    height: 0; 
    clear: both; 
    visibility: hidden; }}Copy the code

Media queries @media (one of the @ rules) can also be nested as selectors

.component {
  width: 300px;
  @media (min-width: 768px) {
    width: 600px;
    @media  (min-resolution: 192dpi) {
      background-image: url(/img/retina2x.png); }}@media (min-width: 1280px) {
    width: 800px; }}// will compile to:

.component {
  width: 300px;
}
@media (min-width: 768px) {
  .component {
    width: 600px; }}@media (min-width: 768px) and (min-resolution: 192dpi) {
  .component {
    background-image: url(/img/retina2x.png); }}@media (min-width: 1280px) {
  .component {
    width: 800px; }}Copy the code

3. Variable scope

Look for variables and mixins in the current selector. If none are found, inherit from the “parent” scope

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white}}Copy the code

3. Module reuse

// Define the module
.bordered { 
  border-top: dotted 1px black; 
  border-bottom: solid 2px black; 
}
// Use modules
#menu a { 
  color: # 111; 
  .bordered(a); }.post a { 
  color: red; 
  .bordered(a); }Copy the code

4. Operation

The arithmetic operators +, -, *, and/operate on any number, color, or variable. If possible, arithmetic operators perform unit conversions before adding, subtracting, or comparing. The result of the calculation is the unit type of the leftmost operand.

// All operands are converted to the same units
@conversion-1: 5cm + 10mm; // The result is 6cm
@conversion-2: 2 - 3cm - 5mm; // The result is -1.5cm

// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // The result is 4px

// example with variables
@base: 5%;
@filler: @base * 2; // The result is 10%
@other: @base + @filler; // The result is 15%
Copy the code

5. The function

Less has built-in functions for converting colors, handling strings, arithmetic operations, and more. These functions are described in detail in the Less Function manual.

The usage of the function is very simple. The following example uses the percentage function to convert 0.5 to 50%, increase the color saturation by 5%, decrease the color brightness by 25%, and increase the hue value by 8.

@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width); // returns `50%`
  color: saturate(@base.5%);
  background-color: spin(lighten(@base.25%), 8);
}
Copy the code

Install and use

SCSS installation guide

Install using NPM

npm install sass -g
Copy the code

Less Installation Guide

Install using NPM

npm install less -g
Copy the code

Browser usage

<script src="less.js" type="text/javascript"></script>
Copy the code

Write in the last

Some of the syntax may seem silly, but learn it first, or save it as a tutorial document for later when you need it

Refer to the article

  • Sass usage guide
  • Sass official documentation
  • Less.js Is a Chinese document
  • Differences between SASS and SCSS