特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
在《SASS基础教程——SASS基本语法与特性》文中主要介绍了SASS的基本语法和特性。简单的知道SASS具有四个基本特性:变量Variables、嵌套Nesting、混合Mixins和继承Selector Inheritance。其实这四种特性中的嵌套、混合和继承是有一种千丝万缕的关系,甚至会让初学者理不清,这也从侧面也说明了这三者在SASS的重要性。那么今天这篇教程,我们将主要介绍和探讨嵌套、混合、继承三者之间的关系,以及各自的优缺点。
回顾嵌套、混合和继承特性
如果您没有阅读过《SASS基础教程——SASS基本语法与特性》一文,并不要紧。我们一起简单回顾一下SASS中的嵌套Nesting、混合Mixins和继承Selector Inheritance。
嵌套Nesting
仅从字面上理解,嵌套就是一层一层往里套。在DOM
,元素与元素之间除了存在兄弟间关系之外,还存有一种父级(祖级)关系。在CSS中是依靠选择器层层深入或者添加额外的类名或ID来控制。那么在SASS中添加了对DOM的嵌套功能。即,元素的所有后代元素都可以放置在父元素之中,如:
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Sass</a></li>
<li><a href="#">Less</a></li>
<li><a href="#">Haml</a></li>
</ul>
</nav>
我们给上面的结构画一个DOM树:
为了实现下图的效果:
我们的样式大致如下:
nav {
display: block;
}
nav ul {
margin: 50px auto;
width: 800px;
width: -moz-fit-content;
width: -webkit-fit-content;
width: -o-fit-content;
width: fit-content;
padding: 0;
list-style: none;
}
nav ul:before,
nav ul:after{
content:"";
display: table;
}
nav ul:after {
clear:both;
overflow: hidden;
}
nav ul li {
background: #34495e;
float: left;
-webkit-transform: skewX(25deg);
-moz-transform: skewX(25deg);
-o-transform: skewX(25deg);
-ms-transform: skewX(25deg);
transform: skewX(25deg);
}
nav ul li a {
display: block;
color: #fff;
text-transform: uppercase;
text-decoration: none;
font-family: Arial,Helvetica;
font-size: 14px;
-webkit-transform: skewX(-25deg);
-moz-transform: skewX(-25deg);
-o-transform: skewX(-25deg);
-ms-transform: skewX(-25deg);
transform: skewX(-25deg);
padding: 1em 2em;
}
nav li:hover {
background: #e74c3c;
}
如果在SASS中写,那就要简单得多了,我们可以使用SASS的嵌套来处理:
nav {
display: block;
ul {
margin: 50px auto;
width: 800px;
width: -moz-fit-content;
width: -webkit-fit-content;
width: -o-fit-content;
width: fit-content;
padding: 0;
list-style: none;
&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
overflow: hidden;
}
li {
background: #34495e;
float: left;
-webkit-transform: skewX(25deg);
-moz-transform: skewX(25deg);
-o-transform: skewX(25deg);
-ms-transform: skewX(25deg);
transform: skewX(25deg);
&:hover {
background: #e74c3c;
}
a {
display: block;
color: #fff;
text-transform: uppercase;
text-decoration: none;
font-family: Arial,Helvetica;
font-size: 14px;
padding: 1em 2em;
-webkit-transform: skewX(-25deg);
-moz-transform: skewX(-25deg);
-o-transform: skewX(-25deg);
-ms-transform: skewX(-25deg);
transform: skewX(-25deg);
}
}
}
}
把上面的SASS代码编译完成后,编译出来的CSS和前面展示的CSS一样。
SASS除了能进行结构嵌套之处,还可以对属性进行嵌套,例如上面的示例之中:
a {
…
text-transform: uppercase;
text-decoration: none;
font-family: Arial,Helvetica;
font-size: 14px;
...
}
我们可以将上面的SASS代码进行属性嵌套:
a {
…
text: {
transform: uppercase;
decoration: none;
}
font:{
family: Arial,Helvetica;
size: 14px;
}
...
}
这样的SASS代码并不完美,此处只是通过这样的一个小例,向大家演示SASS中的嵌套特性。
混合Mixins
Mixins是SASS最出名特色之一。他充许我们通过:
@mixin Mixins名称(参数:参数值){
/*公用样式*/
}
的方式将相同的样式风格定义成一个模块,然后在需要使用的地方通过@include
将@mixin
定义好的模块调用进来:
selector {
@includ Mixins名称(参数值);
}
Mixins最明显的用例就是用来处理CSS3属性前缀,回到我们上面的示例之中,我们在示例中使用了两个CSS3属性:
nav ul {
…
width: -moz-fit-content;
width: -webkit-fit-content;
width: -o-fit-content;
width: fit-content;
…
}
nav ul li {
…
-webkit-transform: skewX(25deg);
-moz-transform: skewX(25deg);
-o-transform: skewX(25deg);
-ms-transform: skewX(25deg);
transform: skewX(25deg);
...
}
nav ul li a {
…
-webkit-transform: skewX(-25deg);
-moz-transform: skewX(-25deg);
-o-transform: skewX(-25deg);
-ms-transform: skewX(-25deg);
transform: skewX(-25deg);
…
}
针对上面的两个CSS3属性,我们可以定义两个Mixins:
//define fit-content
@mixin fit-content() {
width: -webkit-fit-content;
width: -moz-fit-content;
width: -o-fit-content;
width: -ms-fit-content;
width: fit-content;
}
//define transform skewX()
@mixin skewX($degrees){
-webkit-transform: skewX($degrees);
-moz-transform: skewX($degrees);
-o-transform: skewX($degrees);
-ms-transform: skewX($degrees);
transform: skewX($degrees);
}
这个时候,我们只需要在对应的地方通过@include
调用即可:
nav {
display: block;
ul {
margin: 50px auto;
width: 800px;
@include fit-content();//调用fit-content()
padding: 0;
list-style: none;
&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
overflow: hidden;
}
li {
background: #34495e;
float: left;
@include skewX(25deg);//调用skewX(),并传参数值25deg
&:hover {
background: #e74c3c;
}
a {
display: block;
color: #fff;
text: {
transform: uppercase;
decoration: none;
}
font: {
family: Arial,Helvetica;
size: 14px;
}
padding: 1em 2em;
@include skewX(-25deg);//调用skewX(),并传参数值-25deg
}
}
}
}
这样编译出来的CSS和文章前头显示的CSS一模一样。
当然,上面定义的@mixin skewX()
并不是完美的,完美的可以参考一下:Bourbon或者Bootstrap SASS,此处仅做一下演示,详细使用与分析,将会放在CSS3的Mixins中介绍。
//Example: @include prefixer(border-radius, $radius, webkit spec);
//----------------------------------------
$prefix-for-webkit: true !default;
$prefix-for-mozilla: true !default;
$prefix-for-microsoft: true !default;
$prefix-for-opera: true !default;
$prefix-for-spec: true !default; // required for keyframe mixin
//prefixer
@mixin prefixer ($property, $value, $prefixes) {
@each $prefix in $prefixes {
@if $prefix == webkit and $prefix-for-webkit == true {
-webkit-#{$property}: $value;
}
@else if $prefix == moz and $prefix-for-mozilla == true {
-moz-#{$property}: $value;
}
@else if $prefix == ms and $prefix-for-microsoft == true {
-ms-#{$property}: $value;
}
@else if $prefix == o and $prefix-for-opera == true {
-o-#{$property}: $value;
}
如需转载,烦请注明出处:https://www.w3cplus.com/preprocessor/sass-basic-mixins-nesting-placeholders-extend.html
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!