css 知识点总结

less 和 sass 用法和编译

相同点：

1. 两者都是预编译器，可以有变量，运算，嵌套的功能，最终是会生成 css 样式，都是为了编写 css 更加便捷，更好维护。
2. 都可以通过自带的插件转成相应的 css 文件。
3. 都可以参数混入，可以传递参数的 class 就像函数。
4. 嵌套的规则相同，都是 class 嵌套 class。

不同点：

1. 编译环境不一样，scss 安装需要 Ruby 环境，还在服务端处理。而 less 是需要引入 less.js 来处理 less 代码输出 css 到浏览器。
2. 申明和使用变量不同，less 是通过@，scss 是通过$。
3. scss 支持条件语句，less 不支持。

   scss 可以使用 if{}else{},for 循环等，less 不支持。

4. 应用外部 css 文件方式不同

   SCSS 应用的 css 文件名必须以‘_’开头（下划线），文件名如果以下划线开头的话，sass 会认为改文件是一个应用文件，不会将它转成 css 文件

5. 颜色函数

   调整色相的话，LESS 使用 spin（）的函数；SCSS 使用名为 adjust_hue()的函数。

示范：

// less
@state-success-border:darken (spin(@state-success-bg,-10),5%);

// scss
$state-success-border: darken (adjust_hue($state-success-bg, -10), 5%);

6. 引用父选择器&符号的使用

   less 和 scss 都可以使用&符号选择器来表示父选择器，但是 scss 的&符号只能出现在一个组合选择器的开始位置，less 没有这个限制。 示范

//less
.bg-color(@color) {
  background-color: @color;
  a&:hover {
    background-color: @color;
  }
}

//scss
a {
  background-color: $color;
  &:hover {
    background-color: $color;
  }
}

7. 输出：less 没有输出设置，scss 提供四种输出设置nested, compact, compressed 和 expanded有四种选择，默认为nested.

• nested：嵌套缩进的 css 代码
• expanded：展开的多行 css 代码
• compact：简洁格式的 css 代码
• compressed：压缩后的 css 代码

兼容性解决

rem 原理

移动端适配