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

Posted 2022-07-05 mcll

预处理器包括: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