我的前端学习笔记之CSS基础--预处理器、Bootstrap、工程化方案、总结

预处理器

css预处理器

• 基于css的另一种语言
• 通过工具编译成css
• 添加了很多css不具备的特性
• 能提升css文件的组织

1. less 基于node.js写的，较简单
2. 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

• 使用方式：

  • 基于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工程化

1. 代码组织
2. 优化
3. 构建
4. 维护

与预处理器相对，代码解析，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处理

面试真题

1. 如何解决 CSS 模块化问题

   CSS 内置的 @import 消耗性能，增加连接数

   • Less Sass 等 CSS 预处理器合并 CSS
   • PostCSS插件 (postcss-import / precss 等)
   • webpack 处理 CSS (css-loader + style-loader)

2. PostCSS 可以做什么

   • 取决于插件可以做什么
   • autoprefixer cssnext precss 等 兼容性处理
   • import 模块合并
   • css 语法检查 兼容性检查
   • 压缩文件

3. CSS modules 是做什么的，如何使用?

   • 解决类名冲突问题
   • 使用 PostCSS 或者 webpack 等构建工具进行编译
   • 在 HTML 模版中使用编译过程产生的类名

4. 为什么使用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}

课程总结

慕课课程内容

1. HTML基础、CSS 基础
2. CSS布局
3. 效果和动画
4. 工具、工程化、框架

• 知其然，知其所以然
• 知易行难 大量实践 掌握经验
• 关注根本 举一反三 触类旁通