Sass之混合宏、继承、占位符

Stella981
• 阅读 703

  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 调用的占位符,编译出来的代码会将相同的代码合并在一起。

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

    Sass之混合宏、继承、占位符

  建议:

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

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

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
CuterCorley CuterCorley
3年前
C语言基础习题50例(十)46-50
知足常足,终身不辱。月圆缺,水满溢,事情到了极致一定会遭受祸患,只有懂得知足,才是富足。习题46宏define命令练习。实现思路:宏通过define命令定义,分为无参宏和带参宏,可以分别进行测试。这只是一种简单的字符串代换。代码如下:cinclude<stdio.hdefineTRUE1defineFALSE0
CuterCorley CuterCorley
3年前
C语言入门系列之9.预处理
在之前,已多次使用过以号开头的预处理命令,如包含命令include<stdio.h、宏定义命令definePI3.1415926535等。在源程序中这些命令都放在函数之外,而且一般都放在源文件的前面,它们称为预处理部分。一、无参宏定义1.基本使用无参宏的宏名后不带参数。其定义的一般形式为:cdefine标识符
Stella981 Stella981
2年前
Sass
嵌套规则(NestedRules)Sass允许将一套CSS样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器mainp{color:00ff00;width:97%;.redbox{
Wesley13 Wesley13
2年前
C语言宏定义中#用法
宏中""和""的用法一、一般用法我们使用把宏参数变为一个字符串,用把两个宏参数贴合在一起.用法:#include<cstdio#include<climitsusing namespace std;define STR(s)     sdefine CONS(a,b)  int
Stella981 Stella981
2年前
Sass 带参混合
本节我们来学习带参混合,Sass中混合可以接受参数,我们可以通过使用@include调用混合时给混合传参,来定义混合生成的精确样式。给混合传参混合可以用SassScript值作为参数,给定的参数被包括在混合中并且作为为变量提供给混合,既然是作为变量,那么定义参数时,参数名前面需要加一个$符号。当我们定义一个带参
Python进阶者 Python进阶者
8个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这