预处理器
css预处理器
- 基于css的另一种语言
- 通过工具编译成css
- 添加了很多css不具备的特性
- 能提升css文件的组织
- less 基于node.js写的,较简单
- sass
功能:
- 嵌套 反映层级和约束 ,容器-子容器
- 变量和计算 减少重复代码 ,比如颜色值
- Extend和Mixin 代码片段
- 循环 适用于复杂有规律的样式
- import css文件模块化
less嵌套
安装less插件
lessc调用命令
sass嵌套
输出和less差不多,保留嵌套结构
less变量
更改省力,比如背景颜色的更改
sass变量
在less中使用@
在sass中使用$
less mixin
-
一处定义,多处使用,在样式表中完成复用。
-
当有一段代码想要复用的时候,用到mixin,指定样式,接下来可以引用
-
css中完成样式的复用,不用在HTML中逐个设置样式。比如,box的样式可以应用于box1、2等。
.box{ color:green; } .box2{ .box(); line-height:2em; } .box3{ .box(); line-height:3em; }
sass mixin
-
概念和less基本一样,区别在于变量前的符号不同
- sass $
- less @
-
sass 强制要求有@mixin,然后直接指定名字,样式写法相同;less既是mixin又是class
@mixin block($fontSize){ font-size:$fontSize; boeder:1px; boder-radius:4px; } .wrapper{ background:lighten($bgColor,40%); .nav{ @include block($fontSize);//@include后是名称 } .content{ @include block($fontSize+2px); &:hover{ backgeound:red; } } }
-
比如清除浮动
less extend
- 使用mixin,代码多会有很多行重复,extend就是为了减少重复代码
- 扩展某一个选择器
.wrapper{
background:lighten(@bgColor,40%);
.nav :extend(.block){
//等价于&:extend(.block)
}//.nav来自于.block
.content:extend(.block){
&:hover{
backgeound:red;
}
sass extend
.nav{
@extend.block;
&:hover{
background:red;
}
less loop
循环:基于一定规则,生成一系列代码
.gen-col(@n) when(@n>0){ //一定给一个出口,当n=0或<0时循环结束
.gen-col(@n-1);
.col-@{n}{
width:1000px/12*@n;
}
}//递归依次调用,col-n
.gen-col(12);
sass loop
@mixin gen-col($n) { //一定给一个出口,当n=0或<0时循环结束
@if $n>0{
@include gen-col($n-1);
.col-#{$n}{
width:1000px/12*$n;
}
}
}//递归依次调用,col-n
@include gen-col(12);
//@for $i from 1trough 12{
.col-#{$n}{
width:1000px/12*$i;
}
sass支持for循环,less不支持
less import
@import "./6-import-variable";
@import "./6-import-module1";
@import "./6-import-module2";
引用文件模块化,组织清晰
sass import
用法基本一样,三个模块,变量符号$
css预处理框架
- sass-Compass
- Less-Lesshat/EST
- 提供现成的mixin
- 类似 JS 类库 封装常用功能
真题
预处理不属于基础
- 常见的CSS预处理器
- Less(Node.js)
- Sass(Rudy 有Node版本)
- 预处理器作用
- 帮助更好的组织CSS代码
- 提高代码复用率
- 提升可维护性
- 优缺点
- 优点:提高代码复用率和可维护性
- 缺点:需要引入编译过程 有学习成本
Bootstrap
- 一个CSS框架
- Twitter出品
- 提供通用基础样式
Bootstrap4
- 兼容 IE10+
- 提供 flexbox 布局
- 抛弃 Normalize.css
- 提供布局和reboot版本
bootstrap
-
基础样式
-
常用组件
-
JS插件
-
Bootstrap JS 组件
- JS 依赖
- jQuery
- Popper.js,第三方库,处理弹出框
- bootstrap.js
- JS 依赖
-
使用方式:
- 基于data-*属性
- 基于 JS API(结构有限制,一般不使用,需要对组件实现封装)
bootstrap的基本用法
引进bootstrap改变布局,提供样式,查文档
grid option
Bootstrap 响应式布局
网格系统,在不同分辨率下有不同的分配
col-3、col-12
Bootstrap 定制方法
定制,部分风格修改
- 使用CSS同名类覆盖
- 简单直接,需全面覆盖,但不能用bootstrap计算关系
- 修改源码重新构建
- 要求有源码,方便,只要找到逻辑关系
- 引用scss源文件 修改变量 mixin
- 预处理框架,使用需要的代码,需要对bootstrap结构更熟悉
面试题
- bootstrap的优缺点
- 优点:CSS代码结构合理(源码,网格系统值得借鉴),现成的样式可以直接用
- 缺点:定制较为繁琐 体积大
- bootstrap如何实现响应式布局
- 原理:通过media query设置不同分辨率的class
- 使用:为不同分辨率选择不同的网格class
- 如何基于Bootstrap定制自己的样式
- 使用CSS同名类覆盖
- 修改源码重新构建
- 引用scss源文件 修改变量
CSS工程化方案
PostCSS 简介
CSS工程化
- 代码组织
- 优化
- 构建
- 维护
与预处理器相对,代码解析,CSS–PostCSS解析转换–CSS
模块化/加前缀/兼容性…
- PostCSS 本身只有代码解析能力
- 各种神奇特性全靠插件
- 至少有200个插件
- import 模块合并
- autoprefixier 自动加前缀
- cssnano 压缩代码
- cssnext使用CSS 新特性
- precss变量、mixin、循环等
PostCSS 插件的使用
安装插件后指定浏览器版本–autoprefixer
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano')
const atImport = require('postcss-import')
module.exports = {
plugins: [
atImport,
autoprefixer({
browsers:['>0%']
}),
cssnano
]
}
cssnano
压缩代码
cssnext
形成语法系统:root
@apply 应用
目的: 使 css 新特性适配浏览器
precss 与sass使用基本一样,预处理工具
gulp-postcss 支持的构建工具
webpack
- JS是整个应用的核心入口
- 一切资源由JS管理依赖
- 一切资源由webpack打包
CSS-module 组件样式封装,每个样式类都会被修改成一个独有的名字,避免样式冲突
module:{
rules:[{
test:/\.css$/,
use:['style-loader',{
loader:'css-loader',
options: {
modules:true
}
}]
}]
}
webpack 与 CSS
- css-loader 将CSS变成JS
- style-loader 将JS样式插入head
- ExtractTextPlugin 将CSS从JS中提取出来
- css modules 解决CSS命名冲突问题
- less-loader sass-loader 各类处理器
- postcss-loader PostCSS处理
面试真题
-
如何解决 CSS 模块化问题
CSS 内置的 @import 消耗性能,增加连接数
- Less Sass 等 CSS 预处理器合并 CSS
- PostCSS插件 (postcss-import / precss 等)
- webpack 处理 CSS (css-loader + style-loader)
-
PostCSS 可以做什么
- 取决于插件可以做什么
- autoprefixer cssnext precss 等 兼容性处理
- import 模块合并
- css 语法检查 兼容性检查
- 压缩文件
-
CSS modules 是做什么的,如何使用?
- 解决类名冲突问题
- 使用 PostCSS 或者 webpack 等构建工具进行编译
- 在 HTML 模版中使用编译过程产生的类名
-
为什么使用JS来引用、加载CSS
- JS 作为入口,管理资源有天然优势
- 将组件的结构、样式、行为封装到一起,增强内聚
- 可以做更多的处理 (webpack)
CSS三大框架
Angular 中的CSS
框架中的css
- Angular Vue React 三大框架
- Angular Vue 内置样式集成
- React 一些业界实践 轻量级
Angular
Angular.js(1.x) : 没有样式集成能力
Angular(2+) : 提供了样式封装能力;与组件深度集成
ShadowDOM : 逻辑上是一个DOM;结构上存在子集结构
Scoped CSS
- 限定了范围的CSS
- 无法影响外部元素
- 外部样式一般不影响内部
- 可以通过/deep/或>>>穿透
Vue 中的 CSS
-
模拟Scoped CSS
<style module / scoped>
解决样式冲突 -
方案一:随机选择器
<div :class="$this.style.demo">Hello, I'm {{name}}</div> ... <style module> .demo{ color:red; } </style>
- css modules
-
方案二:随机属性 Scoped
<style scoped> .demo{ color:red; } </style>
Vue 会元素的属性上加上随机属性以限制样式作用范围
<div abcdefg>
div[abcdefg]{}
React
样式解决相对麻烦,官方没有集成方案,社区方案众多
- css modules
- (bable) react-css-modules
- styled components
- styled jsx 直接在JSX中写样式
安装后创建项目,creat-react-app
eject命令
div className={styles.App}
课程总结
慕课课程内容
- HTML基础、CSS 基础
- CSS布局
- 效果和动画
- 工具、工程化、框架
- 知其然,知其所以然
- 知易行难 大量实践 掌握经验
- 关注根本 举一反三 触类旁通