首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

【OpenHarmony】TypeScript 语法 ⑤ ( | 创建和使用 | 继承 | 迭代器遍历 | for of 语句遍历元素 | for in 语句遍历下标 )

关键字创建 对象 ; // 创建 Student 对象 let student: Student = new Student("Jerry", 12); 创建对象后 , 使用 ....操作符 , 调用对象成员 ; // 调用 Student 对象成员方法 student.hello(); 2、代码示例 - 创建和使用 代码示例 : class Student {...Symbol.iterator 属性后 , 就可以使用 for 循环 进行迭代 , TypeScript 语言内置可迭代类型有 : Array 数组 Map 映射 Set 集合 String 字符串...Int32Array 4 字节整型数组 Unit32Array for 循环遍历有 2 种方式 : for of 语句遍历是 元素 ; for in 语句遍历事 下标 ; 2、for of 语句遍历数组元素...代码 : [LOG]: "Blue" [LOG]: "Red" [LOG]: "Green" 3、for in 语句遍历数组下标 使用 for in 循环语句 , 可以对数组 下标 进行遍历 ;

8310
您找到你想要的搜索结果了吗?
是的
没有找到

Sass和Less(预处理器)「建议收藏」

Sass和Less(预处理器) 一、了解Sass和Less 二、Sass和Less 语法 2.1 注释 2.2 语法 赋值 插值 作用域 选择器嵌套、伪嵌套、属性嵌套Sass) 运算 函数 混合、命名空间...它是一种无论你想怎么样使用,大都能顺利转换成 CSS 程序语言。 Sass和Less都属于预处理器。Less文件.less结尾,Sass文件新版.scss结尾,老版.sass结尾。...Sass作用域有顺序。 图片 选择器嵌套、伪嵌套、属性嵌套Sass) 在Less和Sass中,可以对标签嵌套,在里面写各个层级写相应样式,编译完成后,会自动写好对应选择器。...减少复杂编译选择器代码。 伪嵌套,需要在伪冒号前面加&,不然会有空格。 属性嵌套只有在Sass中有,Less没有。...---- Less和Sass媒体查询 条件判断、循环 Less条件判断和循环 图片 ---- Sass循环 只有在Sass中有if-else,和for循环 图片 图片 图片

3.7K10

CSS 预编译语言 Sass 快速入门教程

Sass 具有两种不同后缀名分别对应两套语法,最早 Sass 使用是缩进式语法,使用缩进来区分代码块,并通过分号将具体样式分开,这种语法 .sass 作为后缀;另一种使用了和 CSS 一样块语法...3、Sass 使用语法 Sass 提供了变量、嵌套、混合、导入、循环等功能,不过作为有其他编程语言功底我们来说,学习起来非常简单,花个一个小时就熟悉了,下面我们逐一来介绍这些功能。...嵌套 Sass 嵌套语法也很实用,在此之前,我们只能通过多个 CSS 样式定义来解决嵌套问题: nav { ul { margin: 0; padding: 0; list-style...导入 Sass 支持通过 @import 指令导入其它 Sass 文件,既可以导入本地开发文件,也可以导入前端依赖库中文件,还可以导入网络字体文件, Laravel 自带 resources/sass...继承 Sass 还支持样式继承,我们通过 % 前缀指定用于继承样式,然后在需要继承地方提供 @extend 指令继承相应样式: // %开头不会渲染 %message-shared {

7.1K41

如何使用SASS编写可重用CSS

保持作用域以避免意外地设置样式有时候有的很累。 即使引入了 CSS 变量减少声明重复,但使用预处理器仍可以解决变量一些问题。 例如:较长变量名。...CSS 预处理程序通常会增加一些纯CSS中不存在特性,比如 mixin、嵌套选择器、继承选择器。同时也给了我们结构化方式来编写样式。...SCSS 中概念 嵌套和作用域 当设计 HTML文件样式时,SCSS 使我们能够在样式表中拥有相同 HTML 视觉层次结构,这样我们就可以一种更容易理解方式来设计样式。...使用 scss 变量 SCSS中变量美元符号$开头。...在 @for 循环中使用一个固定变量来替代遍历元素。如果你想实现从大到小遍历,只需让 start 大于 end 即可。

7.6K20

less和sass区别,你了解多少?

: (1)、Sass变量 使用 $变量名:变量值,声明变量; 如果变量需要在字符串中嵌套,则需使用#加大括号包裹; border-#{$left}:10px solid blue; (2)、Sass...中运算,会将单位也进行运算,使用时需注意最终单位 例:10px10px=100pxpx (3)、sass嵌套:选择器嵌套,属性嵌套,伪嵌套 选择器嵌套 ul{ li{} } 后代 ul{...>li{} } 子代 &:表示上一层 div{ ul{ li{ &==“div ul li” } } } 属性嵌套:属性名与大括号之间必须有: 例如:border:{color:red;} 伪嵌套...,用混合宏;当有现成class时用继承;当不需要参数,也不需要class时,用占位符 (5)、if条件结构: @if 条件{} @else{} (6)、for循环结构: @for $i from 1...:#{$j}px solid red; } $j:$j+1; } (8)、each循环遍历 @each item in a,b,c,d{ //item表示每一项 } (9)、函数: @function

4.6K20

sass和less异同

; 3、嵌套规则——Class中嵌套class,从而减少重复代码; 4、运算——CSS中用上数学; 5、颜色功能——可以编辑颜色; 6、名字空间(namespace...3、编写变量方式不同 Sass使用$;而Less使用@。 4、在Less中,仅允许循环数值 在Sass中,我们可以遍历任何类型数据;但在Less中,我们只能使用递归函数循环数值。...5、Sass有Compass,Less有Preboot Sass和LESS有可用于集成mixins扩展(在整个站点中存储和共享CSS声明能力)。...Sass有适用于mixinsCompass,其中包括所有可用选项以及未来支持更新。...LESS软件支持比Sass更加分散,导致许多不同扩展选项可能不会相同方式运行。对于项目,我们可能需要所有列出扩展获得与Compass类似的性能。

1.1K20

CSS 预处理器中循环

For-Each 循环遍历集合或者列表,每次循环一项。 上述循环使用范围依次递减。for-each 循环是 for 循环一种形式, 它们也是 while 循环一种形式。...Stylus 也提供了一个 range() 函数,可以改变递增步数。使用 for hue in range(0, 360, 10) 可以每次 10 倍数递增。...其中一个例外是生成带编号选择器,可以是 nth-child (像我们上面做一样),也可以是自动生成名(通常用在栅格系统中)。我们将创建一个简单不带间距响应式栅格系统。...嵌套 @each $reverse in (true, false)可以让我们选择是否将每个颜色组合前景色和背景色反转。...我并不想遍历整个集合或者特定数量迭代——我想在找到需要元素时就停止循环。我通常在抽象工具包中使用,而在日常编写样式表时并不需要。 我使用 Sass 创建了一个帮助我储存及控制颜色工具包。

4.3K60

less和sass使用区别

变量引用:@ Sass中用是:$ 混合mixins 假如在一个中引用另一个时,是直接用套用 .名(); 对比Sass嵌套使用 Sass和less此处是一样。...Css好像是不能直接嵌套使用。 还可以伪选择器与混合(mixins)一同使用,用 & 表示当前选择器父级。...@ 规则(例如 @media 或 @supports)可以与选择器相同方式进行嵌套。@ 规则会被放在前面,同一规则集中其它元素相对顺序保持不变。这叫做冒泡(bubbling)。...对比SassSass是叫继承。 4. 运算 就是可以将less变量进行加减乘除。 5. 映射 作用域: 这个和js差不多,就是内部改变了外部命令,是继承内部命令。...导入less方式: Less和sass一样。 如果导入文件是 .less 扩展名,则可以将扩展名省略掉: @import “library”; // library.less

9910

Sass-学习笔记【基础篇】

选择器嵌套为样式表作者提供了一个通过局部选择器相互嵌套实现全局选择方法, Sass 嵌套分为三种: 选择器嵌套 属性嵌套嵌套 (1)选择器嵌套 示例: 假设我们有一段这样结构...其实伪嵌套和属性嵌套非常类似,只不过他需要借助`&`符号一起配合使用。...是为了日后选择器用 @for语句,用来遍历循环执行程序,让变量 i 在$list长度中循环。...写法上: $i from 1:表示i从1开始循环,【在Sass中,索引值index是从1开始,和js从0开始不一样】 through length($list):遍历范围或说次数,取决于$list...而选择器名字,结合nth函数和变量,在$list列表做了个循环都添加了一遍 #{}插值,把四次循环遍历出来列表结果分别插进来 nth($list,$i):是nth函数,传入两个参数,第一个是要取值列表变量名字

4.8K50

Sass速通(二):嵌套与作用域

Sass 提供了嵌套书写方式,用以简化选择器书写,同时也带来了“作用域”。...嵌套 选择器嵌套Sass 中,可以在父选择器中写子选择器,嵌套形式来表达关联关系,这样做可以减少我们重复书写父选择器工作量。...会递归遍历所有嵌套关系,从最内层选择器开始,逐层在前面加上父选择器。...、div:first-child 伪元素选择器,如 p::before、p::after 其中,伪和伪元素选择器需要与别的选择器复合使用,确定是哪些元素或伪元素。...以下几种情况,Sass 会将 @import 编译为原生 CSS 指令: 资源文件后缀为 .css 资源 URL 地址形式导入 资源 CSS url() 方法导入 @media @media

1.5K20

如何利用 SCSS 实现一键换肤

但是由 SASS3 开始引入 SCSS 语法完全兼容现有的 CSS 语法,能够在生成真正 CSS 文件之前预处理一些逻辑,比如变量,循环嵌套,混合,继承,导入等,使其在逻辑上能够拥有部分 JS 特性...使用 @each 循环 1.循环一个 list: 名为 icon-10px 、icon-12px、icon-14px 写他们字体大小写法就可以如下: 2、循环一个 map:名为 icon-primary...此函数包括两个参数: map:定义好 map。key:需要遍历 key。...假设要获取 facebook 键值对应值 #3b5998,我们就可以使用 map-get() 函数来实现: 使用&嵌套覆盖原有样式 当一个元素样式在另一个容器中有其他指定样式时,可以使用嵌套选择器让他们保持在同一个地方...利用 SCSS 强大函数功能遍历名统一添加以自定义属性名前缀命名空间,利用循环自动生成 CSS 样式。 了解一键换肤核心原理。

2.7K10

谈谈 CSS 预处理器

Sass[2] Sass 在完全兼容 CSS 语法前提下,给 CSS 提供了变量、嵌套、混合、操作符、自定义函数等可编程能力。...功能 Sass 常用有几种功能: 变量:变量中可以存储颜色、字体或任何 CSS 值。 嵌套:可嵌套 CSS 选择器,提供清晰层次结构。 混合:可以定义&重用代码块。...条件/循环语句:可以循环/条件生成 CSS。 自定义函数:可以自定义复杂操作函数。 优点 使用广泛。 功能支持完善。 可编程能力强。 缺点 CSS 复杂度不可控。...Stylus[4] Stylus 基础功能和 Sass / Less 十分似。...3.1 Tailwind[6] Tailwind CSS 是一个功能优先 CSS 框架,通过组合不同名实现页面设计。Tailwind 主要优势如下: 不用考虑 class 命名。

2.5K31

freeCodeCamp | Front End Development Libraries | 笔记

你还将学习如何向 CSS 样式添加逻辑并使用 Sass 扩展它们。 稍后,你将构建购物车和其他应用程序,学习如何使用 React 和 Redux 创建功能强大单页应用程序 (SPA)。...它添加了基本 CSS 中不可用功能,使你可以更轻松地简化和维护项目的样式表。 如何将数据存储在变量中、嵌套 CSS、使用 mixins 创建可重用样式、为样式添加逻辑和循环等等。...Sass 还提供了 @each 循环遍历列表 或 映射中每个项 指令。...这些被导入并在其他 Sass 文件中使用。 这是将类似代码分组到一个模块中保持其组织性好方法。...Sass 还提供了 @each 循环遍历列表 或 映射中每个项 指令。

52110

CSS预处理器之SCSS

例如 (1,) 表示只包含 1 数组,而 (1 2 3,) 表示包含 1 2 3 这个空格分隔数组数组。...# 6.映射(Maps) Maps 必须被圆括号包围,可以映射任何类型键值对(任何类型,包括内嵌 maps,不过不推荐这种内嵌方式) $map: ( $key1: value1, $key2:...@media Sass 中 @media 指令与 CSS 中用法一样,只是增加了一点额外功能:允许其在 CSS 规则中嵌套。...如果 @media 嵌套在 CSS 规则内,编译时,@media 将被编译到文件最外层,包含嵌套父选择器。...,创建一个新颜色 lighten(color,amount) 通过改变颜色亮度值,让颜色变亮,创建一个新颜色 darken(color,amount) 通过改变颜色亮度值,让颜色变暗,创建一个新颜色

3.8K10
领券