sass中的占位选择器(%)和@extend

最新推荐文章于 2024-05-20 13:05:23 发布
最新推荐文章于 2024-05-20 13:05:23 发布
阅读量485 收藏 8
点赞数 3
分类专栏： sass scss 文章标签： sass scss
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Pzj15817073966/article/details/138217072
版权

sass中的占位选择器(%)和@extend 代码

未使用@extend复用占位选择器

image-20240426135728101

在其他选择器中使用@extend复用占位选择器属性

image-20240426135922282

如果不使用@extend方法，就不会复用%选择器中的属性

作用：当选择器中有许多代码重复的时候，可以使用%选择器，把重复的属性归并到一个选择器当中，再使用@extend %选择器进行复用.

Scss 基本使用 （ @extend、 @mixin、@import、@if、@for、@while、@each ）
wjianwei666的专栏
05-27 669
如：_colors.scss 和 colors.scss 不能同时存在于同一个目录下，否则带下划线的文件将会被忽略。注意： Scss 的连接符号 - 与下划线符号 _ 是相同的，也就是 @mixin basis-text{ } 与 @mixin basis-text{ } 是一样的混入。从编译出来的 CSS 代码可以看出，通过 @extend 调用的占位符，编译出来的代码会将相同的代码合并在一起。如果不希望将一个 Scss 的代码文件编译到一个 CSS 文件，可在文件名的开头添加一个下划线。
Sass中如何编写占位符选择器？
最新发布
王铁柱666的博客
04-24 165
占位符选择器类似于类选择器，但它们的主要区别在于，占位符选择器不会在CSS输出中直接显示，除非它们被其他选择器引用（例如通过。另外，值得注意的是，在实际应用中，为了避免重复的代码和更好的性能，你可能希望组织你的Sass代码以最小化。的使用，并考虑使用混合（mixin）或其他Sass特性来达到类似的效果。的占位符选择器，它设置了文本颜色和字体大小。引用了一次，因此它并没有直接出现在编译后的CSS中。语句继承了占位符选择器的样式。的样式，并添加了自己的背景颜色样式。在这个例子中，我们创建了一个名为。
sass占位符%选择器的使用
baidu_41564215的博客
08-11 617
%sfqy-basic { // 编译后不会出现在css文件中 float: left; margin-top: 15px; width: 10px; height: 10px; } .sfqy-icon { @extend %sfqy-basic; // @extend继承 background-color: #b1b1b1; } .sfqy-icon-enable { @extend %sfqy-basic; background-color: #2edb2e; }
scss的继承@extend 和站位符 %
逍湘子
08-26 2191
继承： @extend 指令告诉 Sass 一个选择器的样式从另一选择器继承。 如果一个样式与另外一个样式几乎相同，只有少量的区别，则使用 @extend 就显得很有用。 这样就可以达到复用的目的，减少代码的重复量。 比如： .container-a { width: 200px; height: 100px; margin-left: 10px; } container-b 和 contaienr-a 有几乎同样的样式属性，则可以这样来写： .container-b { @extend .con
scss规范 混合(mixin) 占位选择器 % extend 继承 循环和函数
吕小仙的欧巴的博客
07-30 284
混合(mixin) 根据功能定义模块，然后在需要使用的地方通过 @include 调用，避免编码时重复输入代码段 // CSS .jdc_1 { -webkit-border-radius: 5px; border-radius: 5px; } .jdc_2 { -webkit-border-radius: 10px; border-radius: 10px; } // SCSS @mixin radius($radius:5px) { -webkit-border
关于Sass中@extend和%的理解
weixin_34167819的博客
05-13 2206
@extend的使用会产生如下结果 .a{ color: red } .b{ @extend .a; } <!--编译后--> .a, .b { color: red; } 复制代码如果我们把不希望@extend扩展的属性产生实质性的作用 ，只是想要单纯的使用它，就像mixin那样，应该怎么办？这个时候%（占位符）就登场了。%代表任意的css选择器，%a可能是...
Sass - 占位符选择器(%placeholder)
王二红
09-18 3693
前言 如果你已经了解了 @extend指令 则直接阅读即可，否则你需要先学习：传送门 %占位符选择器语法： 占位选择器看起来很像普通的 class 和 id 选择器，只是 # 或 . 被替换成了 %，他可以像 class 或者 id 选择器那样使用，需要注意的是，它本身的规则不会被编译到 CSS 文件中。 %demo { /* 一些规则 */ } 初识占位符选择器 它取代以前 CSS 中的...
sass揭秘之@mixin，%，@function
51yunOA
04-15 1288
因为文章内含有很多sass代码，如需自己动手查看编译结果，推荐使用sassmeister这款在线编译工具，方便你阅读学习。 在阅读本文章之前，请先确认你已经阅读了上篇文章sass揭秘之变量，不然会给你带来疑惑的感觉。 其实很多人之所以对sass或less感兴趣，就是因为他们能使用变量和这个@mixin功能，而后面的%和@function知道的人就比较少了。所以说@mixin这个东西还是很有诱惑...
Sass（五）中文文档1：特色功能、两种格式、使用 Sass、 CSS 功能拓展 （父选择器 `&`、占位符选择器 `%foo`）、注释（单行、多行、！）
qq_43456781的博客
09-08 302
Sass（五）中文文档1：特色功能、两种格式、使用 Sass、 CSS 功能拓展 （父选择器 &、占位符选择器 %foo）、注释（单行、多行、！） 文章目录Sass（五）中文文档1：特色功能、两种格式、使用 Sass、 CSS 功能拓展 （父选择器 `&`、占位符选择器 `%foo`）、注释（单行、多行、！）[Sass (Syntactically Awesome StyleSheets)](http://sass-lang.com/documentation/file.SASS_REFER
Sass的高级特性：使用@extend实现样式的继承
# 1. 介绍Sass和@extend ## 1.1 Sass简介 ...@extend是Sass中非常有用的一个指令，它可以实现样式的继承，即一个选择器可以继承另一个选择器的样式规则。 使用@extend可以避免重复编写相同的CSS样
Stylecow插件扩展功能：实现@extend规则
例如，`%but to n`是一个Sass占位符选择器，它定义了一个基本样式。随后，`%big-but to n`和`%red-big-but to n`使用`@extend %but to n`来继承这些基本样式，并添加新的样式属性，如`font-size`和`color`。通过这种...
SCSS主要功能详解
m0_47626239的博客
08-30 759
SCSS主要功能详解
scss--混入@mixin、@inclue、占位选择器 %、继承 @extend、插值语法 #{}、
weixin_42017221的博客
02-07 2221
mixin混入可以用于定义重复使用的样式，比如下面CSS代码我们可以发现，.header和.footer存在相同重复的样式定义，此时SCSS可以将这段重复样式提取到混入@mixin中，再在.header和.footer中通过@inclue引入混入样式。
【sass中占位符选择器%foo的作用、使用场景以及与其他占位符的选择方法】
xiejunlan的博客
05-20 477
在Sass（Syntactically Awesome Stylesheets）中，占位符选择器（Placeholder Selectors）是一个以开头的特殊类型的选择器。它们的主要作用是允许你定义一个样式规则集，但不会直接应用于任何HTML元素。相反，这些规则集可以通过@extend指令被其他选择器所继承。
Sass学习笔记 — 3. 深入学习
jiangbo110119的博客
01-30 1799
Sass (Syntactically Awesome StyleSheets) Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass
scss 文件里的特殊符号 - % 百分号和 $美元符号
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
01-09 2623
看一个 SAP Spartacus UI 中的具体例子： 第一行的 @import ‘./facet’, 实际上导入的是 _facet.scss 文件。 第 11行 的$product-list-allowlist：可以把 $ 即美元符号定义的这个标识符看成是编程语言中的变量。 它又被 $product-components-allowlist 引用： 这个 mergeAll 的作用： 注意 !default 的含义： !default 是一个 Sass 标志，指示对变量的条件赋值 — 它仅在变量
scss 笔记
m0_60312580的博客
04-24 353
变量以美元符号 $ 开头；变量支持块级作用域（局部变量），嵌套规则内定义的变量只能在嵌套规则内使用，也就是说在某个{ } 内定义的局部变量，和i能在该 { } 内使用，这个和js中的局部变量类似；将局部变量转为全局变量可以用!global 声明。可以在 scss 变量的结尾添加!default 声明，如果变量已经被附值，则不会被重新附值，如果变量还没附值，则会被赋值。default;default;$title: "新的标题"!default;#main {编译后：#main {
SCSS的混合器、占位符、继承
weixin_70815247的博客
07-25 2324
当你的代码中需要用到大段大段重用样式代码的时候，可以通过SCSS的混合器实现大段样式的重用。混合器使用@mixin定义。使用混合器利用混合器，可以很容易地在样式表的不同地方共享样式。如果发现自己在不停地重复一段样式，那就应该把这段代码构造成优良的混合器，尤其是这段样式本身就是一个逻辑单元，比如说就是一组放在一起有意义的属性。如果你的整个网站中有几处小小的样式类似（例如一致的颜色和字体)，那么使用变量来统一处理这种情况是非常不错的选择。...
一篇文章搞懂sass(scss)预处理器
weixin_53500514的博客
11-30 2183
sass基于Ruby语言开发而成,VSCode扩展，可通过实时浏览器重新加载来帮助您实时将SASS / SCSS文件编译/转换为CSS文件。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值