开发一个自己的 CSS 框架（二）

testHs 发布于2019-08-30 15:54 / 786人阅读

摘要：还有另外一种继承。区块间隔辅助类内边距与外边距居中辅助类一个是基于居中，一个是基于居中，居中样式必须放在父类上。

这一期我们来添加按钮的图标，与常用的附加类，附加类指的是修改文字颜色、背景颜色，边框等等。

修改 src/button.sass 给图标与文字之间添加一些间距。

</>复制代码 
// 图标兼容
.btn
  i.icon
    display: inline-block
    width: .9rem
    &.right
      padding-left: .5rem
    &.left
      padding-right: .3rem
  &.large i.icon
    &.right
      padding-left: .7rem
    &.left
      padding-right: 1.3rem

然后添加图标，这里我们直接使用 ionic 提供的图标。

在 html 导入

</>复制代码

在这里可以找到文档 https://ionicons.com/usage ，然后我们像这样去使用它。

</>复制代码 
   删除文章
  删除文章

添加颜色辅助类

定义了 2个数组，从数组里面取元素的时候用 nth 方法，through 可以构造一个区间，length 方法可以取到数组长度，其实这里用 dict 字典会更好，只不过为了让大家学到更多的知识点，所以用了 @for 循环的方式。text 修改的是文字颜色，bg 修改的是背景颜色。

</>复制代码 
$colors: $dark, $light, $gray, $blue, $deep-blue, $red, $yellow, $green
$names: "dark", "light", "gray", "blue", "deep-blue", "red", "yellow", "green"
@for $i from 1 through length($colors)
  .text-#{nth($names, $i)}
    color: nth($colors, $i)
  .bg-#{nth($names, $i)}
    background: nth($colors, $i)

添加清浮动辅助类

以 = 开头的是一段 mixin，即可混合对象，它表示一个可复用的一个函数，它可以接受参数，这里因为没有参数，所以可以省略。

</>复制代码 
=clearfix
  &::after
    content: " "
    display: table
    clear: both
    
.clearfix
  +clearfix

还有另外一种 @extend 继承。

</>复制代码 
%message-shared
  border: 1px solid #ccc
  padding: 10px
  color: #333
.message
  @extend %message-shared
.success
  @extend %message-shared
  border-color: green

会编译成，这样表示选择器的复用，多个选择器应用同一个样式。

</>复制代码 
.message, .success {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}
.success {
  border-color: green;
}

文字辅助类

文字对齐，文字大小，超出省略等等。

</>复制代码 
.text-right
  text-aligh: right
.text-left
  text-align: left
.f8
  font-size: .8rem
.f9
  font-size: .9rem
.f1
  font-size: 1rem
.f12
  font-size: 1.2rem
.f14
  font-size: 1.4rem
.text-ellipsis
  white-space: nowrap
  overflow: hidden
  text-overflow: ellipsis

区块间隔辅助类

内边距与外边距

</>复制代码 
.p1rem
  padding: 1rem
.m1rem
  margin: 1rem
.p51rem
  padding: .5rem 1rem
.m51rem
  margin: .5rem 1rem

居中辅助类

一个是基于 absolute 居中，一个是基于 flex 居中，flex 居中样式必须放在父类上。

</>复制代码 
.ab-center
  position: absolute
  top: 50%
  left: 50%
  transform: translate(-50%,-50%)
.fx-center
  display: flex
  align-items: center
  justify-content: center

最终结果，果然彩虹。

</>复制代码 
最后我在说一下为什么要把这些辅助类提取出来？

首先是因为非常的常用，其次，是因为加入不提取出来，使用多带带的一个 class ，虽然这样非常的符合语义化，以及结构与样式分离，但是会导致样式非常多。

要么 css 多，要么 html class 多，两着之间总要有一个取舍，我们只能尽量找到一个平衡点。

所有代码都已完成查看 https://github.com/MiYogurt/N... 获取源码。

扫描下面二维码，关注微信公众号，每周免费获取精品前端小课连载，每周更新，还在等什么？赶快关注吧。

云服务器 GPU云服务器怎么搭建一个自己的视频网站如何搭建一个自己的服务器如何搞一个自己的hyp加速专线开发框架的搭建

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

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

前端资源系列（4）-前端学习资源分享&前端面试资源汇总

摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

princekin 2019-08-20 11:28 评论0 收藏0
关于BOOTSTRAP的整理和理解

摘要：规范名称定义，便于维护。譬如关于的定义在格式化的中会声明为，而在基本样式的中又可能会声明所以在中会出现多次定义。尽量减少连接数和的大小。基于版本的使用目前使用较广的是版本和，其中的最新版本是的最新版本。随着CSS3和HTML5的流行，我们的WEB页面不仅需要更人性化的设计理念，而且需要更酷的页面特效和用户体验。作为开发者，我们需要了解一些宝贵的CSS UI开源框架资源，它们可以帮助我...

amc 2019-08-29 16:10 评论0 收藏0
关于BOOTSTRAP的整理和理解

摘要：规范名称定义，便于维护。譬如关于的定义在格式化的中会声明为，而在基本样式的中又可能会声明所以在中会出现多次定义。尽量减少连接数和的大小。基于版本的使用目前使用较广的是版本和，其中的最新版本是的最新版本。随着CSS3和HTML5的流行，我们的WEB页面不仅需要更人性化的设计理念，而且需要更酷的页面特效和用户体验。作为开发者，我们需要了解一些宝贵的CSS UI开源框架资源，它们可以帮助我...

Tony_Zby 2019-07-01 10:23 评论0 收藏0
关于BOOTSTRAP的整理和理解

摘要：规范名称定义，便于维护。譬如关于的定义在格式化的中会声明为，而在基本样式的中又可能会声明所以在中会出现多次定义。尽量减少连接数和的大小。基于版本的使用目前使用较广的是版本和，其中的最新版本是的最新版本。随着CSS3和HTML5的流行，我们的WEB页面不仅需要更人性化的设计理念，而且需要更酷的页面特效和用户体验。作为开发者，我们需要了解一些宝贵的CSS UI开源框架资源，它们可以帮助我...

zeyu 2019-08-02 11:03 评论0 收藏0
PHP程序员学习路线

摘要：第一阶段基础阶段基础程序员重点把搞熟练核心是安装配置基本操作目标能够完成基本的系统安装，简单配置维护能够做基本的简单系统的开发能够在中型系统中支持某个功能模块的开发。本项不做重点学习，除非对前端有兴趣。第一阶段：基础阶段（基础PHP程序员）重点：把LNMP搞熟练（核心是安装配置基本操作）目标：能够完成基本的LNMP系统安装，简单配置维护；能够做基本的简单系统的PHP开发；能够在P...

genedna 2019-06-27 16:06 评论0 收藏0