选择器的嵌套 和普通的css代码相比，scss允许我们进行选择器的嵌套。这样有利于我们更好的组织代码。 选择器的嵌套可以使代码更加直观，同时也可以将继承关系表现的更加清晰。...& 符号代码父元素 在scss中，&符号代表父选择器。...&符号 &符号代表父选择器，我们也可以使用多个&符号。...&-small{ color:blue; } } 编译后 .link, .link-small{ color:blue; } &符号可以出现多次，所以我们不必每次都写父选择器的名字。...占位符选择器和@extend指令 占位符选择器可以让我创建能够继承的选择器。
在SCSS中，使用&符号来引用父选择器，在嵌套规则中使用父选择器。这样可以避免重复编写选择器，并且在生成的CSS中保持正确的层级关系。...background-color: red; } .icon { color: white; font-size: 16px; } } 在上面的示例中，.button选择器是父选择器....icon表示嵌套在.button元素内的.icon元素，不使用&引用父选择器。...，可以编写更具可读性和维护性的代码。...父选择器的引用可以嵌套在任何层级的规则中，并且可以与其他选择器和修饰符组合使用。
，所以我们学的时候，把文件后缀写为 “.scss” 由于我们的配置，当遇到兼容性代码，出口文件会自动配置，如下图 2.1 语法嵌套规则 2.1.1 选择器嵌套 避免了重复输入父选择器...，复杂的 CSS 结构更易于管理 2.1.2 父选择器 & 在嵌套 CSS 规则时，可以用 & 代表嵌套规则外层的父选择器。...2.6.2 使用多个@extend 2.6.3 @extend多层继承 2.7 @mixin（混入）和 @extend（继承）的区别 2.8 SCSS 运算符 的基本使用...=不等于 2.8.2 关系（比较）运行符 符号说明 （gt）大于= （gte）大于等于 2.8.3 逻辑 运行符 符号说明and逻辑与...@use 的使用 从其他 SCSS 样式表加载mixin，function和变量，并将来自多个样式表的CSS组合在一起，@use加载的样式表被称为“模块”，多次引入只包含一次。
而Scss 其实是 Sass 3 为了兼容 CSS 引入的新语法。...SCSS变量 SassScript 最普遍的用法就是变量，变量以美元符号”$”开头，赋值方法与 CSS 属性的写法一样： $width:10px; 使用变量： #main{ width:$width...icons/#{$name}.svg"); position: absolute; #{$top-or-bottom}: 0; #{$left-or-right}: 0; } 嵌套规则： 与CSS...不同，SCSS的语法呈现的是嵌套规则，即将外层的样式作为父选择器，子标签写在父标签里面来更直观地表现出样式结构。...父选择器 & 在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，例如，当给某个元素设定 hover 样式时，可以用 & 代表嵌套规则外层的父选择器，比如： 或者特殊一点的用法： 图片
嵌套可以提高代码的可维护性，特别是在处理复杂的选择器结构时。 混合和继承： SCSS的混合（mixins）和继承功能允许你创建可重用的样式块，并在多个地方进行引用。...SCSS允许我们将CSS规则嵌套在父选择器内部。这有助于提高样式的可读性和组织性，特别是对于复杂的结构。 例如，我们创建一个带有两个元素的简单HTML页面；一个父元素和一个子元素。...提供了一个选择器可以选中当前元素的父元素，使用&表示。...在SCSS中声明变量 在SCSS中，我们可以使用美元符号（$）来声明变量。...例如，_variables.scss 可能包含与颜色和字体相关的样式： 导入局部文件： 要将局部文件中的样式包含到主SCSS文件中，你可以使用 @import 指令，不需要包含下划线和扩展名。
过多的嵌套会增加代码的复杂性和选择器的特异性，降低代码的可读性和维护性。 使用父元素选择器：尽量使用父元素选择器 & 来限定样式的作用范围，避免使用全局选择器或依赖于特定的 HTML 结构。...提取共用的样式：当有多个选择器需要应用相同的样式时，可以将这些样式提取为一个共用的 class 或 mixin，然后在需要的地方引用。这样可以减少代码冗余，提高代码的可维护性。...利用 SCSS 的特性：SCSS 提供了许多方便的特性，如变量、函数、混合器等，可以帮助简化和优化代码。...例如，可以使用变量来存储复杂选择器的重复部分，使用函数来计算样式值，使用混合器来组合多个选择器等。...综上所述，通过限制嵌套层级、使用父元素选择器、提取共用样式、使用 BEM 命名规范和利用 SCSS 的特性，可以在 SCSS 中实现复杂的嵌套选择器并确保代码的可维护性。
image.png 2.SCSS 和 Sass 的区别。 ...使用变量： 变量声明 $highlight-color: #f90; 如果一个变有多个值可以用逗号分隔。... #content article p { margin-bottom: 1.4em } #content aside { background-color: #EEE } 父选择器的标识符...&; &符号，可以放在任何一个选择器可以出现的地方。 ...aside { a {color: blue} } /* 编译后 */ nav a, aside a {color: blue} 子组合选择器和同组合选择器
举个例子，如果我们有一个 Sass 文件 “style.scss” ，我们可以使用 Dart-Sass 编译成 CSS 文件“style.css”的命令，就像这样： sass style.scss style.css...在 Sass 中，变量使用 $ 符号声明，而在 Less 中，变量使用 @ 符号声明。...Less 在嵌套规则中使用父元素选择器的方式有这样一些区别： Sass使用&符号来表示父元素选择器，例如： .parent { color: blue; &:hover { ...Less使用&符号也可以用来表示父元素选择器，也但是可以使用@符号来表示父元素选择器的变量，例如： .parent { color: blue; &:hover { ...需要注意的是，在 Less 中，如果要在选择器中使用变量，需要使用@{}语法将变量包裹起来。 最后， Sass 和 Less 在使用Mixin时也有一些差别。
: CSS 使用基本的规则集，其中选择器、属性和值之间使用分号和大括号来定义。...「变量:」 CSS: CSS 没有原生的变量支持，因此颜色、字体、间距等值通常需要在多个地方多次重复定义，难以统一和更改。...SCSS: SCSS 允许你使用嵌套规则，将子元素的样式嵌套在父元素内，使样式表的结构更加清晰。 「维护性:」 CSS: 随着项目的增长，纯 CSS 可能会变得难以维护，因为它缺乏模块化和结构性。...编程性和灵活性： 与 Sass 类似，SCSS 具有编程性的特性，如变量、嵌套、混合（mixins）和条件语句，允许你编写更加灵活和可维护的样式代码。...手动编写样式： 使用 SCSS 需要手动编写 CSS 规则，即你需要明确地编写每个元素的样式规则和选择器。 独立性： SCSS 是一种独立的 CSS 预处理器，可以与任何前端框架或库一起使用。
css 中“>”是 css3 中特有的选择器，A > B 表示选择 A 元素的所有子B元素，与A B不同的是，A B 选择所有后代元素，为A > B只选择一代。...父选择器(&) 如果我们想通过添加一个类来修改一个类，我们可以使用父选择器，它主要用于添加辅助样式改变元素样式的情况，这也会起到修饰符的作用，& 在 scss中表示自身的意思。...background-color : #0000 } } 上述代码等同于 .container.right-area { background-color : #0000 } 我们还可以使用父选择器将角色限定在另一个类中...，就像这样 在代码示例中，由于父选择器的原因，color:#fff只适用于.theme-dark类。...请注意，SCSS中的@import用于将部分内容获取到其他SCSS文件中，但它们不会成为 CSS 文件，名称前用_表示。 使用 scss 变量 SCSS中的变量以美元符号$开头。
CSS预处理语言有Scss(Sass) 和Less、Postcss。...Scss和Sass sass一开始用的是一种缩进式的语法格式 采用这种格式文件的后缀名是.sass 在sass3.0版本后我们常用的是sassy css语法，扩展名是.scss，更接近与css语法 区别...： 后缀名不同 .sass和.scss 语法不同，请看下面 12 新版： /新版本 多行文本注释/ //新版本 //单行文本注释 @import “base”; @mixin alert{ color...height:100px; ul{ margin:0; li { float:left; list-style:none; padding:5px; } } } 大家会发现，写出来的代码父和子之间都有空格隔开...hover之间有了空格，这样是不好的，所以我们需要在写的时候在：hover之前把a加上，这样就需要用到在之类里引用父类选择器的方式，我们可以用&符号代替父类 例如： .nav{ height:100px
$代表jQuery对象，同时也是一个函数对象 $()和jQuery()是jQuery的核心函数，执行这两个元素返回的是一个DOM元素 $()是一个函数，等同于jQuery()，可在括号内传参数，传参后可获取元素...的元素，返回一个jQuery对象 $(”.one”).onclick表示class=”one”的点击事件 $.post() $.get() $.ajax() 都是jQuery对象的方法 jQuery中，多个选择器是依次执行的...，不是同时执行的 ，是在上一个选择器执行完的基础上，才开始执行下一个。...例如：$(“li:gt(0):lt(2)”) // 选择第二个和第三个li,gt(0)表示下标大于0的，lt(2)表示下标小于2的。...下标大于0为黑色区域，此时，下标为1的蓝色区域下标变为0，下标为3的粉色区域下标变为1，执行过滤选择下标为2后，即为红色框内，也就是最初的下标为1和2的元素，即第二个和第三个li元素(假设所有的颜色框均为
Sass的两种文件后缀 sass有两种后缀名文件：一种后缀名为sass，语法要求不使用大括号和分号；另一种就是我们这里使用的scss文件，这种和我们平时写的CSS文件格式差不多，使用大括号和分号。...嵌套(Nesting) 6.1 嵌套规则 (Nested Rules) Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器。...color: #00ff00; width: 97%; } #main p .redbox { background-color: #ff0000; color: #000000; } 6.2 父选择器...& (Referencing Parent Selectors: &) 在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，可以用 & 代表嵌套规则外层的父选择器。...导入文件 Sass的导入( @import)Sass文件规则和CSS的有所不同，编译时会将 @import的scss文件合并进来只生成一个CSS文件。
CSS预处理语言有Scss(Sass) 和Less、Postcss。...Scss和Sass sass一开始用的是一种缩进式的语法格式 采用这种格式文件的后缀名是.sass 在sass3.0版本后我们常用的是sassy css语法，扩展名是.scss，更接近与css语法 区别...： 后缀名不同 .sass和.scss 语法不同，请看下面 新版： /新版本 多行文本注释/ //新版本 //单行文本注释 @import “base”; @mixin alert{ color:red....nav{ height:100px; ul{ margin:0; li { float:left; list-style:none; padding:5px; } } } 大家会发现，写出来的代码父和子之间都有空格隔开...hover之间有了空格，这样是不好的，所以我们需要在写的时候在：hover之前把a加上，这样就需要用到在之类里引用父类选择器的方式，我们可以用&符号代替父类 例如： .nav{ height:100px
1) css 选择器中避免使用标签名 2) 使用直接子选择器 1.3.3 尽量使用缩写属性 1.3.4 每个选择器及属性独占一行 1.3.5 省略 0 后面的单位 1.3.6 避免使用 ID 选择器及全局标签选择器防止污染全局样式...按以下顺序组织 1.4.2 避免嵌套层级过多 (五) Javascript 规范 1.5.1 命名 1) 采用小写驼峰命名 lowerCamelCase，代码中的命名均不能以下划线， 也不能以下划线或美元符号结束...组件规范 1) 组件名为多个单词。 2) 组件文件名为 pascal-case 格式 3) 基础组件文件名为 base 开头，使用完整单词而不是缩写。...4) 和父组件紧密耦合的子组件应该以父组件名作为前缀命名 5) 在 Template 模版中使用组件，应使用 PascalCase 模式，并且使用自闭合组件。...说明：正确的 英文拼写和语法可以让阅读者易于理解，避免歧义。
二、SCSS 安装与环境配置1. 安装 Node.js 和 npm在使用 SCSS 之前，需要先安装 Node.js 和 npm（Node Package Manager）。...变量SCSS 允许使用变量来存储值，如颜色、字体大小、边距等。变量使用 $ 符号定义。...嵌套规则SCSS 允许在选择器内部嵌套其他选择器，这样可以更清晰地表示层级关系，减少代码冗余。...部件化与模块化将样式拆分为多个独立的文件，使得代码更加模块化和可维护。可以使用 @import 语句引入其他 SCSS 文件。...条件与循环SCSS 支持条件语句和循环，可以用来编写更加动态和灵活的样式。
： :is(.section, .aside, .nav) h2 { color: steelblue; } 但是 :is() 不仅对父选择器和子选择器有用，它也可以选择多个相邻的选择器，比如: button...color: steelblue; } button.active, button.pressed { color: lightsteelblue; } :where() :where() 是一个与...:has() 允许选择包含匹配选择器(或选择器集)的子元素的父元素。...现在你可能会说“SCSS可以做到这一点!...所以我们可能很快就会看到一个非常像 scss 的嵌套语法。
选择器嵌套 所谓选择器嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而增强了 sass 文件的结构性和可读性。...在选择器嵌套中，可以使用 & 表示父元素选择器 #top_nav { line-height: 30px; text-transform: capitalize; background-color...; @at-root (without:media) { .child2 { width: 200px; } } } } //跳出media和父级...但是 @keyframe 就不一样了，这个动画应用于当前选择器，所以把动画样式写入这个选择器的结构里，方便修改与查看。...混合(mixin) sass 中使用 @mixin 声明混合，可以传递参数，参数名以 $ 符号开始，多个参数以逗号分开，也可以给参数设置默认值，声明的 @mixin 通过 @include 来调用。
.section, .aside, .nav) h2 { color: steelblue;}但是 :is() 不仅对父选择器和子选择器有用，它也可以选择多个相邻的选择器，比如:button:is(:...active { color: steelblue;}button.active, button.pressed { color: lightsteelblue;}:where():where() 是一个与...:has() 允许选择包含匹配选择器(或选择器集)的子元素的父元素。...但是，CSS 似乎现在已经都能获取到我们曾经需要SCSS(或其他预处理器)才能获得的特性。...所以我们可能很快就会看到一个非常像 scss 的嵌套语法。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
