使用变量; sass让人们受益的一个重要特性就是它为css引入了变量。你可以把反复使用的css属性值 定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。...为了解决这种以及其他情况，sass提供了一个特殊结 构&。 2.1 父选择器的标识符&; 最常见的一种情况是当你为链接之类的元素写：hover这种伪类时，你并不希望以后代选择器的方式连接。...@at-root Sass的@at-root指令可以让你在样式表中跳出父级选择器，直接回到根选择器的层级。这对于重构或者修改已有规则时非常方便。...需要注意的是，在使用@at-root指令时，如果在括号内放置了其他内容（如变量、函数等），那么这些内容可能会引起选择器的语法错误。...，不会直接定义属性，也不可以使用父选择器。
Sass的原理 Sass本质就是在CSS的语法的基础上增加了自定义的变量、循环、分支、函数、mixin、继承、运算等功能，让CSS编程变得异常强大。 当然浏览器是不认识Sass语法。...嵌套(Nesting) 6.1 嵌套规则 (Nested Rules) Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器。...& (Referencing Parent Selectors: &) 在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，可以用 & 代表嵌套规则外层的父选择器。...@at-root用来跳出当前选择器嵌套。...Sass语句 Sass提供了常用的循环、判断分支语句的相关指令，可以让我们按照编程语言一样编写Sass代码。
选择器嵌套 所谓选择器嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而增强了 sass 文件的结构性和可读性。...在选择器嵌套中，可以使用 & 表示父元素选择器 #top_nav { line-height: 30px; text-transform: capitalize; background-color...@at-root sass3.3.0 中新增的功能，用来跳出选择器嵌套的。默认所有的嵌套，继承所有上级选择器，但有了这个就可以跳出所有上级选择器。...跳出media嵌套，父级有效 @media print { .parent2 { color: #f00; @at-root (without:media) { .child2...继承 sass 中，选择器继承可以让选择器继承另一个选择器的所有样式，并联合声明。使用选择器的继承，要使用关键词 @extend ，后面紧跟需要继承的选择器。
sass 随着css工程化的普及，sass在前端工程中越来越举足轻重。当然sass并不局限于管理css全局变量、mixin之类的"脏活累活"。...定义 Sass 额外提供了一种特殊类型的选择器：占位符选择器 (placeholder selector)。...@at-root 常规用法 @at-root指令可以使一个或多个规则被限定输出在文档的根层级上，而不是被嵌套在其父选择器下。 比如 .parent { ......默认使用@at-root不传递任何时，他的作用为跳出选择器的作用域嵌套，当然可以传递参数去使用。...，但是没有跳出父级选择器 @at-root(without: support) @at-root(without: support) 和 @at-root(without: media) 相似，只是跳出的是
选择器的嵌套 和普通的css代码相比，scss允许我们进行选择器的嵌套。这样有利于我们更好的组织代码。 选择器的嵌套可以使代码更加直观，同时也可以将继承关系表现的更加清晰。...& 符号代码父元素 在scss中，&符号代表父选择器。...&-small{ color:blue; } } 编译后 .link, .link-small{ color:blue; } &符号可以出现多次，所以我们不必每次都写父选择器的名字。...@at-root 指令 @at-root用来将嵌套在父元素内部的选择器移到外部。...因为sass-lint检查到嵌套层数超过3层就会提示报错。 多层级的嵌套一方面在渲染时可能会消耗一定的性能，即影响sass的编译速度，也影响界面的渲染速度。
” 由于我们的配置，当遇到兼容性代码，出口文件会自动配置，如下图 2.1 语法嵌套规则 2.1.1 选择器嵌套 避免了重复输入父选择器，复杂的 CSS 结构更易于管理 2.1.2...父选择器 & 在嵌套 CSS 规则时，可以用 & 代表嵌套规则外层的父选择器。...通过 #{} 插值语句可以在选择器、属性名、注释中使用变量： 2.10 SCSS 常见函数的基本使用 常见函数简介，更多函数列表可看：Sass: Built-In Modules...这样实现比 @for 更复杂的循环。...2.16.4.2 @at-root (with: …) @at-root (with: ...) 表示只有指定的选择器会被包含在生成的 CSS 规则中。
@import指令 SCSS的@import是css的加强版本,共有以下几种方式可以互相导入引用; 注意点 - 可以使用相对路径 - 导入的文件可以.scss后缀名 - 可以引入线上的...1920px) { width: 600px; } } @extend指令 Sass 中的 @extend 是用来扩展选择器或占位符。...指令 @at-root 从字面上解释就是跳出根元素。...当你选择器嵌套多层之后，想让某个选择器跳出，此时就可以使用 @at-root。...在 Sass 中是用来调试的，当你的在 Sass 的源码中使用了 @debug 指令之后 在命令终端会输出你设置的提示 Bug: @debug 10em + 12em; 会输出：
这章我们讲“嵌套”，嵌套包括两种：一，选择器嵌套。二是属性的嵌套。一般用选择器嵌套居多 一，选择器嵌套：指的是在一个选择器中嵌套另一个选择器来实现继承。...使用&表示父元素选择器 li{ float :left; a{ color:#fff; &:hover{ color:#ddd;...} } } 跟css用法一样，没什么说的。...三，@at-root是sass3.3.0版本的新增功能，用来跳出选择嵌套的 //没有跳出 .parent-1 { color:#f00; .child { width:100px;...} } //单个选择器跳出 .parent-2 { color:#f00; @at-root .child { width:200px; } } //多个选择器跳出 .parent
@import Sass 支持所有css 的@规则，以及一些Sass 专属的规则，也被称为“指令（directive）”.这些规则在Sass 中具有不同的 功效，详细解释如下...然后这样引用： #main { @import "example"; } 编译出来的 CSS： ... @at-root 从字面上解释就是跳出跟元素。...当你选择器嵌套多层之 后，想让某个选择器跳出，此时就可以使用 @at-root。...，当你的在 Sass 的源码中使用了 @debug 指令之后，Sass 代码在编译出错时，在命令终端会输出你设置的提示 Bug: @debug 10em +12em;
.& in SassScript &为父选择器 a { color: yellow; &:hover { color: green; } &:active { color...如果 @media 嵌套在 CSS 规则内，编译时，@media 将被编译到文件的最外层，包含嵌套的父选择器。...延伸复杂的选择器：Class 选择器并不是唯一可以被延伸 (extend) 的，Sass 允许延伸任何定义给单个元素的选择器，比如 .special.cool，a:hover 或者 a.user[href...它可以与单个内联选择器一起使用 且@at-root 使多个规则跳出嵌套 @at-root 默认情况下并不能使规则或者选择器跳出指令，通过使用 without 和 with 可以解决该问题 了解即可 #...以继承的方式共享选择器 4 @at-root 转到根节点 5 @debug 用于调试，按标准错误输出流输出 6 @warn 用于警告，按标准错误输出流输出 7 @error 用于报错，按标准错误输出流输出
Sass 支持所有CSS3的 @规则，以及一些已知的其他特定的Sass "指令"。这些在 Sass 都有对应的效果，更多资料请查看 控制指令 (control directives) 。...今天重点讲mixins/include/extend@at-root限定输出在文档的根层级上，而不是被嵌套在其父选择器下。...@extend 继承另一选择器样式@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。@include 指令可以将混入（mixin）引入到文档中。...（例如.error）的地方插入扩展选择器（例如.seriousError）混合(mixins)混入(mixin)通过 @mixin 指令定义。...(3.4.21) 中文文档 https://www.html.cn/doc/sass/#mixins转载本站文章《SASS详解@mixins/@include/@extend/@at-root》,请注明出处
blue; } .container .right { background-color: green; } /*# sourceMappingURL=index.css.map */ 2.2 父选择器...避免生成多余的 CSS代码 使用占位符选择器，它不会变成实际的 CSS 选择器，只有在被 @extend 引用的时候才会真正起作用。...这样一来，就减少了生成的 CSS 文件的大小，让页面加载性能变得轻盈如鸟。不需要多余的CSS 代码。 避免与其他选择器冲突 占位符选择器的命名以 % 开头，与常规的 CSS 类选择器不同。...代码注释 ✅ 多行注释 /* 多行注释 */ 单行注释 // 单行注释 ④ Sass 变量 ✅ 4.1 css 中变量的定义与使用 /* `:root` 伪类选择器用于选择文档根元素，对于 HTML...字符串（有引用与无引用字符串）：“foo”、‘bar’、car 颜色：blue、#000、rgba(0, 0, 0, .5) 布尔值 空值：null list：用空格或逗号作分隔符，1.5em 1em
一、SASS环境安装配置 SASS是ruby写的，所以要想将sass编译成css文件，就给配上ruby环境。 windows下载装个 rubyinstaller 就行了，注意要保证 配置好环境变量。...sass可以进行选择器的嵌套，表示层级关系，看起来很优雅整齐。...如果要使用父类，就用&符，如常见的 a:hover $width: 500px; div{ width: $width; .answer a{ &:hover{text-decoration...@at-root 不过应该很少用到，如果要跳出媒体的嵌套例如 @media .block-1{}的，type就选media|all 语法为 @at-root (without: type) type...} .block-1 .flw { color: red; } .today { font-size: 14px; } .tomo { font-size: 12px; } 4]条件判断和循环等
BEM代表“块（block），元素（element），修饰符（modifier）”，开发组件的过程中经常使用这三个实体，而在选择器中，这三个实体由以下符号来表示扩展关系： - 中划线：仅作为连字符使用...我在element组件库中的mixins.scss文件中找到了想要的答案。 接下来我要讲的就是如何利用sass，编写具有可读性和可维护性的BEM规则的css代码。...首先来看sass代码中对于block的定义: $namespace: 'el'; $element-separator: '__'; $modifier-separator: '--'; $state-prefix...{ #{$currentSelector} { @content; } } } } 元素选择器的实现中，我们应该把关注点放在if和eles分支上，为什么会出现...利用刚刚介绍的函数，以及块、元素、修饰符的实现代码，在sass中已经能非常高效率并且优雅的基于BEM规范的代码了。
/downloads 安装sass：gem install sass 或者安装compass(含sass)： gem install compass 取版本：sass -v 更新：gem update...sass 卸载：gem uninstall sass 编译 命令： // 冒号前面是scss路径，后面需要生成的css路径 sass ---wath style\scss\:style\css\--style...、函数、混合宏...的内部定义的变量为全局变量)) 嵌套 选择器嵌套’&‘ nav { ul { header & { color: blue; } } li {...:hover span .header a.btn:hover %child { } span { @extend %child; } //.header a.btn:hover span @at-root...//— 跳出所有嵌套 .a { height: 20px; @at-root .d { height: 30px;
2.For循环 在 Sass 的 @for 循环中有两种方式： @for $i from through @for $i from to $i 表示变量...遍历出与$var 对应的样式块。 简单示例:用来批量制作icon图标引用或者背景图引用等。...这也是sass中的@media和css中的区别： sass中的@media query可以内嵌在css规则（代码、选择器）中， 不过在编译输出最后的css文件后， 他会被提出来，从选择器的嵌套中提到样式的最高层级...2.继承并使用单一选择器%（占位符） %选择器——仅用来继承的选择器，若不用，他不会被编译出现在css文件中 4.@at-root @at-root 从字面上解释就是跳出根元素。...当你选择器嵌套多层之后，想让某个选择器跳出，此时就可以使用 @at-root。来看一个简单的示例：(自我感觉多余这一步，要跳出直接重新开一个选择器不得了。。)
2.For循环 在 Sass 的 @for 循环中有两种方式： @for $i from through @for $i from to $i 表示变量...@each循环 @each循环就是去遍历一个表格，然后从表格中取出对应的值。...遍历出与$var 对应的样式块。 简单示例:用来批量制作icon图标引用或者背景图引用等。...@at-root @at-root 从字面上解释就是跳出根元素。 当你选择器嵌套多层之后，想让某个选择器跳出，此时就可以使用 @at-root。...来看一个简单的示例：(自我感觉多余这一步，要跳出直接重新开一个选择器不得了。。) @at-root的SCSS @at-root的css 5.
（Less）、继承 合并、媒体查询 条件判断、循环 引入 一、了解Sass和Less Sass 对自己的定位首先是一个预处理器。...Sass作用域有顺序。 图片 选择器嵌套、伪类嵌套、属性嵌套（Sass） 在Less和Sass中，可以对标签嵌套，在里面写各个层级写相应的样式，编译完成后，会自动写好对应的选择器。...减少复杂的编译选择器代码。 伪类嵌套，需要在伪类的冒号前面加&，不然会有空格。 属性嵌套只有在Sass中有，Less没有。...} a{ background: azure; // & 父类元素选择器，添加伪类选择器 &：hover{...---- Less和Sass媒体查询 条件判断、循环 Less条件判断和循环 图片 ---- Sass循环 只有在Sass中有if-else，和for循环 图片 图片 图片
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
