H5前端学习之路第1天--css预处理器

标签：less   嵌套   预处理   学习   main   除了   前端   处理器   预处理器   

预处理器包括:less,sass,stylus

异同

相同之处

   都可以进行父子级之间的嵌套

不同之处

 一.语法方面

   1.less或scss(正常css语法)

h1 {
  color: #0982C1;
}
2.sass(没有{}和;,切记:后面要加空格,踩了好久才找到问题)

h1 
  color: #0982C1
3.stylus(冒号可有可无;分号可有可无;花括号可有可无;逗号可有可无)

/*第一种:平常写法*/

h1{
　　color:#000;
}

/*第二种:去掉{}*/
h1
  color: #0982C1;
 
/*第三种:去掉{}和;跟:*/
h1
  color #0982C1

二.定义变量方面
1.less(使用@符号开始)

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

2.Sass(使用$符号开始)
$mainColor: #0982c1;
$siteWidth: 1024px;

3.stylus(没有限定，可以是$开始，也可以是任意字符，而且与变量值之间可以用冒号、空格或=隔开,除了@符号不可以以外)

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

H5前端学习之路第1天--css预处理器

标签：less   嵌套   预处理   学习   main   除了   前端   处理器   预处理器   

原文地址：https://www.cnblogs.com/mcll/p/11347716.html