我们完全可以在写样式的时候，不使用嵌套的写法。 但是 @keyframe 就不一样了，这个动画应用于当前选择器，所以把动画样式写入这个选择器的结构里，方便修改与查看。...它可以使 @mixin 接受一整块样式，接受的样式从 @content 开始。...继承 sass 中，选择器继承可以让选择器继承另一个选择器的所有样式，并联合声明。使用选择器的继承，要使用关键词 @extend ，后面紧跟需要继承的选择器。...占位选择器 % 从 sass 3.2.0 以后就可以定义占位选择器 % 。...占位选择器的出现，使css文件更加简练可控，没有多余。所以可以用其定义一些基础的样式文件，然后根据需要调用产生相应的css。
它使用 “缩进” 代替 “花括号” 表示属性属于某个选择器，用 “换行” 代替 “分号” 分隔属性，以 .sass 作为拓展名。...;height:400px}.box-title{height:30px;line-height:30px} 文档阅读笔记 通过 #{} 插值语句可以在选择器或属性名中使用变量： $name: foo;...被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。...import "foo.css"; @import "foo" screen; @import "http://foo.com/bar"; @import url(foo); @extend 的作用是将重复使用的样式...; } // 应用于复杂的属性值 body { font:#{$baseFontSize}/#{$baseLineHeight}; }
官方解释，继承是一种规则，它允许样式不仅应用于特定的html标签元素，而且应用于其后代元素。...首先 Sass 和 Less 都使用的是标准的 CSS 语法，因此如果可以很方便的将已有的 CSS 代码转为预处理器代码，默认 Sass 使用 .sass 扩展名，而 Less 使用 .less 扩展名...、相邻选择器 权重计算规则 第一等：代表内联样式，如: style=””，权值为1000。...第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。 继承的样式没有权值。...比较规则 遵循如下法则： 选择器都有一个权值，权值越大越优先； 当权值相等时，后出现的样式表设置要优于先出现的样式表设置； 创作者的规则高于浏览者：即网页编写者设置的 CSS 样式的优先权高于浏览器所设置的样式
：class属性为success的标签 三 ID选择器： #content ：id属性为content的标签 id属性不仅给css用，也给js用 标签元素使用多类样式声明：属性中的各个选择器用空格分开...title属性，值要是a 内容值筛选： title这样的属性，可以跟着^这样的符号，代表值开头要是什么，类似正则表达式 ^：开头包含 $：结尾包含 *：含字符串 ~：含单词 |：字符串开头或者用...层叠样式，是不同的选择器效果附加到元素上。...预处理器 less sass 带你玩转 CSS 3 文本，打牢前端开发基础 一 字体 font-family：用逗号分隔多个字体类型 @font-face：定义字体，引入自带字体 二 字重与字号...全面掌握 CSS 3 背景与渐变应用技巧 背景颜色：background-color 背景图像：background-image：url（） 背景裁切：background-clip，content值为背景应用于内容区
Sass作用域有顺序。 图片 选择器嵌套、伪类嵌套、属性嵌套（Sass） 在Less和Sass中，可以对标签嵌套，在里面写各个层级写相应的样式，编译完成后，会自动写好对应的选择器。...样式可以单独显示，也可以在其他的杨使用混入，如果不想选择器编译出来可以在样式后面加一个()，就不会编译出来，可以在括号中进行传参。...---- 在Sass中混入，用@mixin方法定义要混入的样式，用@include将方法混入。就是编写代码块和使用代码块。...编译后会写成分组选择器，节省代码量，相比命名空间。 ---- Sass继承 用@extend直接调用样式，编译后也是和Less一样形成分组选择器。...Sacc导入scss或sass文件，Less导入less文件。 作用就是 将需要用的样式编写到一个文件中，其他需要本样式的直接引入，例如清除默认样式 图片
将局部变量转换为全局变量可以添加 !global 声明。...嵌套(Nesting) 6.1 嵌套规则 (Nested Rules) Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器。...，其后可以跟随后缀生成复合的选择器。...如果 @if 声明失败，Sass 将逐条执行 @else if 声明，如果全部失败，最后执行 @else 声明 8.2 for循环语句 @for 指令可以在限制的范围内重复输出格式。类似for循环。...继承(扩展) 11.1 基本继承 sass中，选择器继承可以让选择器继承另一个选择器的所有样式，并联合声明。使用选择器的继承，要使用关键词 @extend，后面紧跟需要继承的选择器。
嵌套规则 &标识符: 在需要避免sass默认解套后空格连接父子选择器导致样式不生效的的情况下使用&处理,如遇到伪类选择器:hover等。...导入SASS文件 css中的@import执行到后下载css文件,导致页面加载慢 sass中的@import在生成css的时候导入,无法额外下载 sass导入可以省略后缀 导入sass部分文件 通常在编写的...通过将文件命名为'_'开头即不会在编译时生成单独文件 如需导入的文件为: themes/_night-sky.scss,那么导入的时候可以写@import "themes/night-sky"; 默认变量值...多次定义相同变量会造成值的覆盖 可以通过使用!...选择器与属性等单独占用一行，缩进量与 Sass 文件中一致，每行的缩进量反映了其在嵌套规则内的层数。当阅读大型 CSS 文件时，这种样式可以很容易地分析文件的主要结构。
然后第二天测试就在群里截图大喊：啥鸡毛玩意儿，这是啥新型样式吗？...立马跑到线上去排查，在自己电脑上登录进去看样式也没啥问题呀，然后审查元素才看到字体图标的 content 里确实是乱码：自己在本地 build 打包看了下源码，dist/css/app.xxx.css，...sass 和 scss 其实是同一种东西，我们平时都称之为 sass，scss 是 sass 3 引入新的语法，说白了 scss 就是 sass 的升级版。...dart-sass 只支持两种输出格式outputStyle：expanded：输出跟我们平时开发中手写的css样式很像，选择器、属性等各占一行，属性根据选择器缩进，而选择器不做任何缩进compressed...：输出方式删除所有无意义的空格、空白行、以及注释，将文件体积压缩到最小，同时也会做出其他调整，比如会自动替换占用空间最小的颜色表达方式修改后重新编译部署发现源码和浏览器中加载的样式都没问题了：
将局部变量转换为全局变量可以添加 !global 声明。...嵌套(Nesting) 6.1 嵌套规则 (Nested Rules) Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器。...，其后可以跟随后缀生成复合的选择器。...如果 @if 声明失败，Sass 将逐条执行 @else if 声明，如果全部失败，最后执行 @else 声明 8.2 for循环语句 @for 指令可以在限制的范围内重复输出格式。...继承(扩展) 11.1 基本继承 sass中，选择器继承可以让选择器继承另一个选择器的所有样式，并联合声明。使用选择器的继承，要使用关键词 @extend，后面紧跟需要继承的选择器。
然后第二天测试就在群里截图大喊：啥鸡毛玩意儿，这是啥新型样式吗？...立马跑到线上去排查，在自己电脑上登录进去看样式也没啥问题呀，然后审查元素才看到字体图标的 content 里确实是乱码： 自己在本地 build 打包看了下源码，dist/css/app.xxx.css...sass 和 scss 其实是同一种东西，我们平时都称之为 sass，scss 是 sass 3 引入新的语法，说白了 scss 就是 sass 的升级版。...dart-sass 只支持两种输出格式outputStyle： expanded：输出跟我们平时开发中手写的css样式很像，选择器、属性等各占一行，属性根据选择器缩进，而选择器不做任何缩进 compressed...：输出方式删除所有无意义的空格、空白行、以及注释，将文件体积压缩到最小，同时也会做出其他调整，比如会自动替换占用空间最小的颜色表达方式 修改后重新编译部署发现源码和浏览器中加载的样式都没问题了： element-ui
.child2 { color: green; } .parent1 .child2:hover, .parent2 .child2:hover { color: blue; } 现在，你可以将子选择器嵌套在父选择器中...你需要使用 CSS 预处理器（如 Sass、Less 或 PostCSS）进行构建步骤，以便将嵌套代码转换为常规的全选择器语法。...image.png CSS原生嵌套规则 你可以将任何选择器嵌套到另一个选择器中，但必须以符号开头，如&，....的直接子元素进行样式调整 :is(p) - 但是:is()使用最优先选择器的优先级 :where(p) - 但是:where()的优先级为0 在这个简单的示例中，它们都可以工作，但在以后使用更复杂的样式表时...还需要CSS预处理器吗 在短期内，现有的CSS预处理器仍然必不可少。 Sass开发团队已经宣布，他们将支持.css文件中的原生CSS嵌套，并按原样输出代码。
2、Sass： 是一种动态样式语言，Sass语法属于缩排语法， 比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更容易阅读。...3、嵌套规则——Class中嵌套class，从而减少重复的代码； 4、运算——CSS中用上数学； 5、颜色功能——可以编辑颜色； 6、名字空间(namespace)——分组样式，从而可以被调用...需要修改的值，设为变量 (2)、混合(MiXins) ①无参混合 声明：.name{} 选择器中调用：.name; ②代参混合 无默认值声明：.name(@param){} 调用：.name(parValue...，可以无参；可带默认值，也可不带；但是，调用时，必须符合声明规范。...同less >>>优点；可以传参，不会生成同名class； >>>缺点：会将混合宏中的代码，copy到对应的选择器中，产生冗余代码！
（li a） （7）通配符选择器（ * ） （8）属性选择器（a[rel ="external"]） （9）伪类选择器（a:hover,li:nth-child） * 可继承的样式：font-size...可以通过css3里面的动画属性scale进行缩放。 22、移动端的布局用过媒体查询吗？...CSS3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围。...SASS (SASS、LESS没有本质区别，只因为团队前端都是用的SASS) 24、CSS优化、提高性能的方法有哪些？ 关键选择器（key selector）。...样式系统从关键选择器开始匹配，然后左移查找规则选择器的祖先元素。 只要选择器的子树一直在工作，样式系统就会持续左移，直到和规则匹配，或者是因为不匹配而放弃该规则。
@extend 继承另一选择器样式@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。@include 指令可以将混入（mixin）引入到文档中。...Mixin有点像C语言的宏（macro），是可以重用的代码块。使用@mixin命令，定义一个代码块。@mixin命令应用使用@mixin命令，可以指定参数和缺省值。...Sass的map使用一个括号，并用冒号将键值与值分隔开来，并且使用逗号将一对键值/值隔开。...map中的最后一对键值/值后面的逗号可以省略键值必须是唯一的键值/值可以是Sass的任何类型，包括列表和其他的Sass mapMaps的主要操作使用的是 SassScript 函数。...map-get函数用于查找map中的值，map-merge函数用于添加值到map中的值， @each 指令可以用来为 map 中的每个键值对添加样式。map中键值对的顺序和map创建时始终相同。
在本文中，我们将重点讨论为什么预处理程序很重要，并特别强调SASS及其将规则组合在一起的能力。使用Sass为设计现代web组件提供了一种更合理的方法。...父选择器(&) 如果我们想通过添加一个类来修改一个类，我们可以使用父选择器，它主要用于添加辅助样式改变元素样式的情况，这也会起到修饰符的作用，& 在 scss中表示自身的意思。...right-area{ background-color : #0000 } } 上述代码等同于 .container.right-area { background-color : #0000 } 我们还可以使用父选择器将角色限定在另一个类中...你可以通过在mixin中定义参数的时候给它设置一个默认值，从而来避免这种错误。...我希望我们将这些实践用于为我们的应用程序编写更轻松，更优化的样式。
哪些属性可以继承？...* 1.id选择器（ # myid） 2.类选择器（.myclassname） 3.标签选择器（div, h1, p） 4.相邻选择器（h1 + p） 5.子选择器（ul >...首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。 接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。...清除浮动的方式 移动端的布局用过媒体查询吗？ 使用 CSS 预处理器吗？喜欢那个？ SASS (SASS、LESS没有本质区别，只因为团队前端都是用的SASS) CSS优化、提高性能的方法有哪些？...浏览器是怎样解析CSS选择器的？ 在网页中的应该使用奇数还是偶数的字体？为什么呢？ margin和padding分别适合什么场景使用？ 抽离样式模块怎么写，说出思路，有无实践经验？
属性选择器 最常用的属性选择器如下： image.png 最常用的属性选择器是type，它可以用于选择表单控件，如复选框、单选按钮、文本输入等。 4....除此之外，使用自定义属性值的选择器， 60% 设置在根元素上（使用:root或html选择器），大约 5% 设置在元素上。其余的应用于根元素的某些后代而不是....不存在的属性 最常见的不存在的属性如下： image.png 十三、预处理器Sass Sass是最流行的CSS预处理器之一，最常用的 Sass 函数调用如下： image.png 可以发现， Sass...下面是 Sass 中最常用的流控制结构： image.png 下面是 Sass 中最常用的规则嵌套： image.png Sass 的一个主要优点就是能够将规则嵌套在其他规则中，从而避免编写重复的选择器模式...统计发现，87% 的 Sass 样式表使用了规则嵌套。
使用变量： 变量声明 $highlight-color: #f90; 如果一个变有多个值可以用逗号分隔。...&; &符号，可以放在任何一个选择器可以出现的地方。 ...你可以省略.sass或.scss文件后缀 举例来说，@import"sidebar";这条命令将把sidebar.scss 文件中所有样式添加到当前样式表中 当你@import一个局部文件时...，还可以不写文件的全名， 即省略文件名开头的下划线 举例来说，你想导入 themes/_night-sky.scss这个局部文件里的变量， 你只需在样式表中写@import "themes/...，当 @include 混合器时，参数其实就是可以给css 属性值的变量。
%foo 2.4.1 占位符选择器 %foo 有什么好处 继承样式 通过 @extend 关键字，它可以把占位符选择器变成样式的基础，避免了无穷无尽的重复编写相似的样式规则，就像是给代码穿上了可维护性的外套...避免与其他选择器冲突 占位符选择器的命名以 % 开头，与常规的 CSS 类选择器不同。这样可以避免与其他选择器冲突，减少样式命名的可能性。...检测到并编译成 CSS，可以将文件名改为以 下划线 开头的形式，例如 _public.scss。...通过 @extend，可以将一个选择器的样式规则继承到另一个选择器中，从而避免重复编写相似的样式 7.1 单继承 index.scss .alert { padding: 15px; margin-bottom...#{ … } 的基本使用 ✅ 可以用于 选择器 属性名 属性值 注释 $class-name: danger; $attr: color; $font-size: 12px; $line-height
很久以前，CSS就像一阵清新的气息，只需简单轻松地为页面添加样式。 它涉及设定规则，让浏览器自动处理。你可以改变边距、字体和大小，但这只是浅尝辄止，你懂的吗？...过去，更新CSS值是一项手动、耗时的工作，静态CSS的时代已经过去了。现在，我们的工具包中有了CSS变量，可以在整个样式表中存储和重用特定的值。这些变量确保一致性，并使更新变得轻而易举。...根据后代元素来设置样式的一种方法。基本上，你可以根据子元素来应用样式，这意味着它可以作为一种理想的父选择器。然而，你也可以在父元素内部对子元素进行样式设置。...将其应用于文本块将真正让你的设计师开心。...子网格 在Firefox和Safari中得到支持，并在Chrome的标志下使用 子网格是完善网格布局的一部分，可以将网格布局应用于网格项的子元素，从而实现更一致和可维护的布局。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
