less以.less结尾. sass以.sass或者.scss结尾. 两种不同结尾方式区别: .sass结尾以缩进替代{}表示层级结构, 语句后面不用编写分号 .scss以{}表示层级结构, 语句后面需要写分号
企业开发中推荐使用.scss结尾
注意点: 如果需要使用考拉编译sass文件, 项目目录结构中(包含文件名)不能出现中文和特殊字符 <!DOCTYPE html> <html lang="en"> <head> <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> <body> <div class="father"> <div class="son"></div> </div> </body> </html>
SASS第一篇 认识它
关注
打赏
