CSS外挂：Sass 之混合宏(@mixin)、继承(@extend)、占位符(%placehold

or0fun 发布于2019-08-30 12:54 / 1948人阅读

摘要：普遍情况下这仨在实际项目中用得还是比较多的，玩起来吧混合宏如果你的代码块中涉及到变量，建议使用混合宏来创建相同的代码块。不足如果在样式文件中调用同一个混合宏，会产生多个对应的样式代码，造成代码的冗余。

学习Sass无非就是想高效的、面向对象编写CSS，Sass中的@-Rules也是重要的一部分。
普遍情况下这仨在实际项目中用得还是比较多的，玩起来吧！

1. 混合宏@mixin

如果你的代码块中涉及到变量，建议使用混合宏来创建相同的代码块。
特点：可传参。
不足：如果在样式文件中调用同一个混合宏，会产生多个对应的样式代码，造成代码的冗余。

SCSS：

.fl{
  @include float(left)
  div{
    @include float(left)
  }
}
.fr{
  @include float(right)
}

实际生成的CSS：

.fl { float: left; }
.fl div { float: left; }
.fr { float: right; }

而我想要的是这样的CSS：

.fl, .fl div { float: left; }
.fr { float: right; }
//相同的`CSS`不会合并...看来"你"也就只有传参好使了！

SCSS：

@mixin br3{ /* 没有传参 */
    border-radius: 3px;
}
@mixin br4($br4){ /* 传一个不带值的参数 */
    border-radius: $br4;
}
@mixin br6($br6: 6px){ /* 传一个带值的参数 */
      border-radius: $br6;
}
@mixin position-center($width, $height){ /* 传多个参数 */
    width: $width;
    height: $height;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: (-($height)/2) 0 0 (-($width)/2);    
}
div{
    @include br4(4px); /* 调用混合宏 */
    @include br3();   /* 没有传值3px */
    @include br6();   /* 如果不传值就是6px,传值会覆盖原始值 */
}
.pos-center{
    @include position-center(600px, 300px);
}

2. 继承@extend()

如果你的代码块不需要专任何变量参数，而且有一个基类已在文件中存在，那么建议使用继承。
不足：如果是类(.class)，不管有没有调用(@extend)，在编译的时候，都会生成对应的CSS。

.db{ display:block; }
div{ @extend .db }
生成的代码：
.db, div{ display:block; } /* .db也生成出来 */

SCSS：

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

CSS：

/* 生成后的代码 */
.btn, .box {  -webkit-border-radius: 3px;  border-radius: 3px; }
.box { margin-bottom: 5px; }

3. 占坑符%placeholder

占坑和继承基本类似，唯一不同的是，相同的生成CSS块并没有在类中存在，而是额外声明。
如果不调用已声明的占位符，将不会产生任何CSS。
如果在不同选择器调用占位符，那么编译出来CSS将会把相同的代码合并在一起。
不足：就是不能传参啦！个人觉得%placeholder优于@extend。

SCSS：

%mt15 {
  margin-top: 15px;
}
%pt15{
  padding-top: 15px;
}

.btn6 {
  @extend %mt15;
  @extend %pt15;
}
.block {
  //@extend .btn6    
  @extend %mt15;
  @extend %pt15;
}

CSS：

/* 生成的代码 */
.btn6, .block { margin-top: 15px; }
.btn6, .block { padding-top: 15px; }
/* 然而不会和已有代码合并，倒是合并啊 */

4. Reference API

SASS_REFERENCE — Sass Documentation #Directives

注：为了第一篇文章发布成功，回头整理整理SASS。
如有不正之处，欢迎指正。

专线服务私有云占位符 asp占位符 php 占位符 python 占位符

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115150.html

css预编译--sass基础篇

摘要：变量声明和调用这是的编程元素基础之一。如下在最外层声明的是全局变量，全局范围内可以调用，在中声明的是的局部变量，只在内部内进行调用。生成的如下上面的内容就是的基础篇，进阶篇的话会整理一下函数和方法规则相关的东西。 sass起源和简介 css 其实不是一门编程语言， css 全称 Cascading Style Sheets (层叠样式表)是一种用来表现HTML（标准通用标记语言的一个应...

keithyau 2019-08-29 15:23 评论0 收藏0
vue入门文章

摘要：本来想自己写一篇关于入门的文章。后面可能在这篇文章基础上，有所内容的增加。预处理器定义了一种新的专门的编程语言，编译后成正常的文件。本来想自己写一篇关于vue入门的文章。但是看到链接的文章后，觉得写得太详细了，实在有保存下来的必要。后面可能在这篇文章基础上，有所内容的增加。 CSS预处理器定义了一种新的专门的编程语言，编译后成正常的CSS文件。为CSS增加一些编程的特性，无需考虑浏...

seanHai 2019-08-29 17:06 评论0 收藏0
SASS详解

摘要：以前看到之类的工具觉得应该比较难，今天接触了之后发现挺好用的，主要是方便了的编写。具体可以看慕课网教程编译方法在命令行输入编译单个文件编译整个文件夹到文件夹也就是这样的语法下文中我都这样写。这里贴一张慕课网拿到的表格。以前看到SASS之类的工具觉得应该比较难，今天接触了之后发现挺好用的，主要是方便了CSS的编写。在编写比较大的项目的时候，由于内容很多，因此样式表也会比较繁杂，如果要修...

余学文 2019-08-29 11:29 评论0 收藏0
scss学习

摘要：和的区别文件扩展名不同和是以严格缩进式语法规则来书写的，不带大括号和分号而的语法和书写语法类似。单行注释，只保留在源文件中，编译后被省略。在后面加一个感叹号，表示这是重要注释。重要声明继承允许一个选择器，继承另一个选择器，使用命令。 1. SASS和SCSS的区别文件扩展名不同：.sass和.scss； SASS是以严格缩进式语法规则来书写的，不带大括号和分号；而SCSS的语法和C...

cpupro 2019-08-02 16:00 评论0 收藏0
scss学习

摘要：和的区别文件扩展名不同和是以严格缩进式语法规则来书写的，不带大括号和分号而的语法和书写语法类似。单行注释，只保留在源文件中，编译后被省略。在后面加一个感叹号，表示这是重要注释。重要声明继承允许一个选择器，继承另一个选择器，使用命令。 1. SASS和SCSS的区别文件扩展名不同：.sass和.scss； SASS是以严格缩进式语法规则来书写的，不带大括号和分号；而SCSS的语法和C...

wzyplus 2019-08-29 14:01 评论0 收藏0