Angular 프로젝트에서 SASS 스타일을 사용하는 방법

Angular 프로젝트에서 SASS 스타일을 어떻게 사용하나요? 다음 글에서는 Angular에서 SASS 스타일을 사용하는 방법을 소개하겠습니다. 도움이 되길 바랍니다.

Angular Custom Directive Tooltip 기사에서 sass 스타일에 대한 기사가 있다고 했는데 이제 여기에 있습니다. sass 样式的文章，现在它来了。

前端三剑客之一，层叠样式表(Cascading Style Sheets，CSS），就是对 HTML 骨架的润色。但是我们通过原生编写的样式，会出现很多重复代码，而已逻辑不明确。

那么，我们可以通过 CSS 的扩展语言来进行编写维护。目前前端界比较流行的两个 CSS 扩展语言是 less 和 sass。本文讲解的是 sass。

less 也是差不多，sass 更加成熟

SASS 提供了两种编写的语法，一种是 .scss 为后缀，另一种是 .sass 为后缀。

• .scss 为后缀，语法用 {} 修饰
• .sass 为后缀，语法是缩紧方式

推荐使用 .scss

项目集成

angular 项目使用脚手架生成，在添加样式这一个步骤，会询问你编写样式的方式，让你选择：

选择 SCSS，然后确认即可，就是这么简单。

在 angular 中编写样式，可以分为组件样式和全局样式。【相关教程推荐：《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 重点语法

针对日常的开发工作，我们来介绍下比较重要的内容。

1. 使用变量

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

// _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; // 调用
}

2. 使用嵌套

在使用 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;
    }
  }
}

3. 使用计算

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

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

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

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

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

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

4. 使用 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

세 가지 프런트엔드 검사 중 하나인 Cascading Style Sheets(

CSS)는 HTML 뼈대를 다듬은 것입니다. 그러나 우리가 기본적으로 작성하는 스타일에는 반복되는 코드가 많고 논리가 명확하지 않습니다.

그러면 CSS라는 확장 언어를 통해 작성하고 유지 관리할 수 있습니다. 현재 프런트엔드 세계에서 가장 인기 있는 두 가지 CSS 확장 언어는 less와 sass입니다. 이 문서에서는 sass에 대해 설명합니다.

less는 거의 동일하고 sass는 더 성숙합니다

SASS는 두 가지 쓰기 구문을 제공합니다. 하나는 접미사로 .scss이고, 다른 하나는 접미사인 .sass입니다.

• .scss는 접미사이며 구문은 {}
• .sass로 수정됩니다. >는 접미사, 구문은 축약형입니다

.scss

사용을 권장합니다. 프로젝트 통합

angular 프로젝트는 스캐폴딩을 사용하여 생성됩니다. 스타일을 추가하는 단계에서 스타일 작성 방법을 묻는 메시지가 표시되며 다음을 선택할 수 있습니다.

🎜🎜SCSS 선택 code>를 입력하고 확인하면 매우 간단합니다. 🎜🎜스타일을 <code>angular로 작성하세요. 각도는 컴포넌트 스타일과 전역 스타일로 나눌 수 있습니다. [관련 튜토리얼 추천: "🎜angular tutorial🎜"]🎜🎜🎜컴포넌트 스타일🎜🎜🎜컴포넌트 스타일은 해당 컴포넌트가 단독으로 소유되며 다른 컴포넌트는 적용되지 않는다는 의미입니다. 예를 들어 ng를 통해 컴포넌트를 생성합니다. 컴포넌트 데모 ：🎜

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

🎜여기서 demo.compoent.scss는 deom 컴포넌트의 스타일 시트입니다. 🎜🎜🎜전역 스타일🎜🎜🎜 angular 스캐폴딩으로 생성된 프로젝트는 기본적으로 src/style.scss 파일에 전역 스타일을 저장합니다. 이 파일에서 수정된 스타일은 전체 애플리케이션의 스타일에 영향을 미칩니다. 🎜🎜🎜Sass 키 구문🎜🎜🎜일상적인 개발 작업에 있어 더 중요한 내용을 소개하겠습니다. 🎜🎜🎜1. 변수 사용🎜🎜🎜변수를 사용하면 여러 페이지 또는 페이지의 여러 위치에서 호출할 수 있습니다. 🎜

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

🎜변수 메소드를 파일에서 관리해야 할 경우 @import를 사용하여 직접 가져올 수 있습니다. 🎜

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

🎜🎜2. 중첩을 사용하세요🎜🎜 🎜css 스타일을 사용하려면 다양한 요소에 대한 스타일을 작성해야 하며 요소의 수준을 고려하여 다양한 가중치로 수정해야 합니다. 🎜🎜이제 뼈대는 다음과 같습니다. 🎜

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

🎜이제 스타일은 다음과 같습니다. 🎜rrreee🎜 그런 다음 명확한 논리와 읽기 쉬운 중첩 쓰기를 사용할 수 있습니다. 🎜rrreee🎜🎜3 계산 사용🎜🎜🎜 sass javascript 변수 연산을 작성하는 것처럼 사용할 수 있는 +, -, *, /, %와 같은 일련의 연산자를 제공합니다. 단위도 포함합니다: 🎜 rrreee🎜 이러한 기본 연산자 외에도 sass는 String 함수와 같은 다양한 메서드도 제공합니다. 🎜rrreee🎜투명도를 변경하는 예 색상: 🎜rrreee 🎜🎜4. mixin 믹서 사용🎜🎜🎜스타일을 작성할 때 여러 클래스에서 동일한 스타일 콘텐츠를 호출합니다. 예: 🎜rrreee🎜mixin을 사용하여 다시 작성합니다. 🎜rrreee🎜mixin을 사용하여 공통 코드를 추출하여 한 곳과 여러 곳에서 변경할 수 있습니다. . 물론 extend도 이 효과를 가질 수 있습니다. 🎜🎜🎜5. 확장 상속 사용🎜🎜🎜예를 들어 이전 클래스의 스타일을 계속 작성할 수 있습니다. 🎜🎜원래 뼈대 및 스타일: 🎜rrreeerrreee🎜다시 작성한 후: 🎜rrreeerrreee🎜일상 개발에서는 위 내용을 마스터하세요. 스타일 작성을 쉽게 처리할 수 있는 실력이 충분합니다~🎜🎜[끝]🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 교육🎜을 방문하세요! ! 🎜

위 내용은 Angular 프로젝트에서 SASS 스타일을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!