基础(二)

嵌套-伪类嵌套    伪类嵌套和属性嵌套非常类似,只不过他需要借助“&”符号一起配合使用     例如:sass

		      .clearfix{
			          &:before,
			          &:after {
    				              content:"";
   				           display: table;
  				          }
			          &:after {
    				              clear:both;
    				              overflow: hidden;
  				            }
			      }

    编译出来的 CSS:

			        clearfix:before, .clearfix:after {
  					            content: "";
  					            display: table;
					        }
			        .clearfix:after {
  					            clear: both;
  					            overflow: hidden;
				      }

混合宏-声明混合宏     如果你的整个网站中有几处小样式类似,比如颜色,字体等,在 Sass 可以使用变量来统一处理,那么这种选择还是不错的。     但当你的样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无法达到我们目了。     不带参数混合宏:     在 Sass 中,使用“@mixin”来声明一个混合宏。

	      @mixin border-radius{
    			          -webkit-border-radius: 5px;
    			          border-radius: 5px;
	    }

   复杂的混合宏:       Sass中的混合宏还提供更为复杂的,你可以在括号里写上带有逻辑关系,帮助更好的做你想做的事情。

	        @mixin box-shadow($shadow...){
	                   @if length($shadow) >= 1{ 
			            @include prefixer(box-shadow,$shadow);
		        }@else{
			          $shadow:0 0 4px rgba(0,0,.3);
			          @include prefixer(box-shadow,$shadow);
		          }
	        }

        这个 box-shadow 的混合宏,带有多个参数,这个时候可以使用“ … ”来替代。简单的解释一下,当 $shadow 的参数数量值大于或         等于“ 1 ”时,表示有多个阴影值,反之调用默认的参数值“ 0 0 4px rgba(0,0,0,.3) ”。     混合宏-调用混合宏       在Sass 中通过@mixin 关键词声明了一个混合宏,那么在实际调用中,在匹配了一个关键词“@include”来调用声明好       的混合宏。

		      @mixin border-radius{
			          -webkit-border-radius:3px;
			          border-radius:3px;
		      }

      在一个按钮中腰调用定义好的混合宏“border-radius”可以这样使用

		      button{
			          @include border-radius;
		      }

     编译出来的css

		        button{
			          -webkit-border-radius:3px;
			          border-radius:3px;
		         }

    混合宏的参数-传一个不带值的参数     Sass 的混合宏有一个强大的功能,可以传参,那么在Sass中传参主要有以下几种形式       (A)传一个不带值的参数           在混合和宏中,可以穿个不在任何值的参数 比如:

		        @mixin border-radius($radius){
			          -webkit-border-radius:$radius:
			          border-radius:$radius:
		        }

    在混合宏“border-radius”中定义了一个不带任何值的参数$radius     在调用的时候可以给这个混合宏专递一个数值

		      .box{
			        @include border-radius(3px);
		      }

    在这里表示混合宏传递了一个“border-radius”的值为“3px”。

		      .box{
			          -webkit-border-radius:3px;
			            border-radius:3px;
		      }

混合宏的参数-传个带值的参数     在Sass的混合宏中,还可以给混合宏的参数传递一个默认值,例如:

		        @mixin border-radius($radius:3px){
			            -webkit-border-radius:$radius;
			              border-radius:$radius;
		        }

    混合宏“border-radius”传了一个参数“$radius”,而且给这个参数赋予了一个默认值“3px”。

    在调用类似这样的混合宏时,会多有一个机会,假设你的页面中的圆角很多地方都是“3px”的圆角,那么这个时候只     需要调用默认的混合宏“border-radius”:

		      .btn {
 			         @include border-radius;
		      }

    编译出来的CSS

		      .btn{
			        -webkit-border-radius:3px
			        border-radius:3px
		      }

      但有的时候,页面中有些元素的圆角值不一样,那么可以随机给混合宏传值,如:         .box {           @include border-radius(50%);         }     编译出来的 CSS:       .box {         -webkit-border-radius: 50%;           border-radius: 50%;       } 混合宏的参数-传多个参数     Sass 混合宏除了能传一个参数之外,还可以传多个参数,如:

	        @mixin center($width,$height){
		            width:$width;
		            height:$height;
		            position:absolute;
		            top:50%;
		            left:50%:
		            margin-top:($height)/2;
		            margin-left:-($width)/2;
	        }

  在混合宏“center”就传了多个参数。在实际调用其他混合宏是一样的。     .box-center{         @include center(500px,300px);     }     编译出来 css

	      .box-center{
		        width:500px;
		        height:300px;
		        position:absolute;
		        top:50%;
		        left:50%;
		        margin-top:-150px;
		        margin-left:-250px;
	        }

    有一个特别的参数“...”,当混合宏穿的参数传的参数过多之时,可以使用参数来代替 如;

	        @mixin box-shadow($shadows...){
		              @if length($shadows) >=1{
			                  -webkit-box-shadow:$shadows;
			                   box-shadow:$shadows;
		                }@else{
			                    $shadows: 0 0 2px rgba(#000,.25);
			                    -webkit-box-shadow:$shadow;
			                      box-shadow:$shadow;
		                  }
	                }

    在实际调用中:         .box{             @include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2));       }     编译出来的css:       .box{           -webkit-box-shadow:0 0 1px rgba(0,0,0,0.5),0 0 2px rgba(0,0,0,0.2);               box-shadow:0 0 1px rgba(0,0,0,0.5),0 0 2px rgba(0,0,0,0.2);       } 混合宏的参数--混合宏的不足       混合宏在实际编码中给我们带来很多方便之处,特别是对于复用重复代码块,但是最大的不足之处是生产         冗余的代码块,比如在不同的地方调用一个相同的混合宏。

            @mixin border-radius{
		                -webkit-border-radius:3px;
		                  border-radius:3px;
	            }
	.            box{
	                    @include border-radius;
	                      margin-bottom:5px;
	            }
	            .btn{
	                  @include border-radius;
	            }

      示例在“.box”和“.btn”中等能调用了定义好的“border-radius”混合宏。先来看编译出来的css;

	      .box{
	            -webkit-border-radius:3px;
	              border-radius:3px;
	              margin-bottom:5px;
	        }
	      .btn{
	              -webkit-border-radius;3ox;
	               border-radius:3px;
	    }

      sass 在调用相同的混合宏时,并不能智能的将相同的样式代码块合并在一起。这也是 Sass 的混合宏最不足之处

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏精讲JAVA

Java : 未来已来

在10月22的 Oracle Codeone大会上,Java 平台的首席架构师 Mark Reinhold 做了The Future of Java is To...

12520
来自专栏前端下午茶

JS 静态类型检查工具 Flow

本文主要介绍了解决JS作为弱类型语言没有类型检查痛点的静态类型检查工具 Flow ,并且介绍了在WebStorm中使用Flow的方法,最后介绍了一些常用的Flo...

37950
来自专栏tkokof 的技术,小趣及杂念

移动开发之浅析cocos2d-x的中文支持问题

  题记:这阵子一直在学习cocos2d-x,其跨平台的特性确实让人舒爽,引擎的框架概念也很成熟,虽然相应的第三方工具略显单薄,但也无愧是一件移动开发的利器啊,...

10120
来自专栏24K纯开源

QT中根据ID设置radio按钮

前面提到,有两种方法可以提取到radio按钮组中当前被选中的按钮(看这里)。这一篇中,我们根据ID来获取按钮。 代码: ui->BG->setId(ui...

382100
来自专栏小樱的经验随笔

HUST 1585 排队

1585 - 排队 时间限制:1秒 内存限制:128兆 351 次提交 179 次通过 题目描述BG站在一个有n个人的队伍中,但他并不知道他处于队伍中的哪个...

35080
来自专栏Modeng的专栏

Vue一个案例引发的递归组件的使用

今天我们继续使用 Vue 的撸我们的实战项目,只有在实战中我们才会领悟更多,光纸上谈兵然并卵,继上篇我们的《Vue一个案例引发的动态组件与全局事件绑定总结》 之...

18010
来自专栏AndroidTraveler

责任链模式妙用

除了应用场景比较多的单例模式你能够信手拈来,其他的可能会觉得有点难以掌握。也许压根都没用过。

13530
来自专栏cloudskyme

在oracle中计算时间差

 计算时间差是oracle data数据类型的一个常见问题。oracle支持日期计算,你可以创建诸如“日期1-日期2”这样的表达式来计算这两个日期之间的时间差。...

37280
来自专栏前端知识分享

Angular中ui-grid的使用详解

  在项目开发的过程中,产品经理往往会提出各种需求,以提高用户体验。最近,项目中用到的表格特别多,而且表格的列数和行数也超多。为了让用户浏览更爽,产品经理提出,...

22820
来自专栏腾讯NEXT学位

提升代码可读性的 10 个技巧

38660

扫码关注云+社区

领取腾讯云代金券