在实际工作中，CSS 编写更多的采用 CSS 扩展语言，像 Scss、Less 等，因其学习成本低，实用性高，被广泛应用。

概念

💡 Tips：工作中，Less、Scss 都可以使用，二者基本没有高低之分，常用功能基本都包含，可参考其官网，选择其一即可

CSS 扩展语言	说明	官网
Less	优雅的编写CSS，API清晰明了，简单易上手，后缀名 .less	Less 官网
Sass	功能强大，3.0前版本不好用，后缀名 .sass	–
Scss	Sass 3.0后版本，更名Scss，API功能更多，好用，后缀名 .scss	Sass 官网

常用的扩展能力

💡 Tips：后续例子都采用 Less 扩展语言演示，Scss 相同功能可参考官网

1、嵌套：代码层级清晰

.parent {position: relative;.son {position: absolute;left: 0;top: 0;}
}

2、变量：项目风格抽离

// 项目蓝色
@blue: #007aff;// 基本单位尺寸
@pm: 12px;3、混合：公共样式封装.parent {color: @blue;padding: @pm;
}

3、混合：公共样式封装

.borderTop {border-top: 1px solid #ccc;
}
.overflowDot {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}.parent {.borderTop();.text {.overflowDot();}
}

4、&：当前选择器的父级

.clearfix {display: block;zoom: 1;&:after {content: " ";display: block;font-size: 0;height: 0;clear: both;visibility: hidden;}
}

5、导入：公共文件抽离

@import "library"; // library.less
@import "typo.css";