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

我是否需要在这段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;
}

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

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

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

相关·内容

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

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

45520

如何优雅设计 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.通过代码评审获得反馈 ? 从你团队成员、教授和其他开发者那里得到反馈。

62320

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

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

24720

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

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

2.6K20

第九十二期: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文件修改样式,使所有的用户界面符合我们要求。

57210

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.3K60

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

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

37920

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

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

1.2K20

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

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

1.2K20

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

73930

如何搭建组件库最小原型

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

1.2K20

怎样才能写出更好 CSS

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

1.7K10

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

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

1.3K30

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

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

1.2K10

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

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

1.4K20

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

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

1.3K00

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

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

3.7K21

【SassSCSS】预加载器“轩辕剑”

Sass/SCSS——预加载器“轩辕剑”,这也不是吹,是它自己说,下图为例。...也就是说,任何标准 CSS3 样式表都是具有相同语义有效 SCSS 文件。SCSS 需要使用分号和花括号而不是换行和缩进。...下划线underscore风格命名 Sass下划线分割命名,相信各位pym看了别人开源代码也会发现很多吧,类似_partial.scss、_colors.scss ,但是这种命名绝不是闲蛋疼,恰恰是利用了...混合@mixin 用来分组那些需要在页面复用CSS声明,可以通过向Mixin传递变量参数来让代码更加灵活,该特性添加浏览器兼容性前缀时候非常有用。...,让别的代码来复用,你可以把当成一个公共方法。

74740
领券