【Sass】常用全局sass高级函数,可使用原子化CSS减轻代码量,方便快速开发

文章目录

  • 前言
  • 一、安装
  • 二、样式
    • custom.scss
    • flex.scss
    • color.scss
    • margin-padding.scss
    • orther
  • 总结


前言

提示:这里可以添加本文要记录的大概内容:

针对style的预编译器为scss

转载自git前端知识库
原博主是B站up程序员郑清,可以看他的v3教程巩固一下


常用flex和margin-padding

提示:以下是本篇文章正文内容,下面案例可供参考

一、安装

cnpm install sass --save-dev

二、样式

custom.scss

代码如下(示例):

// 图片大小
@each $key, $val in sm 50, base 100, lg 160 {// img-base.img-#{$key} {width: #{$val}px !important;height: #{$val}px !important;border-radius: $val * 0.1px;}
}// 文字超出?行溢出隐藏...  text-overflow-1
@for $i from 1 through 2 {.text-overflow-#{$i} {display: -webkit-box; /* 使用旧版WebKit内核布局盒模型 */-webkit-line-clamp: #{$i}; /* 限制文本显示的行数为2行 */-webkit-box-orient: vertical; /* 设置盒模型布局方向为垂直 */overflow: hidden; /* 超出部分隐藏 */text-overflow: ellipsis; /* 使用省略号表示被截断的部分 */// &:hover {//   white-space: normal; /* 显示全部 *///   overflow: visible; /* 取消超出隐藏 */// }}
}@each $key, $val in ('sm': 12px, 'base': 16px, 'lg': 20px) {// font-size-base.font-size-#{$key} {font-size: $val !important;}
}

flex.scss

代码如下(示例):

// flex布局 ********************************************
.flex {display: flex;
}
.flex-column {display: flex;flex-direction: column;
}
.flex-wrap {display: flex;flex-wrap: wrap; // 子元素换行
}
// .flex-1{flex:1}
@for $i from 1 through 6 {.flex-#{$i} {flex: #{$i};}
}
// 设置主轴方向 x y
$direction: (// 从左到右(默认值)'r': row,// 从右到左'rr': row-reverse,// 从上到下'c': column,// 从下到上'cr': column-reverse
);
// 主轴上子元素排列方式
$justify: (// 从头部开始,如果主轴是x轴,则从左到右(默认值)'start': flex-start,// 在主轴居中对齐(如果主轴是 x 轴则水平居中)'center': center,// 从尾部开始排列'end': flex-end,// 先两边贴边,再平分剩余空间☆☆☆'between': space-between,// 平分剩余空间'around': space-around
);
// 侧轴上子元素排列方式
$align: (// 从上到下'start': flex-start,// 挤在一起居中(垂直居中)'center': center,// 从下到上'end': flex-end,// 拉伸(默认值)'stretch': stretch
);@each $alignKey, $alignVal in $align {@each $justifyKey, $justifyVal in $justify {@each $directionKey, $directionVal in $direction {// flex-start-center.flex-#{$justifyKey}-#{$alignKey} {display: flex;justify-content: #{$justifyVal};align-items: #{$alignVal};}// flex-r-start-center.flex-#{$directionKey}-#{$justifyKey}-#{$alignKey} {display: flex;flex-direction: #{$directionVal};justify-content: #{$justifyVal};align-items: #{$alignVal};}}}
}

color.scss

// 循环实现动态样式
// #{xxx}:字符串  $xx:数值
// 颜色 ********************************************
$color-primary: #00aaff;
$colors: ('white': #fff,'black': #000,'primary': #00aaff,'success': #4cd964,'warning': #f0ad4e,'error': #999,'disable': #c0c0c0,// 辅助灰色,如加载更多的提示信息'grey': #999,// 浅灰色'lightgrey': #f6f6f6,'placeholder': #808080,'red': #ff0000,// 点击状态颜色'hover': #f1f1f1,// 遮罩颜色'mask': rgba(0, 0, 0, 0.4),
);
@each $key, $value in $colors {.text-color-#{$key} {color: $value;}.bg-color-#{$key} {background-color: $value;}
}

margin-padding.scss

如果是小程序, 把px改为rpx就好了
用法:m-r-10
m-y-0

// 内外边距 ********************************************
// 类型
$spacing-types: (m: margin,p: padding,
);
// 位置
$spacing-directions: (t: top,b: bottom,l: left,r: right,
);
$spacing-base-size: 1px; // 基数
// 循环出 margin 与 padding 的各类值
@each $typeKey, $type in $spacing-types {@for $i from 0 through 300 {// 如果能够被 2 整除,将应用以下样式@if ($i % 2 == 0) {// m-10{margin:10px} || p-30{padding:30px}.#{$typeKey}-#{$i} {#{$type}: $i * $spacing-base-size !important;}// m-x-10{marfin-left:10px;marfin-right:10px} || p-x-30{padding-left:30px;padding-right:30px;}.#{$typeKey}-x-#{$i} {#{$type}-left: $i * $spacing-base-size;#{$type}-right: $i * $spacing-base-size;}// m-y-10{marfin-top:10px;marfin-bottom:10px} || p-y-30{padding-top:30px;padding-bottom:30px;}.#{$typeKey}-y-#{$i} {#{$type}-top: $i * $spacing-base-size;#{$type}-bottom: $i * $spacing-base-size;}// m-t-10{margin-top: 10px} || m-l-10{margin-left:10px} || p-r-10{padding-right:10px} || p-b-10{paddding-bottom:10px}@each $directionsKey, $directions in $spacing-directions {.#{$typeKey}-#{$directionsKey}-#{$i} {#{$type}-#{$directions}: $i * $spacing-base-size !important;}}}}
}

orther

// 文字水平对齐方式 ********************************************
@each $var in (left, center, right) {.text-#{$var} {text-align: $var;}
}// ********************************************
.overflow-x-scroll {overflow-x: scroll; // 水平方向超出滚动
}
.overflow-y-scroll {overflow-y: scroll; // 垂直方向超出滚动
}
.overflow-y-auto {overflow-y: auto; // 垂直方向高度超出后才显示滚动条
}
.overflow-x-hidden {overflow-x: hidden;
}// 字体 ********************************************
.font-bold {font-weight: bold;
}// 边框颜色 ********************************************
// 类名  .border-b
// $orientation: (
//   t: top,
//   b: bottom,
//   l: left,
//   r: right,
// );
// @each $orientationKey, $orientationVal in $orientation {
//   .border-#{$orientationKey} {
//     border-#{$orientationVal}: 1px solid #e4e4ee;
//   }
// }// *******************************************************
// 外边框圆角
@for $i from 1 through 10 {// 如果能够被 2 整除,将应用以下样式@if ($i % 2 == 0) {// b-rd-6.b-rd-#{$i} {border-radius: #{$i}px;}}
}.w-full {width: 100%;
}
.h-full {height: 100%;
}// 宽高
@for $i from 0 through 500 {@each $key, $val in w width, h height, lh line-height {// 如果能够被 10 整除,将应用以下样式@if ($i % 10 == 0) {// w-20 || lh-100.#{$key}-#{$i} {#{$val}: 1px * $i;}}}
}.position-relative {position: relative; // 父:相
}
.position-absolute {position: absolute; // 子:绝
}// 元素显示模式 eg: display-inline-block
@each $val in block, inline, inline-block {.display-#{$val} {display: #{$val};}
}

总结

提示:这里对文章进行总结:
例如:以上就是今天要讲的内容,本文仅仅简单介绍了pandas的使用,而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/50859.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【云原生】Docker搭建知识库文档协作平台Confluence

目录 一、前言 二、企业级知识库文档工具部署形式 2.1 开源工具平台 2.1.1 开源工具优点 2.1.2 开源工具缺点 2.2 私有化部署 2.3 混合部署 三、如何选择合适的知识库平台工具 3.1 明确目标和需求 3.2 选择合适的知识库平台工具 四、Confluence介绍 4.2 confluence特…

平面点云三角化边数与点的关系

欢迎关注更多精彩 关注我,学习常用算法与数据结构,一题多解,降维打击。 点云三角化定义 原文 说人话: 一个二维平面点集P三角化结果是一个满足以下条件的三角形集合: 1 所有三角形的并集刚好是P的凸包。 2 所有三角…

python3GUI--new音乐播放器!By:PyQt5(附下载地址)

文章目录 一.前言二.展示1.启动2.MV推荐3.专辑详情页4.歌手详情页5.搜索结果页6.歌曲播放页7.我喜欢歌曲页8.我喜欢专辑页 三.思路&启发1.布局2.细节3.组件复用4.项目结构5.优化速度1.Nuitka1.显著提高性能:2.减小程序体积&am…

Java集合框架2024最通俗易懂(图片超全)

集合 1.1、定义 集合就是类型统一的数据组合而成的数据结构,该数据结构可以任意的改变长度。 1.3、Set Set数据存储结构,无序,且不可以重复,元素可以为null,但是也只能出现一次,如下图: 1.3.1、HashSe…

WEB渗透Web突破篇-SQL注入(Oracle)

版本 SELECT user FROM dual UNION SELECT * FROM v$version数据库名 SELECT global_name FROM global_name; SELECT name FROM V$DATABASE; SELECT instance_name FROM V$INSTANCE; SELECT SYS.DATABASE_NAME FROM DUAL;列库 SELECT DISTINCT owner FROM all_tables;列表 …

rag输出了幻觉怎么办

首先,幻觉也分类型。 一个是事实性幻觉,就是LLM凭借自身能力回答问题,但是这个回答是编的,也可能有正确答案但是LLM输出错了。总之这是LLM自身原因。 另一个是忠实性幻觉,就是你要求LLM根据你给的材料给出答案&#xf…

Scikit-learn提供了哪些机器学习算法以及如何使用Scikit-learn进行模型训练和评估

Scikit-learn库的使用 一、Scikit-learn提供的机器学习算法 Scikit-learn(通常简称为sklearn)是一个广泛使用的Python机器学习库,它提供了多种用于数据挖掘和数据分析的算法。Scikit-learn支持的机器学习算法可以大致分为以下几类&#xff…

[240726] Mistral AI 发布新一代旗舰模型 | Node.js 合并 TypeScript 文件执行提案

目录 Mistral AI 发布新一代旗舰模型:Mistral Large 2Node.js 合并 TypeScript 文件执行提案:--experimental-strip-types Mistral AI 发布新一代旗舰模型:Mistral Large 2 Mistral AI 宣布推出新一代旗舰模型 Mistral Large 2,该…

算法-----递归~~搜索~~回溯(宏观认识)

目录 1.什么是递归 1.1二叉树的遍历 1.2快速排序 1.3归并排序 2.为什么会用到递归 3.如何理解递归 4.如何写好一个递归 5.什么是搜索 5.1深度(dfs)优先遍历&优先搜索 5.2宽度(bfs)优先遍历&优先搜索 6.回溯 1.什…

Temu测评自养号如何做?三分钟带你入门!

环境系统 现在市场上很多的系统都是现成的或软件包,没有解决风控的能力,如果有需要建议大家自己学习一套技术,把技术掌握在自己手里,这样不会有依赖性 手机端环境:越狱后的ios指定版本手机可以一键新机的系统(参数调试)独享的家…

梧桐数据库:子查询优化技术

在数据库技术中,子查询是一个强大的工具,但不加优化的子查询可能会导致性能问题。优化子查询可以显著提升查询效率。以下是一些常见的子查询优化技术: 1. 使用连接(JOIN)替代子查询 1.1 基本原理 很多情况下&#x…

【NLP自然语言处理】为什么说BERT是bidirectional

首先,来看一下Transformer架构图: 我们知道,Bert设计时主要采用的是Transformer编码器部分,要论述Bert为啥是双向的,我想从编码器和解码器的注意力机制来阐述。 在看这篇博客前,需要对Transformer有一定的…

[C++] vector入门迭代器失效问题详解

文章目录 vector介绍**vector iterator 的使用** vector迭代器失效问题由扩容或改变数据引起的迭代器失效reserve的实现(野指针)insert实现(迭代器位置意义改变)insert修改后失效的迭代器 it迭代器失效 erase后的问题总结&#xf…

nextjs当后端使-读取excel文件

目前nextjs有种php的感觉,现在的需求是读取excel文件,入数据库,拆分出读取excel的代码如下: import { NextRequest } from "next/server"; import { join } from "path"; import { readFile } from "fs…

MyBatis-Plus的基本使用(一)

目录 前言 特性 MyBatis-Plus入门案例 常用注解 小结 前言 这篇文章主要来学习MyBatis-Plus这个非常强大的框架. 在学习MyBatis-Plus之前,需要有MyBatis的学习基础.因为MyBatis -Plus 是一个 MyBatis 的增强工具,在 MyBatis 的基础上只做增强不做改变&#x…

spring —— 全注解实现事务管理器

全注解实现事务管理,就是取消 spring-config.xml 文件,而将配置信息在配置类中实现。 配置类: package com.spring.book;import com.alibaba.druid.pool.DruidDataSource; import org.springframework.context.annotation.Bean; import org…

中英双语简单介绍:字典学习(Dictionary Learning)

中文版 字典学习(Dictionary Learning)是一种机器学习技术,用于从数据中学习一组基元(称为“字典”),以便能够用这些基元来表示数据。该方法特别适用于稀疏表示(Sparse Representation&#xf…

Prometheus通过注册中心nacos、Eureka 实现服务注册自动发现监控

Prometheus通过注册中心nacos、Eureka 实现服务注册自动发现监控 Prometheus通过Eureka 实现服务注册自动发现监控 使用 Prometheus 中的 Eureka (Service Discover)SD 来使用 Eureka REST API 来查询抓取目标。 Prometheus 将定期检查 REST 端点并为每个应用程序实例创建一个…

环境激活的艺术:Conda激活命令全解析

🌐 环境激活的艺术:Conda激活命令全解析 Conda作为Python编程生态中一个不可或缺的包管理器和环境管理器,为开发者提供了一个强大的工具来创建、管理并隔离不同的工作环境。本文将详细解释如何在Conda中使用conda activate命令来激活环境&am…

【Java Bean 映射器】通过 MapStruct 和 BeanUtils 拷贝对象的区别

目录 👋前言 👀一、环境准备 🌱二、拷贝工具使用 2.1 BeanUtils 使用 2.2 MapStruct 使用 💞️三、对比 📫四、章末 👋前言 小伙伴们大家好,最近在一些技术文章中看到了开发时经常接触的对…