参考教程:BEM思想、CSS Modlues
一、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
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: …th: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;