FCAT

Appearance

深度选择器 ​

::v-deep 和 /deep/ 是出现在 Vue.js 技术栈中的。

学习 Vue.js 的时候，你会碰到这些选择器。 在使用 Vue.js 编写组件时，组件的样式可能会嵌套在父级组件中，此时使用 /deep/ 或 ::v-deep 可以穿透到子组件内部的 DOM 元素，实现样式的继承和覆盖。

1. 深度选择器 /deep/ ​

在 Vue.js 2.6 中，/deep/ 被标记为过时，可以用 ::v-deep 来代替。同时也可以使用 >>> 选择器来实现相同的选择器效果。

css
/deep/ .el-switch__core::before {
	content: "不含税";
	position: absolute;
	top: 0;
	right: 3px;
	color: #fff;
}

.is-checked /deep/ .el-switch__core::before {
	content: "含税";
	position: absolute;
	top: 0;
	left: 3px;
	color: #fff;
}
/deep/ .el-switch__core::before {
	content: "不含税";
	position: absolute;
	top: 0;
	right: 3px;
	color: #fff;
}

.is-checked /deep/ .el-switch__core::before {
	content: "含税";
	position: absolute;
	top: 0;
	left: 3px;
	color: #fff;
}

2. 深度选择器 ::v-deep ​

3. 深度选择器 >>> ​

4. !important ​

在 css 中，!important 可以用于覆盖样式优先级和继承规则，以确保特定规则的优先级最高。

5. scoped ​

6. scss ​

scss 则是一种 css 预处理器，它允许你使用变量、嵌套、混合、继承等高级功能来编写样式表，简化了 css 的书写。scss 文件可以使用 .scss 后缀名，也可以使用 .sass 后缀名。

总之，学习 Vue.js 和 css 的时候，你都会碰到 ::v-deep 和 !important，在学习 scss 时会接触到后者的简写语法 !。

7. sass ​

  • 全称 Syntactically Awesome StyleSheets

sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 sass 以及 sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。

8. less ​

  • 全称 Leaner Style Sheets

less 是一门向后兼容的 css 扩展语言，是一门 css 预处理语言，它扩充了 css 语言，增加了诸如变量、混合（ mixin ）、函数等功能，让 css 更易维护、方便制作主题、扩充。less 可以运行在 Node 或浏览器端。

less 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力。

假设我们有以下 css 代码：

css
#header {
    color:black;
}
#header .navigation {
    font-size:12px;
}
#header .logo {
    width:300px;
}
#header {
    color:black;
}
#header .navigation {
    font-size:12px;
}
#header .logo {
    width:300px;
}

用 less 语言我们可以这样写：

css
#header {
    color:black;
    .navigation {
        font-size:12px;
    }
    .logo {
        width:300px;
    }
}
#header {
    color:black;
    .navigation {
        font-size:12px;
    }
    .logo {
        width:300px;
    }
}

用 less 书写的代码更加简洁，并模仿了 HTML 的组件结构。

9. css ​

  • 全称 Cascading Style Sheets （层叠样式表）

css 是一门历史悠久的标记性语言，同 HTML 一道，被广泛应用于万维网（World Wide Web）中。HTML 主要负责文档结构的定义，css 负责文档表现形式或样式的定义。