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样式的时候，我们需要对不同元素进行样式的编写，我们需要考虑到元素所在的层次，采用不同的权重对其进行修改。

现在有骨架如下：

 
 Mr. 
 
 Jimmy 
 

现在有样式如下：

#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

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

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

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

.scss

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

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

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

Hello, Jimmy.

로그인 후 복사

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

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

로그인 후 복사

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

Hello, Jimmy.

로그인 후 복사

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

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

로그인 후 복사

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

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