compass tables 表格 表格常见样式[Sass和compass学习笔记]

简介: demo 源码 地址 https://github.com/qqqzhch/webfans compass  的表格提供了集中常见样式 表格边框 outer-table-borders($width, $color)  控制外边边框的尺寸和颜色 inner-table-borders($width, $color) 控制里面边框的尺寸和颜色 例如 .

demo 源码 地址 https://github.com/qqqzhch/webfans

compass  的表格提供了集中常见样式

表格边框

outer-table-borders($width, $color)  控制外边边框的尺寸和颜色

inner-table-borders($width, $color) 控制里面边框的尺寸和颜色

例如

.table1{
 table {
    @include inner-table-borders(1px, #7a98c6);
    @include outer-table-borders(2px);
  }
}
image

 

最外边行列(top left)字体

table-scaffolding

例如

.table2{
 table {
  @include table-scaffolding;
  }
}

 

image

表格行列颜色

alternating-rows-and-columns($even-row-color, $odd-row-color, $dark-intersection, $header-color, $footer-color)

参数分别为 偶数行颜色、奇数行颜色,交叉行颜色,头部颜色,底部颜色

例如

.table3{
 table {
 $table-color: #7a98c6;
  @include alternating-rows-and-columns($table-color, adjust-hue($table-color, -120deg), #222222);
  }
}

image

test
相关文章
|
7月前
|
机器学习/深度学习 存储 人工智能
MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
MNN-LLM App 是阿里巴巴基于 MNN-LLM 框架开发的 Android 应用,支持多模态交互、多种主流模型选择、离线运行及性能优化。
4939 22
MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
在Linux中,如何进行数据恢复?
在Linux中,如何进行数据恢复?
|
关系型数据库 MySQL Shell
Shell自动化脚本备份MySQL数据库(工作可直接使用)
Shell自动化脚本备份MySQL数据库(工作可直接使用)
369 0
|
搜索推荐 算法
B站被删除的视频,该如何找回来?
B站被删除的视频,该如何找回来?
|
分布式计算 Spark
《Sparklint a Tool for Identifying and Tuning Inefficient Spark Jobs Across Your Cluster》电子版地址
Sparklint a Tool for Identifying and Tuning Inefficient Spark Jobs Across Your Cluster
142 0
《Sparklint a Tool for Identifying and Tuning Inefficient Spark Jobs Across Your Cluster》电子版地址
|
9天前
|
人工智能 运维 安全
|
7天前
|
人工智能 异构计算
敬请锁定《C位面对面》,洞察通用计算如何在AI时代持续赋能企业创新,助力业务发展!
敬请锁定《C位面对面》,洞察通用计算如何在AI时代持续赋能企业创新,助力业务发展!
|
8天前
|
机器学习/深度学习 人工智能 自然语言处理
B站开源IndexTTS2,用极致表现力颠覆听觉体验
在语音合成技术不断演进的背景下,早期版本的IndexTTS虽然在多场景应用中展现出良好的表现,但在情感表达的细腻度与时长控制的精准性方面仍存在提升空间。为了解决这些问题,并进一步推动零样本语音合成在实际场景中的落地能力,B站语音团队对模型架构与训练策略进行了深度优化,推出了全新一代语音合成模型——IndexTTS2 。
668 23
|
7天前
|
人工智能 测试技术 API
智能体(AI Agent)搭建全攻略:从概念到实践的终极指南
在人工智能浪潮中,智能体(AI Agent)正成为变革性技术。它们具备自主决策、环境感知、任务执行等能力,广泛应用于日常任务与商业流程。本文详解智能体概念、架构及七步搭建指南,助你打造专属智能体,迎接智能自动化新时代。