[Sass]占位符 %placeholder

[Sass]占位符 %placeholder

Sass 中的占位符 %placeholder 功能是一个很强大,很实用的一个功能,这也是我非常喜欢的功能。他可以取代以前 CSS 中的基类造成的代码冗余的情形。因为 %placeholder 声明的代码,如果不被 @extend 调用的话,不会产生任何代码。来看一个演示:

%mt5 {
  margin-top: 5px;
}
%pt5{
  padding-top: 5px;
}

这段代码没有被 @extend 调用,他并没有产生任何代码块,只是静静的躺在你的某个 SCSS 文件中。只有通过 @extend 调用才会产生代码:

//SCSS
%mt5 {
  margin-top: 5px;
}
%pt5{
  padding-top: 5px;
}

.btn {
  @extend %mt5;
  @extend %pt5;
}

.block {
  @extend %mt5;

  span {
    @extend %pt5;
  }
}

编译出来的CSS

//CSS
.btn, .block {
  margin-top: 5px;
}

.btn, .block span {
  padding-top: 5px;
}

从编译出来的 CSS 代码可以看出,通过 @extend 调用的占位符,编译出来的代码会将相同的代码合并在一起。这也是我们希望看到的效果,也让你的代码变得更为干净。

时间: 2024-10-11 17:44:49

[Sass]占位符 %placeholder的相关文章

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

在Sass中,我们引入了占位符“%placeholder”来进一步优化“@extend”. 举例:  编译处理的css代码:   这个例子中,我们是定义一个占位符“%btn”(占位符,都是以“%”开头).我们对比一下这两个例子的输出结果就可以知道,使用占位符的输出结果是不包含基类的. 但是,还是要注意: “占位符%placeholder”并非用来替换“继承@extend”的,而是用来配合“继承@extend”来使用的.从上面我们可以知道,继承@extend有2种输出方式: (1)需要保留基类的:

占位符(placeholder text)

占位符(placeholder text)是用户在input(输入)框输入任何东西之前放置在input(输入)框中的预定义文本. 你可以用如下方式创建占位符: <input type="text" placeholder="this is placeholder text">

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

UITextView加占位符placeholder

@property (nonatomic ,retain) UITextView * contentText; @property (nonatomic ,retain) NSString * placeholderText; - (void)viewDidLoad{    [super viewDidLoad];    // Do any additional setup after loading the view. [email protected]"这一刻的想法..."; _c

RunTime运行时在iOS中的应用之UITextField占位符placeholder

RunTime运行时机制 runtime是一套比较底层的纯C语言API, 属于1个C语言库, 包含了很多底层的C语言API. 在我们平时编写的OC代码中, 程序运行过程时, 其实最终都是转成了runtime的C语言代码, runtime算是OC的幕后工作者,下面介绍一下runtime的一个应用用于遍历出UITextField的有那些隐藏属性,查出后再通过KVC来进行修改这个属性 //第一次用到这类的时候就会调用的只会调用一次方法 ,这个方法查的时候用一下 ,以后不用 + (void)initia

修改占位符(placeholder)默认颜色、字体设置

方法: 选择器名字::-webkit-input-placeholder {color: #F85836;font-size:12px;} 选择器名字:-moz-placeholder {color: #F85836;font-size:12px;} 选择器名字:-ms-input-placeholder {color: #F85836;font-size:12px;} 例如: .form-control::-webkit-input-placeholder {color: #F85836;fo

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

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

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

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

占位符解析

占位符解析过程 占位符解析器 /** * 从指定的属性源中,将占位符解析为具体的值 */ public class PropertyPlaceholderHelper { private static final Log logger = LogFactory.getLog(PropertyPlaceholderHelper.class); private static final Map<String, String> wellKnownSimplePrefixes = new HashMa