Sass初体验_ 字节宝

SASS (Syntactically Awesome Stylesheets Sass)

SASS 是一套利用 Ruby 实现的，最早最成熟的 CSS 预处理器，诞生于 2007 年 它扩展了 CSS 语言，增加了变量、Mixin(混合)、嵌套、函数和运算等特性，使 CSS 更易维护和扩展

关于学习 SASS

Less 是一套利用 JavaScript 实现的 CSS 预处理器，诞生于 2009 年 由于 Less 的诞生比 Sass 要晚，并且 Less 受到了 Sass 的影响，所以在 Less 中能看到大量 Sass 中的特性 所以只要学会了 Less 就等同于学会了大部分的 Sass

Less 和 Sass 文件后缀名区别

Less 以 .less 结尾 Sass 以 .sass 或者 .scss 结尾

两种不同结尾方式的区别：

.sass 结尾以缩进替代 {} 表示层级结构，语句后面不用编写分号
.scss 以 {} 表示层级结构，语句后面需要写分号

企业开发中推荐使用 .scss 结尾，注意点：如果需要使用考拉编译 sass 文件，项目目录结构中(包含文件名)不能出现中文和特殊字符，就拿着之前在 less 文章当中的一个示例，一个父子结构的 div 元素，用 less 文件的方式设置它们的样式现在换成用 sass 来进行编写代码如下，首先来看以 .sass 后缀结尾的方式：

创建 index.sass

代码语言：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

使用考拉客户端进行编译，如下：

HTML 结构内容如下：

代码语言：html复制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BNTang</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
</body>
</html>

如上就是以 .sass 结尾的形式，紧接着就是以 .scss 结尾的形式如下：

代码语言：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;
  }
}

编译：

和如上以 .sass 编译的结构一样不在演示。

我正在参与2023腾讯技术创作特训营第二期有奖征文，瓜分万元奖池和键盘手表

2023腾讯·技术创作特训营第二期

0 人点赞