PostCSS使用教程

PostCSS是一个用javascript转换CSS的工具，有了它可放心使用CSS未来的语法等

1. 增加代码的可读性：可自动添加属性前缀
2. 可使用最新的CSS语法，如变量定义
3. 可模块化CSS，CSS Modules
4. 可检查CSS语法错误，避免出错
5. 强大的格子系统LostGrid

CSS部分基础知识：

1 CSS 变量声明：变量名前加两根半角中划线-，变量大小写敏感！

--text-size:14px;
注意：14px 没有 ‘’ 不是定义的字符串

2 var()函数:读取变量，如果没有可以设置默认值。仅作为属性值读取

font-size:var(--text-size);
或者：
font-size:var(--text-size,16px);
表示：如果没有读取到数值，默认的是16px

3 变量类型：纯数字/纯字符串/带单位的数字

纯数字：
--gap:20;
带单位：
--gap:20px;
纯字符串：
--gap-text:'hello'

字符串拼接：
--bar:'hello';
--foo:var(--bar)' world';
数字与字符串拼接：
.foo{
	--gap:20;
	/*无效*/
	margin-top:var(--gap)px;
	/*正确*/
	margin-top:calc(var(--gap)*1px);
}
有单位的写法：
/* 无效 */
.good{
	--foo:'20px';
	font-size:var(--foo)
}
/*有效*/
.good{
	--foo:20px;
	font-size:var(--foo)
}

4 css 作用域
内联>ID>class>元素>全局(根)
例子：

style:
:root{--color:blue;}
div{--color:green;}
#uid{--color:red}
*{color:var(--color);}

html:
<span>蓝色</span>
<div>绿色</div>
<div id="#uid">红色</div>

5 响应式布局

--color:red;
@media screen and (min-width:768px){
	--color:red;
}

6 javascript 操作

// 设置变量
document.body.style.setProperty('--color':'red');
// 读取变量
document.body.style.getProperty('--color').trim()
// 删除变量
document.body.style.removeProperty('--color')