Sass初体验

原创

一个爱听音乐的程序员 2021-08-12 22:57:00 ©著作权

文章标签 Sass css html 预处理 文章分类 Html/CSS 前端开发

©著作权归作者所有：来自51CTO博客作者一个爱听音乐的程序员的原创作品，请联系作者获取转载授权，否则将追究法律责任

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

@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初体验_预处理

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 结尾的形式如下：

@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;
  }
}