Sass 与 Less

Sass背景

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

Less背景

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

包管理工具

npm

npm 是 Node.js 的包管理器，用于管理 JavaScript 项目所依赖的库和工具。它是 Node.js 的默认包管理工具，帮助开发者安装、升级、卸载和共享代码。

1
2
3
4
5
6
7
8

# 查看npm最新版本
npm show npm version

# 查看本地当前版本
npm -v

# 更新npm到最新版
npm install -g npm@latest

yarn

Yarn 是 Facebook 开发的另一个包管理工具，主要用于替代 npm，解决一些 npm 的性能和一致性问题。

pnpm

pnpm 是一个比 npm 和 yarn 更高效的包管理工具，主要解决了 磁盘占用大 和 安装速度慢 的问题。它通过 共享依赖 和 符号链接（symlink） 来优化安装流程，使其更快、更节省磁盘空间。

常用命令

MacOS Node 升级

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

前端布局方案

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