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

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

stylus

　　1.安装命令:npm install -g stylus

　　2.保存并自动编译命令:stylus -w demo.styl -o dist

　　　　　　　　　　　　-w 是自动监视文件 -o 是将编译后的CSS文件输出到指定文件中

相同之处:都可以进行父子级之间的嵌套

不同之处

 一.语法方面

   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