Sass 总结

news2024/10/7 16:16:32

文章目录

  • Sass 总结
    • 概述
    • 编译
    • .scss 和 .sass
    • 变量
      • 数据类型
      • 属性值变量
      • 属性名变量
    • 嵌套规则
      • 基本嵌套
      • & 父选择器标识符
      • 嵌套属性
    • @import 导入
      • 导入Sass文件
      • 私有化
      • 导入原生CSS文件
    • @mixin 混合器
      • 无参数
      • 带参数
      • 命名参数
      • 关键字参数
      • 可变参数
      • @content 混入内容
    • @extend 继承
    • @media 媒体查询
    • 控制指令
      • @if
      • @for
      • @each
      • @while
    • @function 函数

Sass 总结

概述

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。

Sass世界上最成熟、稳定和强大的CSS扩展语言 | Sass中文网

编译

在VS Code中安装插件Live Sass Compiler，编写Sass文件时会自动编译为CSS文件。

在这里插入图片描述

.scss 和 .sass

Sass 有两种语法格式：

  • scss：这种格式仅在 CSS3 语法的基础上进行拓展，所有 CSS3 语法在 SCSS 中都是通用的，同时加入 Sass 的特色功能。以 .scss 作为拓展名。
  • sass：是早期的 Sass 语法格式，使用缩进格式，.sass 作为拓展名。

变量

数据类型

SassScript 支持 6 种主要的数据类型：

  • 数字，1, 2, 13, 10px
  • 字符串，有引号字符串与无引号字符串，"foo", 'bar', baz
  • 颜色，blue, #04a3f9, rgba(255,0,0,0.5)
  • 布尔型，true, false
  • 空值，null
  • 数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
  • maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)

属性值变量

用符号$声明变量，使用时用$变量。

$width: 100px;
$height: 100px;
$color: red;

.box {
  width: $width;
  height: $height;
  background-color: $color;
  margin:50px auto;
}

编译为：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 50px auto;
}

属性名变量

用符号$声明变量，使用时用#{$变量}。

$width: width;
$height: height;
$color: background-color;

.box {
  #{$width}: 100px;
  #{$height}: 100px;
  #{$color}: red;
  margin: 50px auto;
}

编译为：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 50px auto;
}

嵌套规则

基本嵌套

.header {
  border: 1px solid red;
  .title {
    font-size: 18px;
    color: blue;
  }
  nav {
    font-size: 14px;
    color: green;
  }
}

编译为：

.header {
  border: 1px solid red;
}
.header .title {
  font-size: 18px;
  color: blue;
}
.header nav {
  font-size: 14px;
  color: green;
}

& 父选择器标识符

a {
  color: red;
  &:visited {
    color: green;
  }
  &:hover {
    color: blue;
  }
  &:active {
    color: black;
  }
}

编译为：

a {
  color: red;
}
a:visited {
  color: green;
}
a:hover {
  color: blue;
}
a:active {
  color: black;
}

嵌套属性

方式一

.box {
  width: 100px;
  height: 100px;
  border: {
    style: solid;
    width: 1px;
    color: red;
  }
}

编译为：

.box {
  width: 100px;
  height: 100px;
  border-style: solid;
  border-width: 1px;
  border-color: red;
}

方式二

.box {
  width: 100px;
  height: 100px;
  border: 1px solid red {
    left-style: dashed;
    right: 0;
    top-color: green;
    bottom-width: 5px;
  }
}

编译为：

.box {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  border-left-style: dashed;
  border-right: 0;
  border-top-color: green;
  border-bottom-width: 5px;
}

@import 导入

导入Sass文件

使用@import导入Sass文件。

导入Sass文件时，可以省略.scss文件后缀。

// my-size.scss
$width: 200px;
$height: 100px;

// my-color.scss
$color: red;
$bg-color: blue;

@import "./my-size";
@import "./my-color";

.box {
  width: $width;
  height: $height;
  border: 10px solid $color;
  background-color: $bg-color;
}

编译为：

.box {
  width: 200px;
  height: 100px;
  border: 10px solid red;
  background-color: blue;
}

私有化

如果需要导入 SCSS 或者 Sass 文件，但又不希望将其编译为 CSS，只需要在文件名前添加下划线，这样会告诉 Sass 不要编译这些文件，但导入语句中却不需要添加下划线。

如：将my-color.scss文件改为_my-color.scss，则表示不再编译my-color.scss文件。

导入时既可以用@import "./_my-color";，也可以用@import "./my-color";省略下划线。

导入原生CSS文件

由于sass兼容原生的css，所以它也支持原生CSS的@import。

在使用@import时，如果有.css后缀则按原生CSS方式导入，如果没有后缀则按Sass方式导入。

/* style.css */
.box {
    margin: 0 auto;
    background-color: blue;
}

@import "style.css";
@import "my-color";
@import "my-size";
.box {
  width: $width;
  height: $height;
  border: 10px solid $color;
}

编译为：

@import "style.css";
.box {
  width: 200px;
  height: 100px;
  border: 10px solid red;
}

@mixin 混合器

如果你的整个网站中有几处小小的样式类似（例如一致的颜色和字体），那么使用变量来统一处理这种情况是非常不错的选择。

但是当你的样式变得越来越复杂，可以通过Sass的混合器实现大段样式的重用。

无参数

// my-style.scss
@mixin box-style {
  border-radius: 50%;
  border: 10px solid red;
  background-color: blue;
  margin: 0 auto;
}

@import "./my-style";
.box {
  width: 100px;
  height: 100px;
  @include box-style;
}

编译为：

.box {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 10px solid red;
  background-color: blue;
  margin: 0 auto;
}

带参数

// my-style.scss
@mixin box-style($width, $height) {
  width: $width;
  height: $height;
  border-radius: 50%;
  border: 10px solid red;
  background-color: blue;
  margin: 0 auto;
}

@import "./my-style";
.box {
  @include box-style(100px, 200px);
}

编译为：

.box {
  width: 100px;
  height: 200px;
  border-radius: 50%;
  border: 10px solid red;
  background-color: blue;
  margin: 0 auto;
}

命名参数

@import "./my-style";
.box {
  @include box-style($height: 200px, $width: 100px);
}

关键字参数

// my-style.scss
@mixin box-style($width: 100px, $height: 100px) {
  width: $width;
  height: $height;
  border-radius: 50%;
  border: 10px solid red;
  background-color: blue;
  margin: 0 auto;
}

@import "./my-style";
.box {
  @include box-style;
}

编译为：

.box {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 10px solid red;
  background-color: blue;
  margin: 0 auto;
}

可变参数

  • 不能确定混合指令需要使用多少个参数时，可以使用参数变量...声明，表示Sass将这些参数当作值列表处理。
  • 页可以将值列表中的值逐条作为参数引用。

方式一：值列表

// my-style.scss
@mixin box-style($borders...) {
  border-radius: 50%;
  border: $borders;
  background-color: blue;
  margin: 0 auto;
}

@import "./my-style";
.box {
  width: 100px;
  height: 100px;
  @include box-style(5px solid green);
}

编译为：

.box {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 5px solid green;
  background-color: blue;
  margin: 0 auto;
}

方式二：逐条引用

// my-style.scss
@mixin box-style($border-width, $border-style, $border-color) {
  border-radius: 50%;
  border: $border-width $border-style $border-color;
  background-color: blue;
  margin: 0 auto;
}

@import "./my-style";
$borders: 10px dashed red;
.box {
  width: 100px;
  height: 100px;
  @include box-style($borders...);
}

编译为：

.box {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 10px dashed red;
  background-color: blue;
  margin: 0 auto;
}

@content 混入内容

// my-style.scss
@mixin box-style {
  border-radius: 50%;
  background-color: blue;
  margin: 0 auto;
  @content;
}

@import "./my-style";
.box {
  width: 100px;
  height: 100px;
  @include box-style {
    border: 10px dashed green;
  }
}

编译为：

.box {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: blue;
  margin: 0 auto;
  border: 10px dashed green;
}

@extend 继承

.base {
  color: red;
  background-color: blue;
}

.p-style {
  @extend .base;
  font-size: 30px;
}

编译为：

.base, .p-style {
  color: red;
  background-color: blue;
}

.p-style {
  font-size: 30px;
}

@media 媒体查询

Sass 中 @media 指令与 CSS 中用法一样，只是增加了一点额外的功能：允许其在 CSS 规则中嵌套。如果 @media 嵌套在 CSS 规则内，编译时，@media 将被编译到文件的最外层，包含嵌套的父选择器。这个功能让 @media 用起来更方便，不需要重复使用选择器，也不会打乱 CSS 的书写流程。

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  @media (min-width: 400px) {
    width: 200px;
    height: 200px;
    background-color: green;
  }
  @media (min-width: 800px) {
    width: 400px;
    height: 400px;
    background-color: blue;
  }
}

编译为：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
}
@media (min-width: 400px) {
  .box {
    width: 200px;
    height: 200px;
    background-color: green;
  }
}
@media (min-width: 800px) {
  .box {
    width: 400px;
    height: 400px;
    background-color: blue;
  }
}

控制指令

@if

$type: b;
p {
  @if $type == a {
    border: 10px solid red;
  } @else if $type ==b {
    border: 10px dashed green;
  } @else {
    border: 10px dotted blue;
  }
}

编译为：

p {
  border: 10px dashed green;
}

@for

  • 语法格式一：@for $var from <start> through <end>，包含end值。
  • 语法格式二：@for $var from <start> to <end>，不包含end值。
@for $i from 1 to 4 {
  .item-#{$i} {
    font-size: 12px * $i;
  }
}

编译为：

.item-1 {
  font-size: 12px;
}

.item-2 {
  font-size: 24px;
}

.item-3 {
  font-size: 36px;
}

@each

@each 指令的格式是 $var in <list>, $var 可以是任何变量名，比如 $length 或者 $name，而 <list> 是一连串的值，也就是值列表。

@each $i in 1, 2, 3 {
  .item-#{$i} {
    font-size: 12px * $i;
  }
}

编译为：

.item-1 {
  font-size: 12px;
}

.item-2 {
  font-size: 24px;
}

.item-3 {
  font-size: 36px;
}

@while

$num: 3;
@while $num > 0 {
  .item-#{$num} {
    font-size: 12px * $num;
  }
  $num: $num - 1;
}

编译为：

.item-3 {
  font-size: 36px;
}

.item-2 {
  font-size: 24px;
}

.item-1 {
  font-size: 12px;
}

@function 函数

Sass 支持自定义函数，并能在任何属性值或 Sass script 中使用。

@function square($width) {
  @return $width * $width;
}
.box {
  width: square(10) + px;
  height: square(20) + px;
  border: 1px solid red;
}

编译为:

.box {
  width: 100px;
  height: 400px;
  border: 1px solid red;
}

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

hbase查询报错unable to find region for

hbase查询报错unable to find region for

某天由于集群资源不足。hbase大面积 region server 负载爆炸卡死&#xff0c;隔天发现部分查询报错 集群中一张表某些查询找不到region 尝试了重启集群和滚动重启集群&#xff0c;考虑滚动重启的过程会把regionserver上的region迁出和迁入。试试能不能修复&#xff0c;果断的…
阅读更多...
自定义项目Jar上传到maven中央仓库（一步到位）

自定义项目Jar上传到maven中央仓库（一步到位）

中央仓库 Open Source Software Repository Hosting 简称 OSSRH 实现目标&#xff1a;将自定义项目上传至maven中央仓库&#xff0c;其他人只需引入maven坐标即可直接使用 上传步骤&#xff1a;亲测有效 注册账号&#xff08;去它平台&#xff09;提交工单&#xff08;叫它做事…
阅读更多...
USB HS-PHY眼图调试

USB HS-PHY眼图调试

1 USB2 PHY AFE 1.1 USB 2.0 FS PHY github ultraembedded / core_usb_fs_phy NOP USB transceiver for all USB transceiver which are either built-in into USB IP or which are mostly autonomous. 1.2 电阻参数 USB host端&#xff1a;D和D-各接一个15kΩ的下拉电阻&#…
阅读更多...
数据结构学习记录——堆的建立（最大堆的建立、思路图解、代码实现、代码解释）

数据结构学习记录——堆的建立（最大堆的建立、思路图解、代码实现、代码解释）

目录 最大堆的建立 方法1 方法2 思路图解 代码实现 代码解释 PercDown BuildHeap 最大堆的建立 建立最大堆&#xff1a;将已经存在的N个元素按最大堆的要求存放在一个一维数组中。 方法1 通过插入操作&#xff0c;将N个元素一个一个地插入到一个初始为空的堆中去。…
阅读更多...
CSA发布|《洞察2022 云上数据安全与重要事项 》

CSA发布|《洞察2022 云上数据安全与重要事项 》

云安全联盟大中华区就云上数据安全和重要事项的洞察和建议等相关问题展开调查并发布《洞察2022 云上数据安全与重要事项 》&#xff08;以下简称《报告》&#xff09;。报告的主要内容是关于云上数据安全和重要事项的洞察和建议。它包括了对云安全现状的分析、云安全风险的评估…
阅读更多...
git的学习

git的学习

文章目录 一、Git 的简介二、Git 工作流程三、Git 工作区、暂存区和版本库总结 一、Git 的简介 Git 是一个开源的分布式版本控制系统&#xff0c;用于敏捷高效地处理任何或小或大的项目。 Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软…
阅读更多...
【c语言】字符串比较 | API仿真

【c语言】字符串比较 | API仿真

创作不易&#xff0c;本篇文章如果帮助到了你&#xff0c;还请点赞 关注支持一下♡>&#x16966;<)!! 主页专栏有更多知识&#xff0c;如有疑问欢迎大家指正讨论&#xff0c;共同进步&#xff01; 给大家跳段街舞感谢支持&#xff01;ጿ ኈ ቼ ዽ ጿ ኈ ቼ ዽ ጿ ኈ ቼ …
阅读更多...
RabbitMQ可靠性消息发送（java实现）

RabbitMQ可靠性消息发送（java实现）

本博客属于 《RabbitMQ基础组件封装—整体结构》的子博客 一、整体架构 step1&#xff1a;消息落库&#xff0c;业务数据存库的同时&#xff0c;也要将消息记录存入数据库&#xff0c;二者要保证原子性&#xff1b; step2&#xff1a;Producer发送消息到MQ Broker&#xff1b…
阅读更多...
Formik使用详解

Formik使用详解

Formik使用详解 1 引言 在现代Web应用程序中&#xff0c;表单是一种不可避免的输入机制&#xff0c;但是处理表单的过程可能会变得非常复杂。Formik是一个React表单库&#xff0c;它的目标是简化表单处理的过程。本文将介绍Formik的主要功能和用途&#xff0c;以及如何使用它来…
阅读更多...
怎么成为一名架构师？架构师第一步。基层开发人员逆袭成为架构师真的很难吗？

怎么成为一名架构师？架构师第一步。基层开发人员逆袭成为架构师真的很难吗？

文章目录 写在前面一、企业需要什么样的架构师1、从招聘软件上了解2、架构师的主要职责与能力 二、成为一名架构师很难吗1、架构师的定义2、当前大部分开发团队的现状3、为什么要有架构师4、技术人员如何自我突破 三、晨钟暮鼓的几句话 写在前面 一个团队中&#xff0c;每个人…
阅读更多...
JAVA基础：Scanner类中next(), nextLine(), hasNext(), hasNextLine()

JAVA基础：Scanner类中next(), nextLine(), hasNext(), hasNextLine()

一、next() : 只读缓冲区中空格之前的数据,并且光标指向本行。二、nextLine() : 读取除回车以外的所有符号(整行内容)&#xff0c;光标定位在下一行三、hasNext() &#xff1a;检查下一个标记&#xff08;token&#xff09;&#xff0c;也就是以空格、制表符或换行符为分隔符的…
阅读更多...
[JAVA EE]创建Servlet——实现Servlet接口笔记1

[JAVA EE]创建Servlet——实现Servlet接口笔记1

创建Servlet的方式之一&#xff1a;实现servlet接口 servlet的生命周期&#xff1a; 1、实例化&#xff1a;创建servlet实例对象 2、初始化&#xff1a;调用init方法完成初始化工作 3、服务&#xff1a;调用service方法来处理用户请求 4、销毁&#xff1a;调用destroy方法…
阅读更多...
Java算法比赛常用方法

Java算法比赛常用方法

1. 开方&#xff1a;Math.sqrt(x); 2. x的a方&#xff1a;Math.pow(x,a); 3. 绝对值&#xff1a;Math.abs(x)&#xff1b; 4. BigInteger&#xff1a;大数&#xff08;加&#xff0c;减&#xff0c;乘&#xff0c;除&#xff0c;取余&#xff09; c.add(d) ; c.subtract(d)…
阅读更多...
如何用100天彻底学会Python？

如何用100天彻底学会Python？

Python 是一门功能强大、易于学习且历史悠久的编程语言。如果你希望在短时间内彻底学会 Python&#xff0c;需要制定一个全面的学习计划&#xff0c;并进行刻意的练习和实践。 以下是一份建议的学习计划&#xff0c;帮助你在 100 天内掌握 Python 技能。 第 1-10 天&#xff…
阅读更多...
从bootamition出发分析OpenHarmony下Gralloc buffer管理机制

从bootamition出发分析OpenHarmony下Gralloc buffer管理机制

从bootamition出发分析OpenHarmony下Gralloc buffer管理机制 引言 这个文档主要记录从bootamition角度出发&#xff0c;分析OpenHarmony下对gralloc buffer的管理&#xff01;由于OpenHarmony图形子系统过于复杂&#xff0c;且个人由于能力有限&#xff0c;这里我仅从gralloc b…
阅读更多...
2023.03青少年机器人技术等级考试理论综合试卷（五级）

2023.03青少年机器人技术等级考试理论综合试卷（五级）

2023年3月青少年机器人技术等级考试理论综合试卷&#xff08;五级&#xff09; 一、单选题(共 20 题&#xff0c;共 80 分) 1. 0x35 & 7 的结果是&#xff1f;&#xff08;A &#xff09; A. 5 B. 55 C. 50 D. 54 2.一般状况下&#xff0c;关于主控板的工作电压&#xff0c…
阅读更多...
「 Redis 」大key对持久化有什么影响？

「 Redis 」大key对持久化有什么影响？

「 Redis 」大key对持久化有什么影响&#xff1f; 参考&鸣谢 Redis 大 Key 对持久化有什么影响&#xff1f; XiaoLinCoding 解决了Redis大key问题&#xff0c;同事们都夸他牛皮 大白斯基 快手面试官&#xff1a;Redis变慢了&#xff0c;如何快速排查&#xff1f; Java 那些…
阅读更多...
Vue 2.0 学习笔记

Vue 2.0 学习笔记

Vue学习笔记 文章目录 Vue学习笔记[toc]一、数据代理实现二、事件相关1.事件修饰符2.键盘事件 三、计算属性与监视1.计算属性-computed2.监视-watch 四、条件渲染1.v-show2.v-if&#xff0c;v-else-if 五、循环遍历1.v-for语法2.key的作用与原理 六、内置指令1.v-cloak指令&…
阅读更多...
使用GitHub分享项目

使用GitHub分享项目

一、注册账户 访问GitHub网站&#xff0c;点击“Sign up”按钮开始注册账号。然后按照提示输入你的用户名、电子邮箱地址和密码&#xff0c;提交成功后通过邮箱或你注册的手机号码进行验证身份。 二、上传项目 想分享自己的项目&#xff0c;首先需要在GitHub上创建一个新的仓库…
阅读更多...
React + ts学习笔记

React + ts学习笔记

前提准备&#xff1a; 环境配置 安装node.js 官网安装&#xff1a;当前使用版本18.15.0 安装新的react应用&#xff1a; 运行命令新建react-app npx create-react-app study-ts-app当前版本&#xff1a; “react”: “^18.2.0”,“react-dom”: “^18.2.0”, 如果出现如…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023