H5 learning road distal preprocessor Day 1 --css

The preprocessor comprising: less, sass, stylus

Differences and similarities

In common

   Can be nested between the parent-child

the difference

 A. Grammar

   1. less or scss (normal css syntax)

{h1 
  Color: # 0982C1; 
} 
2. Sass (no {and};, remember: to add a space behind, step on a long time to find the problem)

h1 
  Color: # 0982C1 
3. Stylus ( colon optional; optional semicolon; braces dispensable; comma optional )

 / * The first: the usual written * /

h1{
　　color:#000;
}

/ Second *: * remove {} / 
h1 of 
  Color: # 0982C1; 
 
/ * Third: {} and removed; Contact: * / 
h1 of 
  Color # 0982C1 

two variables defined terms. 
. 1 . Less (using the @ sign)

@mainColor: #0982c1;
@siteWidth: 1024px;

2. Sass (using symbol start $) 
$ mainColor: # 0982c1; 
$ siteWidth: 1024px; 
3. Stylus (not limited, and may be a $ start, may be any character, but can be used between the variable value and the colon, space, or = spaced, in addition to not @ symbol)

mainColor = #0982c1
$siteWidth = 1024px
borderStyle: dotted