站长家园(原代码之家)(www.adminjie.com)网站源码,微信源码,游戏源码,商业源码分享平台。
当前位置:网站首页 技术文章 网络编程 正文

Angular项目中怎么使用 SASS 样式

时间:2022-05-09 [网络编程]作者:fabuyuan 浏览:5 次

Angular项目中怎么使用 SASS 样式?下面本篇文章给大家介绍一下Angular 中 SASS 样式的使用方法,希望对大家有所帮助!

在 Angular 自定义指令 Tooltip 文章中,我们说会出一篇关于 sass 样式的文章,现在它来了。

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

那么,我们可以通过 CSS 的扩展语言来进行编写维护。目前前端界比较流行的两个 CSS 扩展语言是 lesssass。本文讲解的是 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 即成也有这种效果。

5. 使用 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 样式的详细内容,更多请关注站长家园其它相关文章!

本文标签:  SASSAngularAngular.js

转载请注明来源:Angular项目中怎么使用 SASS 样式

本文永久链接地址:https://www.adminjie.com/post/12119.html

免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

  • 站长家园(原代码之家)会员升级
  • 最新文章
    • jquery怎么根据id判断元素是否存在

      jquery怎么根据id判断元素是否存在

      判断方法:1、通过id属性值获取指定元素,语法“$("#id值")”,会返回一个包含指定元素的jQuery对象;2、使用“元素对象.length>0”语句...

    • jquery怎么删除所有li元素

      jquery怎么删除所有li元素

      删除方法:1、利用find()选取文档的所有li元素,语法“$("body").find("li")”,返回一个包含所有li元素的jQuery对象;2、利用re...

    • oracle怎么查询表的同义词

      oracle怎么查询表的同义词

      在oracle中,可以利用select语句配合“dba_synonyms”查询表的所有同义词,语法为“select*fromdba_synonyms”;同...

    • jquery如何改变img的属性值

      jquery如何改变img的属性值

      两种改变方法:1、用attr()修改属性值,语法“$("img").attr({属性1:"值",属性2:"值"...});”。2、用prop()修改属性值,语法...

    • oracle怎么判断索引是否失效

      oracle怎么判断索引是否失效

      在oracle中,可以利用“selectstatusfromuser_indexeswhereindex_name='索引名称';”语句判断索引是否失...

    热门文章