深度了解bootstrap源码之sass篇(二)

前言

这一章主要学习_variables.scss。目的是学习优秀框架的变量声明方式及结构。所有变量声明的方式决定整体架构的风格。直接决定了UI组件的编写规划,贯穿整体,非常重要。最先了解变量有助于后面UI组件的研究。

变量声明方式

  • 变量命名规范
    所有变量声明是以描述 - 场景 - 尺寸 - 基线从左至右的先后顺 序决定。
    例如:
    变量$alert-success-bg (框架警示框组件没有大小尺寸)
    alert:警示框
    success:场景为成功时
    bg:背景色

    再举个栗子,变量:$padding-large-vertical
    padding:内边距
    large:大尺寸
    vertical:基线(y轴,代表padding-top和padding-bottom)

结构

  • 全局属性:公共属性的变量,用于组件全局属性的变量。
  • 组件变量块:公共代码块所需要的属性变量,尺寸和场景的变量。
    以下是我画的结构图:
    sass架构示意图
    sass架构示意图

以上包含了_variables全部变量属性,以及结构说明。
注:

  • 鼠标行为:link,hover,active
  • 鼠标点击:active
  • 鼠标悬停:hover
  • 其它:暂不明