总结分享：在Angular中使用 SASS 样式的详细过程

本文是关于Angular教程之总结分享，旨在帮助大家掌握在Angular中使用 SASS 样式的详细过程，下面来详细解析一下，一起看看。

总结分享：在Angular中使用 SASS 样式的详细过程

angular 组件样式

组件样式就是组件单独拥有，其他组件不会生效，比如，你通过 ng g compoent demo 生成组件：

- demo.component.ts
- demo.component.html
- demo.component.scss
- deom.component.spec.ts

其中 demo.compoent.scss 就是 deom 这个组件的样式表。

全局样式

angular 脚手架生成的项目，默认在 src/style.scss 文件存放全局的样式。在这个文件修改的样式，将对整个应用的样式产生影响。

Sass 重点语法

使用变量

使用变量能够让你在多个页面或者页面中的多处进行调用。

// _varible.scss
// **** COLORS ****
$black: #000000;
$white: #ffffff;
$dark-green: #007f7f;
// **** usage ****
$primary-color: $dark-green;

我们将变量方式在一个文件中进行管理，当需要使用到它的使用，我们直接进行 @import 导入使用即可：

@import "path/to/varible.scss";
 
#demo {
  color: $primary-color; // 调用
}

使用嵌套

在使用 css 样式的时候，我们需要对不同元素进行样式的编写，我们需要考虑到元素所在的层次，采用不同的权重对其进行修改。

现在有骨架如下：

<div id="demo">
  <div class="inner">
    <span class="prefix">Mr.</span>
  </div>
  <div class="inner">
    <span class="name">Jimmy<span>
  </div>
</div>

现在有样式如下：

#demo .inner .prefix {
  color: red;
  font-size: 11px;
}
#demo .inner .name {
  font-size: 14px;
}

那么我们可以使用嵌套写法，逻辑清晰，阅读方便：

#demo {
  .inner{
    .prefix {
      color: red;
      font-size: 11px;
    }
    .name {
      font-size: 14px;
    }
  }
}

 使用计算

sass 提供了一系列的操作符，如 +、-、*、/、%，使用就像写 javascript 变量运算一样，竟然还可以带单位：

width: 100px / 400px * 100%l;

除了这些基本的运算符之外，sass 还提供了很多的方法，比如 String 函数：

to-upper-case('italic'); // ITALIC

又例如更改颜色的透明度方法：

#demo {
  background-color: transparentize($black, 0.5)
}

使用 mixin 混合器

在编写样式的时候，我们会出现在多个类中调用同一份的样式内容。比如：

.demo {
  font-size: 12px;
  color: red;
}
.another_demo {
  font-size: 12px;
  color: blue;
}

我们使用 mixin 改写：

@mixin common-style {
  font-size: 12px;
}
 
.demo {
  @include common-style;
  color: red;
}
.another_demo {
  @include common-style;
  color: blue;
}

使用 mixin 提取公共的代码出来，方便我们更改，改一处多处更改。当然，extend 即成也有这种效果。

使用 extend 继承

比如，我们可以对上一个类的样式进行续写：

原骨架和样式：

<span class="prefix name">Hello, Jimmy.</span>.prefix {

  font-size: 12px;
}
.name {
  color: red;
}

改写后：

<span class="name">Hello, Jimmy.</span>

.prefix {
 font-size: 12px;
}
.name {
  @extend .prefix
  color: red;
}

关于在Angular中使用 SASS 样式的详细过程解析到这里就结束了，翼速应用平台内有更多相关资讯，欢迎查阅！