1、混合宏。  

  当样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无法达到我们目的了。这个时候混合宏就派上用场了。

  而使用混合宏时,首先要声明混合宏,而声明混合宏时有两种,不带参数混合宏和带参数混合宏两种。

  1.1 不带参数混合宏的声明要使用关键词@mixin。例如:  

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

  其中 @mixin 是用来声明混合宏的关键词,有点类似 CSS 中的 @media、@font-face 一样。border-radius 是混合宏的名称。大括号里面是复用的样式代码。

  例如在一个按钮里要调用上述那个不带参数混合宏时,可以这样使用。

button {
@include border-radius;
}

  

  1.2 带参数混合宏的声明又分为不带任何值的参数和带值的参数。例如:

    1.2.1带值的参数的混合宏声明

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

  在一个按钮中调用上述带值的参数的混合宏声明,可以这样使用

.btn {
@include border-radius;
} 

  同样的, 但有的时候,页面中有些元素的圆角值不一样,并非是上面的5px,那么可以随机给混合宏传值,如:

.btn {
@include border-radius(50%);
}

  

  1.2.2不带值的参数的混合宏声明

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

  调用不带值的参数的混合宏声明,可以这样做,如:

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

  

  2、继承

  在 Sass 中也具有继承一说,也是继承类中的样式代码块。在 Sass 中是通过关键词 “@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-primary, .btn-second {
border: 1px solid #ccc;
padding: 6px 10px;
font-size: 14px;
} .btn-primary {
background-color: #f36;
color: #fff;
} .btn-second {
background-clor: orange;
color: #fff;
}

  可以看出在 Sass 中的继承,可以继承类样式块中所有样式代码,而且编译出来的 CSS 会将选择器合并在一起,形成组合选择器。

  3、占位符%placeholder

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

%mt {
margin-top: 5px;
}
%pt{
padding-top: 5px;
}

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

//SCSS
%mt {
margin-top: 5px;
}
%pt{
padding-top: 5px;
} .btn {
@extend %mt;
@extend %pt;
} .block {
@extend %mt; span {
@extend %pt;
}
}

  编译出来的CSS为:

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

  从编译出来的 CSS 代码可以看出,通过 @extend 调用的占位符,编译出来的代码会将相同的代码合并在一起。

  

  然而有些时候我们就在纠结啥时候该用混合宏,啥时候用继承,啥时候用占位符呢?这里先来看个表格吧

    

    

  建议:

  1、如果代码块中涉及到变量,建议使用混合宏来创建相同的代码块。

  2、如果你的代码块不需要传任何变量参数,而且有一个基类已在文件中存在,那么建议使用 Sass 的继承

Sass之混合宏、继承、占位符的更多相关文章

  1. sass中 混合宏 VS 继承 VS 占位符 各自的使用时机和特点

    初学者都常常纠结于这个问题“什么时候用混合宏,什么时候用继承,什么时候使用占位符?”其实他们各有各的优点与缺点,先来看看他们使用效果: a) Sass 中的混合宏使用 举例代码见 2-24 行 编译出 ...

  2. css编译工具Sass中混合宏,继承,占位符分别在什么时候使用

    //SCSS中混合宏使用 @mixin mt($var){ margin-top: $var; } .block { @include mt(5px); span { display:block; @ ...

  3. sass 继承 占位符 %placeholder

    @extend //SCSS .btn { border: 1px solid #ccc; padding: 6px 10px; font-size: 14px; } .btn-primary { b ...

  4. Sass混合宏、继承、占位符

    混合宏-声明混合宏如果你的整个网站中有几处小样式类似,比如颜色,字体等,在 Sass 可以使用变量来统一处理,那么这种选择还是不错的.但当你的样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无 ...

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

    混合宏-声明混合宏如果你的整个网站中有几处小样式类似,比如颜色,字体等,在 Sass 可以使用变量来统一处理,那么这种选择还是不错的.但当你的样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无 ...

  6. sass---Sass混合宏、继承、占位符

    混合宏-声明混合宏如果你的整个网站中有几处小样式类似,比如颜色,字体等,在 Sass 可以使用变量来统一处理,那么这种选择还是不错的.但当你的样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无 ...

  7. [Sass]混合宏的参数

    [Sass]混合宏的参数--传一个不带值的参数 Sass 的混合宏有一个强大的功能,可以传参,那么在 Sass 中传参主要有以下几种情形: A) 传一个不带值的参数 在混合宏中,可以传一个不带任何值的 ...

  8. [Sass]混合宏

    [Sass]混合宏-声明混合宏 如果整个网站中有几处小样式类似,比如颜色,字体等,在 Sass 可以使用变量来统一处理,那么这种选择还是不错的.但当你的样式变得越来越复杂,需要重复使用大段的样式时,使 ...

  9. 详解scss的继承、占位符和混合宏

    1.继承和占位符 两者都是通过@extend来引用. 1.1 继承 一个已经存在的css样式类,可以被其他样式类继承. 例如,实现以下css样式: .btn, .btn--primary, .btn- ...

随机推荐

  1. css scroll bug

    滚动区域不能设置overflow var doc = $(document), win = $(window), h = $("#head"), b = $("#body ...

  2. Android 7.1 ActivityManagerService 屏幕旋转流程分析 (四)

    四.Activity的更新(旋转) sendNewConfiguration()会调用到ActivityManagerService的updateConfiguration()来update Conf ...

  3. 获取两个时间节点的月份列表&&每个月份的开始时间及结束时间

    //Q:从今天起之前五个月的列表 date_default_timezone_set('PRC'); $time=strtotime('-5 month'); //包含本月 $begin = strt ...

  4. Django__WSGI

    WEB应用的本质 : 1. 浏览器发送一个http请求 2. 服务器收到请求,生成一个html文档 3. 服务器把HTML文档作为HTTP响应的body发送给浏览器 4. 浏览器收到http响应,从h ...

  5. MySQL字符串相关函数学习一

    这里总结一下常用的或者有可能用到的一些字符串内建函数 ① ASCII() :返回字符的ASCII码 如果输入的不是一个字符而是一个字符串呢?ascii()会只取第一个字符作为计算的参数,如: ② CH ...

  6. Python day 7(2) 类和实例(1)

    一:面向对象编程 1  面向对象编程--Object Oriented Programming,简称OOP,是一种程序设计思想.OOP把对象作为程序的基本单元,一个对象包含了数据和操作数据的函数. 2 ...

  7. Web服务器(Apache)与Servlet容器(Tomcat)

    之前一直比较迷惑Apache与Tomcat的关系,通过查询资料,有所了解,现记录于此. Apache与Tomcat 两者定位:Apache是HTTP Web服务器,Tomcat是Web容器. 有一个非 ...

  8. JS中将一个值转换为字符串的3种方法

    1.value.toString() 2."" + value 3.String(value) 第一种方法存在的问题是,它不能把null和undefined转换为字符串.还有第二种 ...

  9. php 常量const

    常量使用关键词const修饰,一经定义,不能改变 常量的使用规则 定义后,应该马上赋初始值 不能用public.private.protected修饰 在本类,可用self::name  类名::na ...

  10. SpringCloud学习笔记(5)——Config

    参考Spring Cloud官方文档第4~10章 官网文档中所有示例中的配置都在git上 https://github.com/spring-cloud-samples/config-repo Par ...