一、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颜色值。
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变换矩阵。
transform: rotate(45deg) scale(1.5);
-
渐变函数:
linear-gradient(angle, color-stop1, color-stop2, ...)
:创建线性渐变。radial-gradient(shape, color-stop1, color-stop2, ...)
:创建径向渐变。
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)
:添加文本阴影。
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); text-shadow: 2px 2px 2px #000;
-
形状函数:
circle(radius)
:定义圆形。ellipse(radii)
:定义椭圆形。inset(rectangle)
:定义内嵌矩形。
shape-outside: circle(50%);
-
图像函数:
url(image-url)
:引用外部图像。image-set(image1x, image1.5x 1.5x, image2x 2x)
:为不同分辨率定义多个图像。
background-image: url('background.jpg');
-
属性函数:
attr(attribute-name)
:从元素的属性获取值。
content: attr(data-title);
-
环境变量:
env(variable-name)
:访问浏览器环境的变量。
-
自定义函数:
- CSS本身不支持自定义函数,但可以通过
calc()
、var()
等函数实现类似效果。
width: calc(100% - 20px); color: var(--main-color);
- CSS本身不支持自定义函数,但可以通过
-
数学函数:
calc(expression)
:执行CSS表达式计算。min(max, value1, ...)
:取最大值中的最小值。max(min, value1, ...)
:取最小值中的最大值。
width: calc(50% + 20px);
这些函数可以提高CSS的灵活性和表达能力,使得样式的编写更加动态和响应式。随着CSS规范的不断发展,未来可能会引入更多的函数。
二、SASS
1.基本定义
Sass 是一个 CSS 预处理器,完全兼容所有版本的 CSS。实际上,Sass 并没有真正为 CSS 语言添加任何新功能。
在 Sass 中支持两种类型的注释:
// 注释一
/* 注释二 */
需要注意,当 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 关键字实现样式规则(属性和值)的复用。
.btn{
}
.zi-btn{
@extend .btn;
}
3. 混合Mixins:
允许开发者定义一组样式规则,并在需要时将其包含(include)到其他选择器中,类似于函数的概念。
定义混合:
使用 @mixin 关键字定义一个混合,并在其中包含一组 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
关键字将混合包含到具体的选择器或样式中。
.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
关键字定义,可以接受参数并返回一个值。
@function percentage($value, $total) {
@return ($value / $total) * 100%;
}
.container {
width: percentage(500px, 1000px); // 输出 50%
}
5.操作符
在 Sass 中,操作符用于执行各种数学和逻辑运算,这些操作符与大多数编程语言中的操作符类似,但在 Sass 中还包括一些用于处理颜色和字符串的特殊操作符。
+
-
*
/
%
==
!=
>
<
>=
<=
and
or
not
6.模块化
在一个.scss
文件中定义好了变量、mixins、函数等,可以在另一个.scss
文件使用。
@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,以及一些函数和操作符来帮助进行条件判断。
$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 文件或资源。
@import url("styles.css");
2. @media
@media
规则用于根据不同的媒体类型和特定的条件来应用样式。
@media screen and (max-width: 600px) {
body {
font-size: 14px;
}
}
媒体查询:指的是在 @media 规则中定义的条件部分,通常由媒体类型和一个或多个媒体特性组成。(Media Queries)是CSS3中引入的一种机制,允许开发者根据设备特性和环境条件来应用不同的样式规则。通过媒体查询,可以检测并响应设备的特性,如屏幕宽度、高度、设备类型(打印设备、屏幕设备等)、视口宽度等,从而使得网页可以在不同的设备和浏览器上提供最佳的用户体验。
@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 字体。
@font-face {
font-family: "MyCustomFont";
src: url("myfont.woff2") format("woff2"),
url("myfont.woff") format("woff");
}
4. @keyframes
@keyframes
规则用于定义动画序列中的关键帧。允许定义动画过程中一系列关键帧的状态。通过这些关键帧,可以创建复杂的动画效果,指定动画在不同时间点的样式。
@keyframes color-change {
0% {
background-color: red;
}
50% {
background-color: yellow;
}
100% {
background-color: blue;
}
}
要应用这个动画到一个元素上,需要使用 animation 属性,如下所示:
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 特性。
@supports (display: grid) {
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}
}
6. @page
@page
规则用于定义打印文档时的页面样式。与屏幕显示的样式不同,@page 规则允许控制打印页面的布局和外观,例如页面大小、边距、页眉、页脚等。
@page {
size: A4;
margin: 1cm;
}
7. @charset
@charset
规则用于指定 CSS 文件的字符集编码。
@charset "UTF-8";
8. @namespace
@namespace
规则用于定义 XML 或 SVG 文档中的命名空间。
@namespace url("http://www.w3.org/1999/xhtml");
8.@container
@container 允许开发者根据容器(而非视口或屏幕)的尺寸变化来设置内部元素的样式。这种机制被称为“容器查询”,它使得开发者能够更精细地控制页面布局,特别是当页面内部元素的尺寸变化时。
基本用法:
- 首先,需要定义一个容器元素,例如
<div>
,并为其指定一个唯一的名称或标识符。 - 然后,使用
@container
规则来定义当容器尺寸变化时应该如何调整内部元素的样式。
假设有一个名为.container的
元素,它内部有一个元素。当.container的宽度小于800px时,改变
元素的字体颜色。可以这样实现:
.container {
container-name: myContainer; /* 为容器指定名称 */
}
@container myContainer (max-width: 800px) {
p {
color: gray; /* 当容器宽度小于800px时,<p>元素的字体颜色变为灰色 */
}
}
9.@scope
@scope是一个指令,用于定义一组规则,这些规则只在特定的上下文或作用域内有效。这个指令通常用于组织和封装Sass代码,使得样式更加模块化和可重用。
@scope <scope-name> {
// 定义作用域内的样式规则
}
其他常见的 @规则:
@counter-style
:定义计数器样式。@document
:根据文档 URL 条件应用样式。@font-feature-values
:定义字体特性值。@viewport
:定义视口相关规则,用于移动端布局控制。
每种 @规则
都有其特定的语法和用途,能够使 CSS 样式表更加灵活和功能强大,适应不同的设计需求和环境条件。
四、变换
1.过渡(transition)
过渡(transition)是 CSS 中用来控制 CSS 属性变化过程的一种机制,通过平滑过渡一个 CSS 属性的变化,使得变化显得更加流畅和自然。通常用于控制例如颜色、位置、大小等属性的变化效果。
过渡使用 transition
属性来定义,其基本语法如下:
.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)。
.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.动画
动画和过渡类似,都是可以实现一些动态的效果,不同的是
- 过渡需要在某个属性发生变化时才会触发
- 动画可以自动触发动态效果
设置动画效果,必须先要设置一个关键帧,关键帧设置了动画执行每一个步骤:
@keyframes animation_name {
from {
/* 初始状态 */
}
to {
/* 结束状态 */
}
}
@keyframes animation_name {
0% {
/* 初始状态 */
}
50% {
/* 中间状态 */
}
100% {
/* 结束状态 */
}
}
再用动画 animation 属性:
.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 属性,可以实现页面元素在二维或三维空间内的变换效果,而不会影响文档流或元素的其他属性。