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

我是否需要在这段SCSS代码中使用"&“?不管有没有它,我都会得到相同的输出

在这段SCSS代码中使用"&"是可选的,它的作用是引用父选择器。当你在嵌套的选择器中使用"&"时,它会被替换为父选择器的名称。

如果你不使用"&",你仍然可以得到相同的输出,只是在某些情况下可能需要编写更多的代码。使用"&"可以使代码更简洁和易读。

以下是一个示例:

代码语言:txt
复制
.parent {
  color: blue;

  &.child {
    font-weight: bold;
  }
}

使用"&"的输出:

代码语言:txt
复制
.parent {
  color: blue;
}

.parent.child {
  font-weight: bold;
}

不使用"&"的输出:

代码语言:txt
复制
.parent {
  color: blue;
}

.parent .child {
  font-weight: bold;
}

在这个例子中,使用"&"可以直接引用父选择器,使代码更简洁。如果不使用"&",你需要编写更多的代码来指定父选择器。

对于这段代码,腾讯云没有特定的产品或链接与之相关。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【Sass学习笔记】003-Sass的语法格式及编译调试

”编译出“bootstrap.css”文件,并且将编译出来的文件放在“css”文件夹中,我就可以在我的命令终端中执行: sass --watch sass/bootstrap.scss:css/bootstrap.css...-1652968509991)(54f54bcb00016b1005680288.jpg)] 2.3 GUI 界面工具编译 或许你会说,我一直讨厌使用命令来做事情,我喜欢那种能看得到的界面操作。...所以在创建 Sass 文件时,就需要将文件编码设置为“utf-8”。 另外一个错误就是路径中的中文字符引起的。建议在项目中文件命名或者文件目录命名不要使用中文字符。...一段时间之后,你实际上就不再需要写 CSS 代码了,只用写 Sass 代码。在这种情况下,你只需要设定输出格式为压缩格式,知道输出的 CSS 代码可以直接使用即可。...(我测试使用的版本是 3.4.7),不需要添加这个参数也可以: sass --watch style.scss:style.css 在命令终端,你将看到一个信息: >>> Change detected

4700

CSS预编译技术之SASS学习经验小结

@extend 清除浮动代码 清除浮动代码是在前段工作中需要大量使用的代码.其混入代码的编写如下: /* 清理浮动代码 */ .cf { zoom:1; &.cf:before, &.cf...如果是%cf 这种方式,那么,如果文档中没有哪里调用了它,那么它是不会输出的.也就是说,那样更合理....但是,像清理浮动这种重要的代码,用的地方特别多.而且可能在html里面也会直接的去写一个class来调用它,那么,使用.cf 就更加合适了,因为,这样的话,在输出的css中,是有.cf这个样式存在的....我这段文字的意义就是告诉你: %cf不仅仅有%cf这一种写法,还可以写成 .cf 具体用哪个,就看你在项目中的实际需求了! @mixin 混入代码如何使用 calc() 计算属性?...因此,我们需要将代码写在多个文件里,最后在整合在一起输出为一个CSS文件,怎么做呢?

47220
  • 如何优雅的设计 React 组件

    如果大家开发过 jQuery 插件的话,想必都会知道,一个插件要足够灵活,需要有细颗粒度的参数化设计。... 从上面 webpack 的配置和输出的 HTML 中可以看到,className 的命名空间问题可以通过语义化 *.scss...但你有没有发现,这样实现的 Title 组件并没有起到简化和封装的作用,反而增加了使用的复杂度,对于 HTML 来讲,h1 本身也是一个组件,所以我们拆分组件也是需要掌握一个度的。...另外,从 Input 组件的示例代码中看到,我们使用了非受控组件,这里是为了降低示例代码的复杂度而特意为之,大家可以根据自己的实际情况来决定是否需要设计成受控组件。...拆分子组件 然后继续接着看 TodoList 的 items 部分,我们注意到这部分包含了较多的渲染逻辑在 render 中,导致我们需要浪费对这段代码与上下文之间会有过多的思考,所以,我们何不把它抽离出去

    4K00

    如何优雅的设计 React 组件

    如果大家开发过 jQuery 插件的话,想必都会知道,一个插件要足够灵活,需要有细颗粒度的参数化设计。... 从上面 webpack 的配置和输出的 HTML 中可以看到,className 的命名空间问题可以通过语义化 *.scss...但你有没有发现,这样实现的 Title 组件并没有起到简化和封装的作用,反而增加了使用的复杂度,对于 HTML 来讲,h1 本身也是一个组件,所以我们拆分组件也是需要掌握一个度的。...另外,从 Input 组件的示例代码中看到,我们使用了非受控组件,这里是为了降低示例代码的复杂度而特意为之,大家可以根据自己的实际情况来决定是否需要设计成受控组件。...拆分子组件 然后继续接着看 TodoList 的 items 部分,我们注意到这部分包含了较多的渲染逻辑在 render 中,导致我们需要浪费对这段代码与上下文之间会有过多的思考,所以,我们何不把它抽离出去

    5.3K100

    怎样避免开发时的深坑

    如果你把伪代码写在了纸上,那么就把它作为注释输入到自己的代码编辑器中,之后再替换为代码中的每一行。 然后我调用这个函数,并给它一些我们之前使用过的样本数据集。...这将会帮助我检查变量值和代码是否符合预期。通过这种方法,可以很容易的发现代码中的问题。下面的例子是我在运行时会检查哪东西。在我所有的代码中都会这样做。...当我遇到bug时,会逐行跟踪代码,来检查是否存在不符合预期地方。以下是我使用的一些技巧: 实用控制台可以查看错误信息,有时候它会告诉我需要检查哪一行,这就给了我一个大概的思路:从哪里开始。...不要这样去注释: // 这是一个数组,并且遍历它 // 这是一个变量 我试着做一些简要、高级的注释,在出问题的时候可以帮我搞明白这段代码到底是起到什么作用。尤其是在处理更复杂的问题时非常有用。...通过使用清晰的变量名、函数名和注释,你(和其他人)应该能够理解: 这段代码是做什么用的? 它是怎样工作的? 9.通过代码评审获得反馈 ? 从你的团队成员、教授和其他开发者那里得到反馈。

    63920

    萌新咆哮!C++里引用和指针到底有什么区别?

    作者 | 梁唐 大家好,我是梁唐。 我们在写代码的时候总是离不开函数,我们调用一个函数,得到一个想要的结果。这个过程好像自然而然,但有的时候又会遇到一些意想不到的问题让我们困扰。...尤其是涉及到函数参数的时候,我们经常会搞不清楚,我们在一个函数内部修改它传入的参数,究竟有没有作用?怎么有的时候有作用,有的时候又没有?这背后究竟是程序员的幻觉还是编译器的bug?...那么请问,函数调用之前的a有没有发生变化? 我估计这个问题大家都能答得上来,答案是不会变化,外界的a还是3,不会变成5。 原因很简单,因为a虽然传入了函数里,但是传进去的是一个值拷贝。...,在这段代码里,我们传递的不再是指针了,而是在参数的类型int后面加上了一个奇怪的符号&。...这个符号我们在刚才创建b指针的时候也用到过,它代表取地址符。使用在参数传递当中表示传递的是一个引用。 如果大家运行这段代码会发现,得到的结果依然是5。

    27320

    第九十二期:css 的source map , sass 的调试 和sass指令

    在代码编译的时候我们需要检查代码中的错误,并且在不同的设备上做测试。 css source maps 大多数sass项目把不同来源的文件合并到一个css文件中去。并且这个css文件通常会被压缩。...* 这段注释会编译到css代码中,除非用了compressed 的输出格式。 */ 我们执行: scss comments.scss 输出comments.css文件。...* 这段注释不会编译到css代码中,除非用了compressed 的输出格式 */ /*# sourceMappingURL=comments.css.map */ 执行compressed格式...--这里是特殊注释---*/ 特殊注释会一直存在于css文件中。 样式风格 & 指令 在测试驱动开发中,测试用例通常用来验证代码的功能模块儿。所以我们需要编写能够通过测试的代码。...但是测试驱动在css中怎么使用呢?样式风格是我们的选择之一。我们在scss文件中修改样式,使所有的用户界面符合我们的要求。

    62610

    Gulp安装流程、使用方法及cmd常用命令导览

    命令 2、使用:先定位目标文件夹的父级目录,然后命令行输入rimraf ***(***为需要删除的文件夹名称) ?...然后我就命令行输入 cd C:\Users\lenovo\Documents\GitHub\exe 回车 就定位到那个目录下了 现在命令行执行的次数好多,代码好乱,我的命令行现在已经好几页了咋办?...然后package.json文件里也有了“devDependencies”依赖项   8.配置gulpfile.js(9,8可以反过来,可以js文件中需要什么插件再装什么插件) 在本地项目根目录下新一个...10.Gulp实践---使用gulpfile.js并调用gulp插件 gulpfile.js 一个gulpfile.js配置文件类似下边这段代码,他的大体结构都是差不多的,只是你用到的任务不同的时候,他就是不同的任务代码...//他只构建一个执行的框架,而不管你要执行的内容,只管排队和到达,不管交通方式和运输的人员身份。

    2.4K60

    程序员该怎么做,才能成为 coding 王者?

    不管是有意还是无意,在做编程题目的时你会下意识地遵循一些步骤,在阅读完这篇文章后大家就可以将这些步骤和这篇文章联系起来,从而就可以更高效地解题。 因此在这篇文章中,我们将讨论解编程题的五个步骤。...做编程题时的五个步骤 几天前在做一道编程题时,我发现我在解题时都会遵循一个固定的模式。我又做了几道题,并写下了解题前后我脑海中的步骤。...这里我建议: 选择非常简单的输入并找出输出 选择更复杂、更大的输入,看看输出是什么,需要多少种用例 然后开始处理边界条件: 不提供任何输入,输出应该是什么 提供非法输入,输出应该是什么 ?...只需要记住这三点,就一定能找到解法: 你的起点 你的位置 你的目标 ? 而且,如果你是在面试中,不要浪费时间去解决整个题目再告诉面试官,应该不断简化问题,不断告诉面试官你解决问题的方法。...下面是在写完代码之后应该问自己的问题: 这段代码是否能处理任何输入(包括边界情况)? 有没有其他方法解决问题? 代码是否有效?能否更有效? 代码是否可读? 如果别人给你这段代码,你能否理解?

    39620

    详解瀑布流布局的5种实现及oject-fit属性,附源码

    最近项目中需要处理与图片相关的布局,不得不说图片这玩意真想要得到完美的展示效果还真是要费些力气。因为图片的尺寸或者比例各不相同。所以想要不同尺寸的图片有好的显示效果,你就需要找到适合的方式。...比如我们每天都会使用的表情包,它往往能够表达出我们无法用文字描述的信息,还比如我们经常在公众号里看到的漫画虽然短短几个字,但是却能够让我们看的不亦乐乎。...对于超出容器的图片我们可以使用 overflow: hidden把超出部分隐藏。图片得到了好的展示效果。但相应的我们也损失了图片的一部分可视区域。...object-fit CSS3 的 object-fit 属性是用来指定「可替换元素」的内容是如何适应到容器中的。它的值有 5 种。...到这里不知道有没有小伙伴和我一样,在看到图片的不同表现时,我特意去浏览器查看了下 的真实尺寸,发现依然是 width: 100%;height: 100%;是充满整个容器的。

    1.4K20

    图片布局的最全实现方式都在这了!附源码

    因为图片的尺寸或者比例各不相同。所以想要不同尺寸的图片有好的显示效果,你就需要找到适合的方式。 而且图片往往是不可或缺元素。毕竟一图胜千言,有时候图片能给带来非常好的效果。...比如我们每天都会使用的表情包,它往往能够表达出我们无法用文字描述的信息,还比如我们经常在公众号里看到的漫画虽然短短几个字,但是却能够让我们看的不亦乐乎。...对于超出容器的图片我们可以使用 overflow: hidden 把超出部分隐藏。图片得到了好的展示效果。但相应的我们也损失了图片的一部分可视区域。...object-fit CSS3 的 object-fit 属性是用来指定「可替换元素」的内容是如何适应到容器中的。它的值有 5 种。...到这里不知道有没有小伙伴和我一样,在看到图片的不同表现时,我特意去浏览器查看了下 的真实尺寸,发现依然是 width: 100%;height: 100%; 是充满整个容器的。

    1.4K30

    如何搭建组件库的最小原型

    App.vue 中完善卡片组件: 在 app.vue 中完善卡片组件,并对比组件设计稿。.../${file}`; } } makrList("components/lib", entrys); 复制代码 接下来我们处理出口的配置: 输出文件名称:使用入口的 key 来区分各个组件,并使用通过的...umd 作为组件输出产物的标识; 输出目录:这里需要注意使用绝对路径来指定输出文件的位置; libraryTarget和library有相互依赖的关系,主要用来指定模块的暴露方式和模块的别名,这一块的描述我觉得...使用Gulp 来打包组件的样式代码: gulp 主要通过定义任务并使用流式的处理方式使用不同的管道依次进行,我们主要处理 scss 文件内容为 css 文件。...,方便全部加载: 在 css 目录新建 index.scss 文件,并将各个组件需要的 scss 文件导入到此文件。

    1.2K20

    前端代码质量—怎样实现一个支持多语言、高扩展性的 Linter

    但是规定了是什么样和能确保规范被执行了是两回事,需要有人检查代码是否执行了规范,并在合适的时候告诉程序员哪里有问题,需要改。 因此程序员们开发了一系列工具来监督广大的程序员。...转换为抽象语法树 AST Lint 工具会先将文件解析为抽象语法树,否则无法分析代码是否存在问题,甚至不知道这段文本是不是合法的代码。...举一个例子:var foo = "bar" 这段代码经过解析器得到的 AST 就是这样的: { "type": "VariableDeclaration", "start": 0,...执行并返回应用自动修复后的结果 在需要的时候中断检查请求 在命令行中输出诊断结果并如期退出(没错误以 0 退出,有错误以 -1 退出) Engine 诊断指定目录 命令行工具最大的一个用处就是诊断当前目录下的所有文件...Application ---- 命令行 MyLint 提供的 my-lint 命令可以在命令行中检查当前目录下的所有文件或者指定模式匹配的文件或者单个文件,可选输出错误的级别或者格式。

    1.4K20

    前端代码质量—怎样实现一个支持多语言、高扩展性的 Linter

    但是规定了是什么样和能确保规范被执行了是两回事,需要有人检查代码是否执行了规范,并在合适的时候告诉程序员哪里有问题,需要改。 因此程序员们开发了一系列工具来监督广大的程序员。...转换为抽象语法树 AST Lint 工具会先将文件解析为抽象语法树,否则无法分析代码是否存在问题,甚至不知道这段文本是不是合法的代码。...举一个例子:var foo = "bar" 这段代码经过解析器得到的 AST 就是这样的: { "type": "VariableDeclaration", "start": 0,...执行并返回应用自动修复后的结果 在需要的时候中断检查请求 在命令行中输出诊断结果并如期退出(没错误以 0 退出,有错误以 -1 退出) Engine 诊断指定目录 命令行工具最大的一个用处就是诊断当前目录下的所有文件...Application ---- 命令行 MyLint 提供的 my-lint 命令可以在命令行中检查当前目录下的所有文件或者指定模式匹配的文件或者单个文件,可选输出错误的级别或者格式。

    1.2K10

    【长文慎入】一文吃透React SSR服务端同构渲染

    首先我们会发现我在 server 端定义了路由 '/',但是在 react SPA 模式下我们需要使用 react-router来定义路由。那是不是就需要维护两套路由呢?...第二个方法可以通过 context 传递,只需要在入口处传入,在组件中声明 staticcontextType 即可。 我是采用context 传递,为了后面方便集成 redux 状态管理 。...,先不管 server端 是否需要进行调整,此时的代码是可以运行的,按需也是 ok 的。...TODO 和 思考 没有介绍结合 redux 状态管理的 ssr 实现,其实也不复杂,关键还是看业务中是否需要使用redux,因为文中已经实现了使用 context 传递数据,直接改成按 store 传递也很容易...这也是我为什么上来先要说下 reac ssr原理 的原因,因为它指导了我的实践。

    3.7K21

    webpack4配置详解之常用插件分享

    上一次的分享之后,有部分网友留言质疑:骗小白的赞、是否原创、是否是抄别人等等,当然也有很多的网友支持和鼓励,不管褒贬,苏南都非常的感谢,是你们让我认识到自己的不足与优劣。   ...终于最后在想了很久之后明白,人无完人,百人百性、千人千面,不管你做总会有不同的声音,同样不管你分享什么,总会有人需要。...: 它只会更新改动过的内容,所以速度很快,几乎在自己刚改完,切到浏览器窗口内容就已经更新完了; 使用 HotModuleReplacementPlugin插件后,它会暴露一个module.hot对象,它下面有很多的属性.../正则 /数组,//可用于匹配某些文件才输出, entryOnly: boolean, // 即是否只在入口 模块 文件中添加注释; …… } }) ], preload-webpack-plugin...在使用这个插件之前,我们需要先了解一下 preload、prefetch,从字面意思上讲:预加载, 不难理解,就是提前加载资源(匹配其他页面可能用到的资源进行预先,从而达到无 loading,用户无感知的跳转

    1.3K00

    Sass中你不清楚的小细节-持续更新

    内置函数 sass官网提供了很多实用的内置函数,当然目前我也是在一步一步探索这些函数。目前我会将常用到的内置函数以及场景分享给大家使用。...应用场景 其实使用%在大多数(所有)场景下,我的理解就是和@mixin是一样的效果。...需要注意的是,如果使用占位符选择器%定义的样式,单独使用的时候(未通过extend)进行调用,那么这段样式是不会编译到css的输出结果之后的。...简单来说,项目目录中的所有scss文件在编译阶段都会被编译成为一个个css文件。...但是对于一个公用样式文件,此时我们并不需要将它编译成为单独的css文件,而是希望将公用文件中的样式插入到对应引入样式文件中,我们只需要在引入它的文件中将它编译进入引入的css文件中就可以。

    2.7K20

    20210225-1 Python错误与异常「建议收藏」

    使用该方式时,遇到的异常类型是元组中的任意一个,都会走异常流程。 > 这么做有什么好处呢?...(2,0) => 不管有没有异常,都会执行我的哦~ 不管有没有异常,都会执行我的哦~ Traceback (most recent call last): File "d:/VSCode/Untitled...(2,2) use_finally(2,0) => 不管有没有异常,都会执行我的哦~ 除数不能为0 不管有没有异常,都会执行我的哦~ 现在加上else也是一样可以的 def use_finally(x,...,都会执行我的哦~") use_finally(2,2) use_finally(2,0) => 程序执行成功 不管有没有异常,都会执行我的哦~ 除数不能为0 不管有没有异常,都会执行我的哦~ 除了...第二个输出了一些错误提示; 如果只想知道有没有抛出异常,并不想处理它,使用一个 raise 就可以把异常抛出 try: raise NameError("这是一个NameError") except

    76730

    实战为王,从零封装 Icon 组件

    在学习了 props 属性之后,结合一个实践案例,我们就能够扎实的掌握它。 在实践应用中,图标的使用无处不在。小到编辑器的功能按钮,大到 chrome 浏览器的任务栏,都有大量的图标需要处理。...每个稍微大一点点的项目都必然需要一个图标组件。 在使用时,我们可以控制图标具体类型、颜色、大小。在 React 哲学之封装思想的指导下,这些控制项为组件的差异项,需要通过 props 传入。...字体图标与文字具有相同的特性,我们可以把图标当成字体一样处理。例如修改它的font-size,color等。.../fonts/custom.eot') /* 下载到本地的字体库 */ } 通常情况下,字体库中,每一个图标都会对应一个唯一的标识码。...t=1646884122827') format('truetype'); } 将这段代码贴到我们的css文件中,就已经自定义了一个 font-family 为iconfont的字体图标。

    1.4K20

    怎样才能写出更好的 CSS

    让我们开门见山:编写优秀的 CSS 代码是件十分痛苦的事情。很多开发人员都不想做 CSS 开发。你让我干什么都行,但是 CSS 还是算了吧。 在我创建应用的时候,从来都无法从 CSS 中享受到乐趣。...结果你得到了 500 行根本无法维护的 CSS 代码。 ? 烂透了 我本人经常和 CSS 苦苦纠缠。 今天目的是:让你写出更好的 CSS。...当然,但是 CSS 框架也有一些缺点: 它经常会使用平淡无奇的设计。 CSS 框架使得定制很困难,更不用说超越框架了。 在使用之前,你必须先学习如何使用它们。...从根本上来说,它是一个 CSS 的超集:它增加了一些很酷的功能,例如变量,嵌套,导入和混入(mixins)等。 下面介绍一些我们即将使用的功能。 变量 你可以在 SCSS 中使用变量。...这意味着node-sasswaits在时刻监督你的代码是否发生改动,一旦出现发生,它就会自动编译成CSS。这在开发时非常有用。 --output-style:CSS文件的输出内容。

    1.7K10
    领券