【前端学习笔记】CSS基础三

一、CSS变量

CSS变量，也称为CSS自定义属性，是CSS3的一部分，允许开发者在CSS中定义和使用变量。这些变量可以存储值，然后在整个文档中重复使用这些值。使用CSS变量可以提高样式表的可维护性，并且使得主题和设计变量的更改更加容易。

1.基本使用

声明一个自定义属性，属性名以两个减号（--）开始，属性值可以是任何有效的CSS值，并且这个属性和其他属性一样可以写在规则集之内，变量可以在定义它们的选择器及其后代元素中使用。如果需要全局变量，可以定义在:root伪类中。通常放在:root伪类选择器中。:root伪类代表文档的根元素，通常是<html>元素。
在使用CSS变量时，使用 var() 函数包裹所需变量的变量名即可。除了变量名之外，var() 还有第二个参数------备用值。在发现变量值不可访问的情况下，将使用备用值来代替它。（浏览器支持变量，并且该变量设置为无效值，则使用浏览器的默认值）
可以在运行时通过JavaScript动态更新变量的值，从而改变整个文档的样式。获取：window.getComputedStyle(element).getPropertyValue('--color')，设置：element.style.setProperty('--color', 'blue'); （这里的getComputedStyle是用于获取指定元素计算后实际渲染后的所有样式属性，然后再用getPropertyValue获取具体的值，而element.style是元素对象的属性，可以设置。
CSS 变量可以通过 CSS 层叠机制进行继承。
可以在媒体查询中重新设置变量，这些重新设置的值可以在任何地方使用，这是预处理器变量无法实现的。
CSS变量的变量名（即属性名）对大小写是敏感的，不能使用CSS现有属性名。

2.SASS变量

SASS 变量在定义时需在变量名前加上"$"，在使用变量时直接使用定义的变量名即可，SASS 的问题就在于它是一个预处理器，所以，任何在 SASS 中声明的变量都需要经过编译才能执行。不能在运行时更改变量值

预处理器SASS中的变量范围就是嵌套的大括号块。而由于 CSS 变量是属性，所以它们的作用域是基于 DOM 的。这意味着 CSS 变量是按元素解析的，而不是按作用域解析的。

CSS变量是动态分配的。它们在页面的整个生命周期中会保持活动状态，当更新它们时，所有引用它们的地方都会更新。因为它们是属性，所以可以通过任何更新 CSS 属性的机制来更新它们：样式表、内联样式，甚至 JavaScript。

3.CSS函数

CSS中的函数通常用于在样式表中执行特定的操作，比如颜色混合、转换单位、获取属性值等。以下是一些常见的CSS函数：

RGBA/HSLA：
- rgba(red, green, blue, alpha)：定义一个RGBA颜色值，其中alpha是透明度。
- hsla(hue, saturation, lightness, alpha)：定义一个HSLA颜色值。
css 复制代码
```
background-color: rgba(255, 255, 255, 0.5);
background-color: hsla(120, 100%, 50%, 0.5);
```
颜色调整函数：
- color()：CSS4中新增的函数，用于创建颜色值，可以指定颜色空间。
变换函数：
- translate(x, y)：在2D空间中移动元素。
- rotate(angle)：旋转元素。
- scale(x, y)：缩放元素。
- skew(x-angle, y-angle)：倾斜元素。
- matrix(a, b, c, d, e, f)：应用2D变换矩阵。
css 复制代码
```
transform: rotate(45deg) scale(1.5);
```
渐变函数：
- linear-gradient(angle, color-stop1, color-stop2, ...)：创建线性渐变。
- radial-gradient(shape, color-stop1, color-stop2, ...)：创建径向渐变。
css 复制代码
```
background-image: linear-gradient(to right, red, yellow);
```
阴影函数：
- box-shadow(x-offset, y-offset, blur-radius, spread-radius, color)：添加盒子阴影。
- text-shadow(x-offset, y-offset, blur-radius, color)：添加文本阴影。
css 复制代码
```
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
text-shadow: 2px 2px 2px #000;
```
形状函数：
- circle(radius)：定义圆形。
- ellipse(radii)：定义椭圆形。
- inset(rectangle)：定义内嵌矩形。
css 复制代码
```
shape-outside: circle(50%);
```
图像函数：
- url(image-url)：引用外部图像。
- image-set(image1x, image1.5x 1.5x, image2x 2x)：为不同分辨率定义多个图像。
css 复制代码
```
background-image: url('background.jpg');
```
属性函数：
- attr(attribute-name)：从元素的属性获取值。
css 复制代码
```
content: attr(data-title);
```
环境变量：
- env(variable-name)：访问浏览器环境的变量。
自定义函数：
- CSS本身不支持自定义函数，但可以通过calc()、var()等函数实现类似效果。
css 复制代码
```
width: calc(100% - 20px);
color: var(--main-color);
```
数学函数：
- calc(expression)：执行CSS表达式计算。
- min(max, value1, ...)：取最大值中的最小值。
- max(min, value1, ...)：取最小值中的最大值。
css 复制代码
```
width: calc(50% + 20px);
```

这些函数可以提高CSS的灵活性和表达能力，使得样式的编写更加动态和响应式。随着CSS规范的不断发展，未来可能会引入更多的函数。

二、SASS

1.基本定义

Sass 是一个 CSS 预处理器，完全兼容所有版本的 CSS。实际上，Sass 并没有真正为 CSS 语言添加任何新功能。

在 Sass 中支持两种类型的注释：

css 复制代码

// 注释一

/* 注释二 */

需要注意，当 Sass 编译成CSS时，第一种注释不会编译到CSS中（只在Sass文件中可见），第二种注释会编译到CSS中。

变量：使用$符号定义变量，可以存储值并在样式表中重复使用。
嵌套：通过嵌套这些代码，可以得到类似HTML结构的CSS代码，使代码更具可读性（父子元素）。在编写Sass时，要嵌套嵌套太深，尽量不要超过三层，超过之后就会导致代码难以维护，并且在编译为CSS时就会出现不必要的选择器，就会导致CSS文件变大。在嵌套里，& 总是指向它上面的元素，可以用于伪类和伪元素。
混合（Mixins）：类似于函数，可以创建一组可重用的样式声明。
函数：SASS提供了一些内置函数，也可以自定义函数来执行计算或操作。
继承：可以使用@extend指令来扩展一个选择器的样式到另一个选择器。
操作符：SASS支持各种操作符，可以进行数值计算。
条件语句和循环：SASS允许使用@if、@else和@for、@each、@while等控制指令。
模块化 ：Sass 支持使用 @import 导入其他 Sass (.scss)文件，可以将样式表拆分成多个模块，更方便地组织和管理样式。

2. 继承与嵌套：

在 Sass 中，虽然可以使用 @extend 来实现样式的继承，但继承和嵌套是两个不同的概念。嵌套主要用于层级结构的表达和简化选择器的书写，而继承则是通过 @extend 关键字实现样式规则（属性和值）的复用。

css 复制代码

.btn{
}
.zi-btn{
	@extend .btn;
}

3. 混合Mixins：

允许开发者定义一组样式规则，并在需要时将其包含（include）到其他选择器中，类似于函数的概念。

定义混合：

使用 @mixin 关键字定义一个混合，并在其中包含一组 CSS 规则。

css 复制代码

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

border-radius 是混合的名称，$radius 是接受的参数。也可以带默认值：@mixin border-radius($radius:10px){}

包含混合：

使用 @include 关键字将混合包含到具体的选择器或样式中。

css 复制代码

.box {
  @include border-radius(10px);
  background-color: #f0f0f0;
}

.box 类选择器包含了 border-radius 混合，并传入了参数 10px。

4.函数

在 Sass 中，函数是一种强大的工具，用于执行各种操作和计算，包括颜色处理、数学运算、字符串操作等。函数可以帮助开发者在样式表中执行复杂的逻辑和操作。

内置函数 ：

Sass 提供了一些内置的函数，用于处理颜色、数学计算、字符串操作等常见任务。使用时直接传参调用：width: ceil(10.5px);

颜色函数：lighten()、darken()、rgba() 等用于调整颜色的亮度和透明度。
数学函数：round()、ceil()、floor() 等用于数值的四舍五入、向上取整、向下取整。
字符串函数：str-length()、to-upper-case()、to-lower-case() 等用于处理字符串的长度和大小写转换。

自定义函数：

Sass 还支持自定义函数，允许开发者根据需要创建自己的函数来执行特定的操作。自定义函数使用 @function 关键字定义，可以接受参数并返回一个值。

css 复制代码

@function percentage($value, $total) {
  @return ($value / $total) * 100%;
}

.container {
  width: percentage(500px, 1000px); // 输出 50%
}

5.操作符

在 Sass 中，操作符用于执行各种数学和逻辑运算，这些操作符与大多数编程语言中的操作符类似，但在 Sass 中还包括一些用于处理颜色和字符串的特殊操作符。
+ - * / % == != > < >= <= and or not

6.模块化

在一个.scss文件中定义好了变量、mixins、函数等，可以在另一个.scss文件使用。

css 复制代码

@use 'scss1' as s1;/*引入并加别名*/
div {
@include s1.button-style(#3498db);/*mixins or 函数*/
@extend .btn;/*继承*/
background-color: s1.$primary-color;/*变量*/
}

7.逻辑语句

Sass 提供了类似于编程语言的条件语句，包括 @if、@else if 和 @else，以及一些函数和操作符来帮助进行条件判断。

css 复制代码

 $color: green;
.button {
  @if $color == red {
    background-color: $color;
  } @else if $color == green {
    background-color: $color;
  } @else {
    background-color: black;
  }
}

/*if()函数*/
.button {
  background-color: if($color == red, $color, blue);
}

/*逻辑运算符组合*/
$size: 10px;
$color: red;

.box {
  @if $size > 5px and $color == red {
    border: 1px solid black;
  }
}

三、@规则

CSS 中的 @规则（At-rules）是一种特殊的语法结构，以 @ 开头，用于定义特定的样式规则或指令，而不是直接应用于 HTML 元素。这些规则通常用于引入外部资源、定义动画、媒体查询、字体引入等特殊功能。

1.@import

@import 规则用于在 CSS 文件中引入其他 CSS 文件或资源。

css 复制代码

@import url("styles.css");

2. @media

@media 规则用于根据不同的媒体类型和特定的条件来应用样式。

css 复制代码

@media screen and (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

媒体查询：指的是在 @media 规则中定义的条件部分，通常由媒体类型和一个或多个媒体特性组成。（Media Queries）是CSS3中引入的一种机制，允许开发者根据设备特性和环境条件来应用不同的样式规则。通过媒体查询，可以检测并响应设备的特性，如屏幕宽度、高度、设备类型（打印设备、屏幕设备等）、视口宽度等，从而使得网页可以在不同的设备和浏览器上提供最佳的用户体验。

css 复制代码

@media media_type and|not|only (media_feature) {
  /* CSS 规则 */
}

media_type：媒体类型，例如 screen（屏幕）、print（打印机）、speech（语音合成器）等。
media_feature：媒体特性，例如 width（宽度）、height（高度）、orientation（方向）、aspect-ratio（宽高比）等。

3. @font-face

@font-face 规则用于定义自定义字体，允许浏览器下载和使用 Web 字体。

css 复制代码

@font-face {
  font-family: "MyCustomFont";
  src: url("myfont.woff2") format("woff2"),
       url("myfont.woff") format("woff");
}

4. @keyframes

@keyframes 规则用于定义动画序列中的关键帧。允许定义动画过程中一系列关键帧的状态。通过这些关键帧，可以创建复杂的动画效果，指定动画在不同时间点的样式。

css 复制代码

@keyframes color-change {  
  0% {  
    background-color: red;  
  }  
  50% {  
    background-color: yellow;  
  }  
  100% {  
    background-color: blue;  
  }  
}

要应用这个动画到一个元素上，需要使用 animation 属性，如下所示：

css 复制代码

div {  
  width: 100px;  
  height: 100px;  
  animation-name: color-change;  
  animation-duration: 4s;  
  animation-iteration-count: infinite;  
}

这里将 color-change 动画应用到了一个 div 元素上。animation-duration 属性定义了动画的持续时间，animation-iteration-count 属性定义了动画的迭代次数（infinite 表示无限次）。

5. @supports

@supports 规则用于检测浏览器是否支持某些 CSS 特性。

css 复制代码

@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

6. @page

@page 规则用于定义打印文档时的页面样式。与屏幕显示的样式不同，@page 规则允许控制打印页面的布局和外观，例如页面大小、边距、页眉、页脚等。

css 复制代码

@page {
  size: A4;
  margin: 1cm;
}

7. @charset

@charset 规则用于指定 CSS 文件的字符集编码。

css 复制代码

@charset "UTF-8";

8. @namespace

@namespace 规则用于定义 XML 或 SVG 文档中的命名空间。

css 复制代码

@namespace url("http://www.w3.org/1999/xhtml");

8.@container

@container 允许开发者根据容器（而非视口或屏幕）的尺寸变化来设置内部元素的样式。这种机制被称为"容器查询"，它使得开发者能够更精细地控制页面布局，特别是当页面内部元素的尺寸变化时。

基本用法：

首先，需要定义一个容器元素，例如<div>，并为其指定一个唯一的名称或标识符。
然后，使用@container规则来定义当容器尺寸变化时应该如何调整内部元素的样式。

假设有一个名为.container的
元素，它内部有一个

元素。当.container的宽度小于800px时，改变

元素的字体颜色。可以这样实现：

css 复制代码

.container {  
  container-name: myContainer; /* 为容器指定名称 */  
}  
  
@container myContainer (max-width: 800px) {  
  p {  
    color: gray; /* 当容器宽度小于800px时，<p>元素的字体颜色变为灰色 */  
  }  
}

9.@scope

@scope是一个指令，用于定义一组规则，这些规则只在特定的上下文或作用域内有效。这个指令通常用于组织和封装Sass代码，使得样式更加模块化和可重用。

css 复制代码

@scope <scope-name> {
  // 定义作用域内的样式规则
}

其他常见的 @规则：

@counter-style：定义计数器样式。
@document：根据文档 URL 条件应用样式。
@font-feature-values：定义字体特性值。
@viewport：定义视口相关规则，用于移动端布局控制。

每种 @规则 都有其特定的语法和用途，能够使 CSS 样式表更加灵活和功能强大，适应不同的设计需求和环境条件。

四、变换

1.过渡（transition）

过渡（transition）是 CSS 中用来控制 CSS 属性变化过程的一种机制，通过平滑过渡一个 CSS 属性的变化，使得变化显得更加流畅和自然。通常用于控制例如颜色、位置、大小等属性的变化效果。

过渡使用 transition 属性来定义，其基本语法如下：

css 复制代码

.selector {
  transition: property duration timing-function delay;
}

property：指定需要过渡的 CSS 属性名称，例如 width、color、opacity 等。
duration：指定过渡效果的持续时间，单位可以是秒（s）或毫秒（ms）。
timing-function：指定过渡效果的时间函数（可选），控制过渡速度的变化曲线，例如 ease、linear、ease-in-out 等。
delay：指定过渡效果延迟执行的时间（可选），单位也可以是秒（s）或毫秒（ms）。

css 复制代码

.button {
  width: 100px;
  height: 50px;
  background-color: blue;
  transition: width 0.3s ease-in-out;
}

.button:hover {
  width: 150px;
}

在这个例子中，当鼠标悬停在 .button 元素上时，width 属性从初始的 100px 平滑过渡到 150px，过渡效果持续时间为 0.3s，使用了 ease-in-out 的时间函数。

property ：可以同时过渡多个属性，用逗号分隔。例如 transition: width 0.3s, height 0.3s; 表示同时过渡 width 和 height 属性。
duration ：过渡的持续时间，可以分别为每个过渡指定不同的时间，例如 transition: width 0.3s, height 0.5s;。
timing-function ：可以指定多个过渡的时间函数，每个时间函数对应对应于对应的属性，例如 transition: width 0.3s ease-in, height 0.5s ease-out;。

transition-property ：指定要执行过渡的属性
- 多个属性间使用,隔开；
- 如果所有属性都需要过渡，则使用all关键字；
- 大部分属性都支持过渡效果；
- 注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡；
transition-duration ：指定过渡效果的持续时间
- 时间单位：s和ms（1s=1000ms）
transition-delay：过渡效果的延迟，等待一段时间后在执行过渡
transition-timing-function ：过渡的时序函数
- linear匀速运动
- ease 默认值，慢速开始，先加速后减速
- ease-in 加速运动
- ease-out 减速运动
- ease-in-out 先加速后减速
- cubic-bezier()来指定时序函数 https://cubic-bezier.com
- steps()分步执行过渡效果，可以设置第二个值：
- end，在时间结束时执行过渡（默认值）
- start，在时间开始时执行过渡
transition ：可以同时设置过渡相关的所有属性
- 只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟时间

2.动画

动画和过渡类似，都是可以实现一些动态的效果，不同的是

过渡需要在某个属性发生变化时才会触发
动画可以自动触发动态效果

设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行每一个步骤:

css 复制代码

@keyframes animation_name {
  from {
    /* 初始状态 */
  }
  to {
    /* 结束状态 */
  }
}

@keyframes animation_name {
  0% {
    /* 初始状态 */
  }
  50% {
    /* 中间状态 */
  }
  100% {
    /* 结束状态 */
  }
}

再用动画 animation 属性：

css 复制代码

.selector {
  animation: animation_name duration timing-function delay iteration-count direction fill-mode;
}

animation-name 指定动画的关键帧名称
animation-duration：指定动画效果的持续时间
animation-delay：动画效果的延迟，等待一段时间后在执行动
animation-timing-function：动画的时序函数
animation-iteration-count 动画执行的次数
- infinite 无限执行
animation-direction 指定动画运行的方向
- normal 从from向to运行，每次都是这样，默认值
- reverse 从to向from运行，每次都是这样
- alternate 从from向to运行，重复执行动画时反向执行
alternate-reverse 从to向from运行，重复执行动画时反向执行
animation-play-state 设置动画的执行状态
- running 动画执行，默认值
- paused 动画暂停
animation-fill-mode 动画的填充模式
- none 动画执行完毕，元素回到原来位置，默认值
- forwards 动画执行完毕，元素会停止在动画结束的位置
- backwards 动画延时等待时，元素就会处于开始位置
- both 结合了forwards和backwards

3.平移

平移（Translation）通常是指通过 transform 属性来改变元素的位置，从而实现元素在二维或三维空间中的移动效果。平移可以沿着 X 轴、Y 轴或 Z 轴进行，而不会影响文档流或元素的其他属性。

通过 transform 属性的 translate() 函数可以进行平移。它接受一个或两个参数，分别表示 X 轴和 Y 轴上的位移量。

translateX() 沿着由方向平移
translateY() 沿着y轴方向平移
translateZ() 沿着z轴方向平移平移元素
translate3d(50px, 100px, 0); （沿 X 轴移动 50px，Y 轴移动 100px，Z 轴不移动

（百分比是相对于自身计算的）

4.旋转

transform 属性，允许元素在二维或三维空间中绕着指定的中心点进行旋转。通过旋转可以使元素沿着x、y或z旋转指定的角度。元素的旋转中心点是其自身的中心。可以使用 transform-origin 属性指定旋转的中心点位置，例如 transform-origin: top left; 将旋转中心点设置在元素的左上角。

rotateX(45deg)：绕 X 轴顺时针旋转元素 45 度
rotateY()
rotateZ()

5.缩放

二维缩放可以通过 scale() 函数实现，它接受一个或两个参数，分别表示在水平和垂直方向上的缩放比例。

scalex(1.5) 水平方向缩放：水平方向放大1.5倍
scaleY(0.5) 垂直方向缩放：垂直方向缩小0.5
scale() 双方向的缩放：先水平再垂直

scale3d() 函数实现三维缩放，它接受三个参数，分别表示在 X 轴、Y 轴和 Z 轴上的缩放比例。

6.倾斜（skew）

skewX(angle)：沿 X 轴方向倾斜元素。

skewY(angle)：沿 Y 轴方向倾斜元素。

skew(ax, ay)：分别沿 X 和 Y 轴方向倾斜元素。

7.matrix矩阵变换

matrix(a, b, c, d, e, f) 函数的基本语法如下：

a (缩放X轴)：水平方向上的缩放因子。

b (倾斜Y轴)：垂直方向上的倾斜因子，与水平缩放有关。

c (倾斜X轴)：水平方向上的倾斜因子，与垂直缩放有关。

d (缩放Y轴)：垂直方向上的缩放因子。

e (平移X轴)：沿着X轴的平移距离。

f (平移Y轴)：沿着Y轴的平移距离。

8.transform 属性

用于对元素进行各种变换，包括平移（移动）、旋转、缩放、倾斜等。通过 transform 属性，可以实现页面元素在二维或三维空间内的变换效果，而不会影响文档流或元素的其他属性。