分享更有价值
被信任是一种快乐

Angular项目中如何使用SASS样式

文章页正文上

这篇文章主要讲解了“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 中编写样式,可以分为组件样式和全局样式。组件样式就是组件单独拥有,其他组件不会生效,比如,你通过 ng g compoent demo 生成组件:其中 demo.compoent.scss 就是 deom 这个组件的样式表。全局样式angular 脚手架生成的项目,默认在 src/style.scss 文件存放全局的样式。在这个文件修改的样式,将对整个应用的样式产生影响。Sass 重点语法针对日常的开发工作,我们来介绍下比较重要的内容。1. 使用变量使用变量能够让你在多个页面或者页面中的多处进行调用。我们将变量方式在一个文件中进行管理,当需要使用到它的使用,我们直接进行 @import 导入使用即可:2. 使用嵌套在使用 css 样式的时候,我们需要对不同元素进行样式的编写,我们需要考虑到元素所在的层次,采用不同的权重对其进行修改。现在有骨架如下:现在有样式如下:那么我们可以使用嵌套写法,逻辑清晰,阅读方便:3. 使用计算sass 提供了一系列的操作符,如 +、-、*、/、%,使用就像写 javascript 变量运算一样,竟然还可以带单位:除了这些基本的运算符之外,sass 还提供了很多的方法,比如 String 函数:又例如更改颜色的透明度方法:4. 使用 mixin 混合器在编写样式的时候,我们会出现在多个类中调用同一份的样式内容。比如:我们使用 mixin 改写:使用 mixin 提取公共的代码出来,方便我们更改,改一处多处更改。当然,extend 即成也有这种效果。5. 使用 extend 继承比如,我们可以对上一个类的样式进行续写:原骨架和样式:改写后:感谢各位的阅读,以上就是“Angular项目中如何使用SASS样式”的内容了,经过本文的学习后,相信大家对Angular项目中如何使用SASS样式这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是云技术,小编将为大家推送更多相关知识点的文章,欢迎关注!

相关推荐: vue发布后不清理缓存怎么解决

今天小编给大家分享一下vue发布后不清理缓存怎么解决的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。 Vue.js 是一款流行的 JavaScri…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册