详解CSS应用（三）

痛定思痛。 2022-05-19 03:29 257阅读 0赞

## 五、CSS预处理器 ##

### 0x1 优点 ###

*  嵌套 反映层级和约束
 *  变量和计算减少重复代码
 *  Extend和Mixin代码片段
 *  循环 适用于复杂有规律的样式
 *  import CSS 文件模块化
 *  帮助更好地组织CSS代码
 *  提高代码复用率
 *  提升可维护性

### 0x2 安装Less ###

Less的安装需要Node.js和npm支持，首先安装他们。

brew install node  //通过homebrew安装
    //查看是否安装成功
    node -v
    npm -v

安装Node环境之后，再安装Less

npm install -g less  //全局安装，这样就可以在任意地方编译css

Less使用命令

#编译less
    $ lessc styles.less
    #编译css到一个文件
    $ lessc styles.less styles.css

### 0x3 Less语法 ###

语法比较多移步[这里][Link 1]查看

## 六、Bootstrap框架 ##

### 0x1 响应式布局 ###

![20180719165742.png][]  
栅格布局，根据屏幕分辨率确定占几个格子。  
如果col占12，col-lg占3，col-md占4，col-sm占6。

### 0x2 定制风格 ###

1、使用CSS同名类覆盖  
\- 在style文件里修改样式  
\- 缺点：修改的样式可能会很多，颜色之间没有计算关系

2、修改源码重新构建  
修改bootstrap源码再构建css

3、引用 scss 源文件修改变量

$primary: green;
    @import './bootstrap-custom/scss/bootstrap';

### 0x3 面试题 ###

1、Bootstrap的优缺点  
优点：CSS 代码结构合理现成的样式，可以直接用  
缺点：定制较为繁琐体积大  
2、Bootstrap如何实现响应式布局  
原理：通过media query设置不同分辨率的class  
使用：为不同分辨率选择不同的网格class  
3、如何基于Bootstrap定制自己的样式  
使用CSS同名类覆盖  
修改源码重新构建  
引用scss源文件修改变量

## 七、CSS工程化 ##

> 组织、优化、构建、维护

### 0x1 PostCSS ###

![20180719173000.png][]  
\- PostCSS本身只有解析能力  
\- 各种神奇的特性全靠插件  
\- 目前至少有 200 多个插件  
相关插件  
\- Import 模块合并  
\- autoprefixier 自动加前缀  
\- cssnano 压缩代码  
\- cssnext 使用CSS新特性  
\- precss 变量、mixin、循环等

### 0x2 webpack ###

![20180719174623.png][]  
核心思想  
\- JS 是整个应用的核心入口  
\- 一切资源均由 JS 管理依赖  
\- 一切资源均由 webpack 打包

相关插件  
\- Css-loader 将CSS变成JS  
\- style-loader 将JS样式插入head  
\- ExtractTextPlugin 将 CSS 从 JS 中提取出来  
\- css modules 解决 CSS 命名冲突的问题  
\- less-loader sass-loader 各类预处理器  
\- postcss-loader PostCSS处理

### 0x3 CSS模块化面试 ###

1、如何解决CSS模块化问题  
\- Less Sass 等CSS预处理器  
\- PostCSS 插件（postcss-import/precss等）  
\- webpack 处理CSS(css-loader + style-loader)

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

3、CSS modules是做什么的，如何使用解决类名冲突的问题  
\- 使用PostCSS或者webpack等构建工具进行编译  
\- 在HTML模板中使用编译过程产生的类名

4、为什么使用 JS 来引用、加载 CSS  
\- JS作为入口，管理资源有天然优势  
\- 将组件的结构、样式、行为封装到一起增强内聚  
\- 可以做更多处理（webpack)

[Link 1]: https://blog.csdn.net/geekmubai/article/details/81114064
[20180719165742.png]: /images/20220519/ddbbcf89ca054c188318f3490dec85e8.png
[20180719173000.png]: /images/20220519/1832f1a92a56474989d1f7c5b51a747f.png
[20180719174623.png]: /images/20220519/f0e71c3a15b144ef9b65a1d49f75c3d5.png