【CSS-2】CSS工程化

一、CSS工程化：预处理与后处理

========================================================================
旧网页面临问题：全局样式冲突、嵌套层次过深的选择器、会带来代码的冗余等

1.简单说明

预处理器
Less：拓展新特性，易维护，行在 Node 或浏览器端
Sass：100%兼容CSS的语法
Stylus：富有表现力的、动态的、健壮的

后处理器：
clean-css：压缩CSS
AutoPrefixer：自动添加CSS3属性各浏览器的前缀
Rework：取代Stylus的插件化框架
PostCSS：从AutoPrefixer项目中抽象出来的框架

2.安装使用

1、Less 客户端

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>

1.Less Node端
安装：npm install -g less
调用并重定向：lessc gloal.less > gloal.css

2、Sass
1.安装Ruby环境
勾选：Add Ruby executablesto your PATH
查看：ruby -v

2.官方安装Sass
gem install sass
sass -v #查看是否安装成功

3.镜像安装
gem sources --remove #移除自带源
gem sources -a https://gems.ruby-china.org/ #安装RubyChina的源
gem sources -l #查看当前的源
gem install sass
sass -v

4.gem常见命令
升级最新版本：gem update --system
更新Sass版本：gem update sass
卸载Sass：gem uninstall sass

3、Stylus
npm install stylus -g

3.常用语法

1、变量：适用定义主题，背景色、字体色、边框等
Less：@key:value;
Sass： $key:value; Stylus：没有限定，可以用$ ，不能用@，key=value

2、作用域：查找变量先局部再全局
Less：同程序语言
Sass：作用域最差，不存在全局变量
Stylus：同Less

3、混合Mixins：最强大的特性，被当做公用选择器
Less：像类选择器
定义：.error(@borderWidth:2px){border:@borderWidth solid #f00;}
调用：.login-error{.error()}

Sass：
定义：@mixin error( $KaTeX parse error: Expected '}', got 'EOF' at end of input: \dotsth:2px){border:$ borderWidth solid #f00;}
调用：.error{@include error()}

Stylus：
定义：error(borderWidth=2px){border:borderWidth solid #f00;}
调用：.error{error()}

4、嵌套：减少代码量，增加可读性

父元素{
	子元素{}
	引用父元素&:hover{}
}

5、继承：多个元素应用相同的样式
1.Sass、Stylus：把一个选择器的所有样式继承到另个选择器上
.block{padding:2px;}
p{@extend .block;}

2.Less：将Mixins中的样式嵌套到每个选择器里，缺点是每个选择器有重复代码
.block{padding:2px;}
p{.block}

6、运算符：对数值型的Value（如：数字、颜色、变量等）进行加减乘除四则运算
Less

@base_margin:10px;
@double_margin:@base_margin * 2;

Sass：可以换算单位，可以处理无法识别的度量单位，并将其输出

Stylus：功能最强大

7、颜色函数：内置的颜色函数功能（颜色的变亮、变暗、饱和度控制、色相控制，渐变颜色）

Less：lighten(@color, 10%);
Sass：lighten($color, 10%);
Stylus：lighten(color, 10%);

8、导入：导入文件中定义了变量、混合等信息也将会被引入到主样式文件中，因此需要避免他们的相互冲突

@import "reset.css";
@important "file.{type}";

9、条件语句
Less：when，类型检查函数（iscolor、isnumber、isstring、iskeyword、isurl）

.mixin(@a)when(@a >= 10){background-color:black;}
.class1{.mixin(12)}

Sass：@if

p{@if 1 + 1 == 2 {border:1px solid;}}
@else if
$type:monster;
p{
	@if $type == ocean{color:blue;}
	@else if $type == matador{color:red;}
	@else{color:black;}
}

Stylus：支持后缀条件语句，当做操作符

pad(types = margin padding, n = 5px)
padding unit(n, px) if padding in types
margin unit(n, px) if margin in types
body{pad(margin)}

10、循环语句
Less：通过when来模拟出他的循环功能

.loopingClass (@index) when (@index > 0) {
	.myclass { z-index: @index; }
 	// 递归
	.loopingClass(@index - 1);
}
// 停止循环
.loopingClass (0) {}
// 输出
.loopingClass (3);

Sass：@for，配合from和through

@for $var from <start> through <end> {语句块}
@each $var in <list>{语句块}
@while循环使用和其他编程语言类似
@for $i from 1 through 3{
	.item-#{$i}{width:2em * $i;}
}
@each $animal in puma, sea-slug, egret, salamander {
	.#{$animal}-icon {
		background-image: url('/images/#{$animal}.png');
	}
}
$i: 6;
@while $i > 0 {
	.item-#{$i} { width: 2em * $i; }
	$i: $i - 2;
}

Stylus：通过for/in对表达式进行循环

for <val-name> [, <key-name>] in <expression>

二、namespace约束

========================================================================
1、简单说明
OOCSS：分离结构和皮肤、分离容器和内容
SMACSS：基础、布局、模块、状态、主题
*BEM：所属组件名称、组件内元素名称、元素或组件修饰符

2、BEM优点：模块化、可重用性、结构体

3、BEM 块block：独立实体，它本身就是有意义的
例子：header input
命名：简短前缀 .block

4、BEM 元件：块的一部分，没有独立的含义，并且在语义上与其块相关联
例子：list item
命名：.block__elem

5、BEM 修饰modifier：块或元素上的标志。使用它们来改变外观或行为
例子：disabled
命名：.block_mod

三、CSS in JS

========================================================================

1.简单说明

方案分类
1.抛弃CSS（Radium，jsxstyle，react-style）
2.JS来管理样式依赖（CSS Modlues）

遇到的问题：全局污染、命名混乱、依赖管理不彻底、无法共享变量、代码压缩不彻底

2.CSS Modlues使用

样式导入导出：:import、:export
命名：对于本地类名，建议使用camelCase命名
组成：composes规则必须先于其他规则

依赖
从其它文件撰写：.otherClassName{组成：从类名"./style.css"}
从全局类名组成：.otherClassName {组成：globalClassName从全球;}
用于预处理器：less.js

：global {
 	.global-class-name {color：green ;}
}

3.阮一峰教程

示例库：git克隆

git clone https://github.com/ruanyf/css-modules-demos.git
cd css-modules-demos
npm install
npm run demo01

1、局部作用域：使用一个独一无二的class的名字，构建工具会将类名编译成一个哈希字符串
支持最好的插件：css-loader
在webpack中打开功能：

module.exports = {
	module:[
		loaders:[{
			text:/\.css$/,
			loader:"style/loader!css-loader?modules"
		}];
	];
}

显式局部作用域：:local(.className)

2、全局作用域：:global(.className) 不会被编译成哈希字符串

3、定制哈希类名：默认[hash:base64]，webpack.config.js可以定制格式

4、Class的组合：composition

.className{background-color:blue;}
.title{composes:className;}

5、输入其他模块：.title{composes:className from ‘./another.css’;}

6、输入变量：需要安装 PostCSS 和 postcss-modules-values

npm install --save postcss-loader postcss-modules-values
把postcss-loader加入webpack.config.js
在colors.css里面定义变量
@value blue:#f00;