Sass代码重用----Sass占位符

在Sass中,我们引入了占位符“%placeholder”来进一步优化“@extend”。

举例:

 编译处理的css代码:

  这个例子中,我们是定义一个占位符“%btn”(占位符,都是以“%”开头)。我们对比一下这两个例子的输出结果就可以知道,使用占位符的输出结果是不包含基类的。

但是,还是要注意:

  “占位符%placeholder”并非用来替换“继承@extend”的,而是用来配合“继承@extend”来使用的。从上面我们可以知道,继承@extend有2种输出方式:

    (1)需要保留基类的:只使用@extend来实现;

    (2)不需要保留基类的:使用@extend配合%placeholder来实现;

如果html结构中,需要用到基类,就不需要使用占位符来去掉,如果需要使用到基类,就建议使用占位符来配合继承,来去掉

原文地址:https://www.cnblogs.com/hou-yuan-zhen/p/11634478.html

时间: 2024-12-11 00:00:09

Sass代码重用----Sass占位符的相关文章

Sass学习之 Sass语法入门--5.占位符%

5.占位符% 只有通过@extend调用才会产生代码,不然不会有任何影响 //SCSS %mt5 { margin-top: 5px; } %pt5{ padding-top: 5px; } .btn { @extend %mt5; @extend %pt5; } .block { @extend %mt5; span { @extend %pt5; } } 编译后 //CSS .btn, .block { margin-top: 5px; } .btn, .block span { paddi

Sass 混合宏、继承、占位符 详解

混合宏-声明混合宏如果你的整个网站中有几处小样式类似,比如颜色,字体等,在 Sass 可以使用变量来统一处理,那么这种选择还是不错的.但当你的样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无法达到我们目了.这个时候 Sass 中的混合宏就会变得非常有意义.1.声明混合宏不带参数混合宏:在 Sass 中,使用"@mixin"来声明一个混合宏.如: 1 @mixin border-radius{ 2 -webkit-border-radius: 5px; 3 border-rad

SQl语句中使用占位符的优点

1.增加SQL代码可读性2.占位符可以预先编译,提高执行效率3.防止SQL注入4用占位符的目的是绑定变量,这样可以减少数据SQL的硬解析,所以执行效率会提高不少 绑定变量是Oracle解决硬解析的首要利器,能解决OLTP系统中library cache的过度耗用以提高性能 绑定变量是Oracle解决硬解析的首要利器,能解决OLTP系统中library cache的过度耗用以提高性能.然刀子磨的太快,使起来锋利,却容易折断.凡事皆有利弊二性,因地制宜,因时制宜,全在如何权衡而已.本文讲述了绑定变量

Jfinal数据库操作语句中占位符的使用

占位符的优点: 1.增加SQL代码可读性 2.占位符可以预先编译,提高执行效率 3.防止SQL注入 4.用占位符的目的是绑定变量,这样可以减少数据SQL的硬解析,所以执行效率会提高不少 假设要将id从1到10000的员工的工资都更新为150.00元,不使用绑定变量:sql.executeQuery("UPDATE employees SET salay = 150.00 WHERE id = 1");sql.executeQuery("UPDATE employees SET

[Sass]占位符 %placeholder

[Sass]占位符 %placeholder Sass 中的占位符 %placeholder 功能是一个很强大,很实用的一个功能,这也是我非常喜欢的功能.他可以取代以前 CSS 中的基类造成的代码冗余的情形.因为 %placeholder 声明的代码,如果不被 @extend 调用的话,不会产生任何代码.来看一个演示: %mt5 { margin-top: 5px; } %pt5{ padding-top: 5px; } 这段代码没有被 @extend 调用,他并没有产生任何代码块,只是静静的躺

sass学习笔记(四):混合宏VS继承VS占位符

混合宏主要用来传递参数,但sass编译相同的混合宏时,不会将相同的样式合并.会产生冗余代码. 继承主要用于不需要传递参数的场合,且已经存在基类,编译后会将相同的样式合并,不足:不论基类是否被调用,已经声明的基类都会产生代码. 占位符与继承类似,但是没有被调用的占位符不会产生代码.

Sass之混合宏、继承、占位符

1.混合宏. 当样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无法达到我们目的了.这个时候混合宏就派上用场了. 而使用混合宏时,首先要声明混合宏,而声明混合宏时有两种,不带参数混合宏和带参数混合宏两种. 1.1 不带参数混合宏的声明要使用关键词@mixin.例如: @mixin border-radius{ -webkit-border-radius: 5px; border-radius: 5px; } 其中 @mixin 是用来声明混合宏的关键词,有点类似 CSS 中的 @medi

Sass之继承,混合宏,占位符的用法总结

Sass强大的功能,受到web前端开发人员的各种青睐. 混合宏的用法,关键字@mixin,声明带参数的函数,在有需要的地方通过@include调用这一函数值 //SCSS中混合宏使用@mixin mt($var){ margin-top: $var; } .block { @include mt(5px); span { display:block; @include mt(5px); }} .header { color: orange; @include mt(5px); span{ dis

sass 继承 占位符 %placeholder

@extend //SCSS .btn { border: 1px solid #ccc; padding: 6px 10px; font-size: 14px; } .btn-primary { background-color: #f36; color: #fff; @extend .btn; } .btn-second { background-color: orange; color: #fff; @extend .btn; } 编译出来的css //CSS .btn, .btn-pri