Sass 与 Less

Sass背景

  • CSS 不是编程语言，虽然可以用它来开发网页样式，但是没有办法用它编程。SASS 的出现，让 CSS 实现了通过代码编程的方式来实现。
  • SASS 是一种可用于编写 CSS 的语言，是一种 CSS 预处理器，提供了许多便利的写法，让 CSS 的处理实现了可编程处理。

Less背景

  • Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。
  • less，是方便我们快速编写CSS的工具，它增强了CSS代码的扩展性和复用性。
  • Less 可以运行在 Node 或浏览器端。

NPM, Yarn, Laravel Mix

前端主流包管理工具对比

NPM

  • NPM 是 Node.js（一个基于 Google V8 引擎的 JavaScript 运行环境）的包管理和任务管理工具。Composer 的一些概念也是从 NPM 中借鉴过来的，因此 NPM 也有个类似 composer.json 文件的 package.json 文件
  • NPM 的任务管理功能，如npm run watch-poll, npm run dev等

Yarn（主推yarn：yarn的确定性安装，可以避免很多潜在的问题，相对安全）

  • Yarn 是经过重新设计的崭新的 npm 包管理工具，它能让开发人员并行处理所有必须的操作，并添加了一些其他改进。
  • 运行速度得到了显著的提升，整个安装时间也变得更少
  • 像 npm 一样，yarn 使用本地缓存。与 npm 不同的是，yarn无需互联网连接就能安装本地缓存的依赖项，它提供了离线模式。
  • 允许合并项目中使用到的所有的包的许可证

Laravel Mix

  • Laravel Mix 一款前端任务自动化管理工具，使用了工作流的模式对制定好的任务依次执行。Mix 提供了简洁流畅的 API，让你能够为你的 Laravel 应用定义 Webpack 编译任务。Mix 支持许多常见的 CSS 与 JavaScript 预处理器，通过简单的调用，你可以轻松地管理前端资源。我们可以在 webpack.mix.js 文件中制定一些如资源文件的编译、压缩等任务。

MacOS Node 升级

  • brew uninstall –ignore-dependencies node
  • sudo rm -rf /usr/local/lib/node_modules/npm # 不做此操作，npm可能不会跟着升级
  • brew install node

常用命令

  • npm / yarn install –no-bin-links # 安装依赖包
  • npm / yarn add [package]
  • npm run dev # 将 .scss 等文件编译为 .css等静态文件
  • npm run watch-poll # 在每次检测到 .scss 等文件发生更改时，自动将其编译为 .css 等静态文件

前端布局方案

  1. 布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现
  2. bootstrap的栅格布局
  3. 圣杯布局
  4. Flex布局：Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。