sass以. sass 或者. scss 结尾. 两种不同结尾方式区别: . sass 结尾以缩进替代{}表示层级结构, 语句后面不用编写分号 . scss 以{}表示层级结构, 语句后面需要写分号 企业开发中推荐使用. scss 结尾 注意点: 如果需要使用考拉编译sass文件, 项目目录结构中(包含文件名)不能出现中文和特殊字符 <! DOCTYPE html> < html lang = "en" > < meta charset = "UTF-8" > < title > Document </ title > < style > /*以下sass方式*/ /*@mixin 意思是代表可以使用@mixin这个语句的内容引用到多个选择器中.重复使用把. @include 指令可以将混入（mixin）引入到文档中。 意思是可以将@mixin里面的语句引用到@include所在的地方. /*下面是scss文件*/ /*mixin center{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); .father{ width: 300px; height: 300px; background: red; @include center; .son{ width: 200px; height: 200px; background: blue; @include center; /*下面是scss编译成css代码的。*/ .father { width : 300px ; height : 300px ; background : red; position : absolute; left : 50% ; top : 50% ; transform : translate (- 50% , - 50% ); } .father .son { width : 200px ; height : 200px ; background : blue; position : absolute; left : 50% ; top : 50% ; transform : translate (- 50% , - 50% ); } </ style > </ head > < div class = "father" > < div class = "son" > </ div > </ div > </ body > </ html > 复制代码

分类：

后端

标签：

编程语言

安装掘金浏览器插件

多内容聚合浏览、多引擎快捷搜索、多工具便捷提效、多模式随心畅享，你想要的，这里都有！

前往安装

贵哥的编程之路