详解CSS应用（三）

五、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语法

语法比较多移步这里查看

六、Bootstrap框架

0x1 响应式布局

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

  <div class="container">
        <div class="row">
            <div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>内容</div></div>
            <div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>内容</div></div>
            <div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>内容</div></div>
            <div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>内容</div></div>
            <div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>内容</div></div>
            <div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>内容</div></div>
            <div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>内容</div></div>
            <div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>内容</div></div>
        </div>
    </div>

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

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

0x2 webpack

核心思想
- 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)