sass的继承，混合宏，占位符的用法总结

SCSS中混合宏使用

@mixin mt($var){
margin-top: $var;
}.block {
@include mt(5px);span {
display:block;
@include mt(5px);
}
}

@extend如何工作

  .icon {transition: background-color ease .2s;margin: 0 .5em;}.error-icon {@extend .icon;/*错误图标指定的样式... */}.info-icon {@extend .icon;/* 信息图标指定的样式... */}

　　sass编译成css

 .icon,.error-icon,.info-icon {transition: background-color ease .2s;margin: 0 .5em;}.error-icon {/*错误图标指定的样式... */}.info-icon {/* 信息图标指定的样式... */}

使用选择器占位符%placeholder

　　以上代码编译后

   .error-icon,.info-icon {transition: background-color ease .2s;margin: 0 .5em;}.error-icon {/*错误图标指定的样式... */}.info-icon {/* 信息图标指定的样式... */}

　　编译出来的CSS代码中将不再包括.icon了。

转载于:https://www.cnblogs.com/moonzwt/p/9794403.html

sass的继承，混合宏，占位符的用法总结相关推荐

c语言结构体占位符,深入理解结构体中占位符的用法
深入理解结构体中占位符的用法复制代码代码如下: typedef union { struct x{ char a1 : 2; char b1 : 3; char c1 : 3; }x1; char ...
结构体中占位符的用法
typedef union {struct x{char a1 : 2;char b1 : 3;char c1 : 3;}x1;char c; }my_un; int main() {my_un a; ...
python中占位符可以用什么_python占位符都有什么
python中为什么要使用占位符? python如何在一个字符串中使用两个占位符 1. 使用连接符: + 12 world = "World"print "Hello & ...
python占位符_Python（2）——Python的基础语句
关注微信公众号IT小组,获取更多干货知识~ 目录: 赋值输入输出语句格式化输出循环语句条件判断语句一:赋值在编程语言中,给一个变量赋值是最常见的事情,赋值语句在Python中是以" ...
你会用PPT中的图片占位符吗？超级好用，不错的技能
在设计PPT的时候,或许大部分人都不离开图片的使用,不论是使用下载的素材还是自己设计的PPT,都有图片的存在. PPT中的图片能增加页面的设计感和场景感,比如下面这些案例中的图片使用. 但是,这时就会 ...
Java之日志打印占位符
在java中日志打印基本方式有System.out.print()打印,在工程应用中更多的是使用LogFactory,getLogger()打印,下面对其打印时使用占位符的用法进行简单分析. 1.Sy ...
详解scss的继承、占位符和混合宏
1.继承和占位符两者都是通过@extend来引用. 1.1 继承一个已经存在的css样式类,可以被其他样式类继承. 例如,实现以下css样式: .btn, .btn--primary, .btn- ...
html引入scss,使用Sass混合宏来声明CSS伪类选择器
CSS3在选择器方面添加伪类选择器这方面的特性,比如:nth-child(n).:nth-of-type(n)这样的选择器,其好处在这里就不多说了.如果你对这方面感兴趣的话,你可以阅读早前整理有关于C ...
23_字符串的格式化_format 函数_% 占位符 _ f-string _Template _模板字符等
文章目录 23.字符串的格式化 Resource `format()` 讲解 replacement_field 语法说明 format_spec 语法说明符号系统分组选项(关于整个的语法如何对 ...

sass的继承，混合宏，占位符的用法总结

@extend如何工作

使用选择器占位符%placeholder

sass的继承，混合宏，占位符的用法总结相关推荐

最新文章

热门文章