php网站开发简介,魔方建站,app自助建站,wordpress 会员中心插件文章目录 前言混合器何时使用混合器混合器中的CSS规则给混合器传参默认参数值后言 前言 hello world欢迎来到前端的新世界 #x1f61c;当前文章系列专栏#xff1a;Sass和Less #x1f431;#x1f453;博主在前端领域还有很多知识和技术需要掌握#xff0c;正在不断努… 文章目录 前言混合器何时使用混合器混合器中的CSS规则给混合器传参默认参数值后言 前言 hello world欢迎来到前端的新世界 当前文章系列专栏Sass和Less 博主在前端领域还有很多知识和技术需要掌握正在不断努力填补技术短板。(如果出现错误感谢大家指出) 感谢大家支持您的观看就是作者创作的动力 混合器
如果你的整个网站中有几处小小的样式类似(例如一致的颜色和字体)那么使用变量来统一处理这种情况是非常不错的选择。但是当你的样式变得越来越复杂你需要大段大段的重用样式的代码独立的变量就没办法应付这种情况了。你可以通过sass的混合器实现大段样式的重用。
混合器使用mixin标识符定义。看上去很像其他的CSS 标识符比如说media或者font-face。这个标识符给一大段样式赋予一个名字这样你就可以轻易地通过引用这个名字重用这段样式。下边的这段sass代码定义了一个非常简单的混合器目的是添加跨浏览器的圆角边框。
mixin rounded-corners {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;
}然后就可以在你的样式表中通过include来使用这个混合器放在你希望的任何地方。include调用会把混合器中的所有样式提取出来放在include被调用的地方。如果像下边这样写:
notice {background-color: green;border: 2px solid #00aa00;include rounded-corners;
}//sass最终生成:.notice {background-color: green;border: 2px solid #00aa00;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;
}在.notice中的属性border-radius-moz-border-radius和-webkit-border-radius全部来自rounded-corners这个混合器。这一节将介绍使用混合器来避免重复。通过使用参数你可以使用混合器把你样式中的通用样式抽离出来然后轻松地在其他地方重用。实际上混合器太好用了一不小心你可能会过度使用。大量的重用可能会导致生成的样式表过大导致加载缓慢。所以首先我们将讨论混合器的使用场景避免滥用。
何时使用混合器
利用混合器可以很容易地在样式表的不同地方共享样式。如果你发现自己在不停地重复一段样式那就应该把这段样式构造成优良的混合器尤其是这段样式本身就是一个逻辑单元比如说是一组放在一起有意义的属性。
判断一组属性是否应该组合成一个混合器一条经验法则就是你能否为这个混合器想出一个好的名字。如果你能找到一个很好的短名字来描述这些属性修饰的样式比如rounded-cornersfancy-font或者no-bullets那么往往能够构造一个合适的混合器。如果你找不到这时候构造一个混合器可能并不合适。
混合器在某些方面跟css类很像。都是让你给一大段样式命名所以在选择使用哪个的时候可能会产生疑惑。最重要的区别就是类名是在html文件中应用的而混合器是在样式表中应用的。这就意味着类名具有语义化含义而不仅仅是一种展示性的描述:用来描述html元素的含义而不是html元素的外观。而另一方面混合器是展示性的描述用来描述一条css规则应用之后会产生怎样的效果。
在之前的例子中.notice是一个有语义的类名。如果一个html元素有一个notice的类名就表明了这个html元素的用途:向用户展示提醒信息。rounded-corners混合器是展示性的它描述了包含它的css规则最终的视觉样式尤其是边框角的视觉样式。混合器和类配合使用写出整洁的html和css因为使用语义化的类名亦可以帮你避免重复使用混合器。为了保持你的html和css的易读性和可维护性在写样式的过程中一定要铭记二者的区别。
有时候仅仅把属性放在混合器中还远远不够可喜的是sass同样允许你把css规则放在混合器中。
混合器中的CSS规则
混合器中不仅可以包含属性也可以包含css规则包含选择器和选择器中的属性如下代码:
mixin no-bullets {list-style: none;li {list-style-image: none;list-style-type: none;margin-left: 0px;}
}当一个包含css规则的混合器通过include包含在一个父规则中时在混合器中的规则最终会生成父规则中的嵌套规则。举个例子看看下边的sass代码这个例子中使用了no-bullets这个混合器:
ul.plain {color: #444;include no-bullets;
}sass的include指令会将引入混合器的那行代码替换成混合器里边的内容。最终上边的例子如下代码:
ul.plain {color: #444;list-style: none;
}
ul.plain li {list-style-image: none;list-style-type: none;margin-left: 0px;
}混合器中的规则甚至可以使用sass的父选择器标识符。使用起来跟不用混合器时一样sass解开嵌套规则时用父规则中的选择器替代。
如果一个混合器只包含css规则不包含属性那么这个混合器就可以在文档的顶部调用写在所有的css规则之外。如果你只是为自己写一些混合器这并没有什么大的用途但是当你使用一个类似于Compass的库时你会发现这是提供样式的好方法原因在于你可以选择是否使用这些样式。
接下来你将学习如何通过给混合器传参数来让混合器变得更加灵活和可重用。
给混合器传参
混合器并不一定总得生成相同的样式。可以通过在include混合器时给混合器传参来定制混合器生成的精确样式。当include混合器时参数其实就是可以赋值给css属性值的变量。如果你写过JavaScript这种方式跟JavaScript的function很像:
mixin link-colors($normal, $hover, $visited) {color: $normal;:hover { color: $hover; }:visited { color: $visited; }
}当混合器被include时你可以把它当作一个css函数来传参。如果你像下边这样写:
a {include link-colors(blue, red, green);
}//Sass最终生成的是:a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }当你include混合器时有时候可能会很难区分每个参数是什么意思参数之间是一个什么样的顺序。为了解决这个问题sass允许通过语法$name: value的形式指定每个参数的值。这种形式的传参参数顺序就不必再在乎了只需要保证没有漏掉参数即可:
a {include link-colors($normal: blue,$visited: green,$hover: red);
}尽管给混合器加参数来实现定制很好但是有时有些参数我们没有定制的需要这时候也需要赋值一个变量就变成很痛苦的事情了。所以sass允许混合器声明时给参数赋默认值。
默认参数值
为了在include混合器时不必传入所有的参数我们可以给参数指定一个默认值。参数默认值使用$name: default-value的声明形式默认值可以是任何有效的css属性值甚至是其他参数的引用如下代码:
mixin link-colors($normal,$hover: $normal,$visited: $normal)
{color: $normal;:hover { color: $hover; }:visited { color: $visited; }
}如果像下边这样调用:include link-colors(red) $hover和$visited也会被自动赋值为red。
混合器只是sass样式重用特性中的一个。我们已经了解到混合器主要用于样式展示层的重用如果你想重用语义化的类呢这就涉及sass的另一个重要的重用特性:选择器继承。
后言 创作不易要是本文章对广大读者有那么一点点帮助 不妨三连支持一下您的鼓励就是博主创作的动力
