Css & Scss

CSS (Cascading Style Sheets) 和 SCSS (Sassy CSS) 都是用于样式表的编程语言，用于定义网页的外观和布局。

CSS vs SCSS vs SASS¶

CSS (Cascading Style Sheets): 它是一种样式表语言，用于描述网页上的元素应该如何呈现。CSS规则定义了元素的外观，包括颜色、字体、间距、边框等。CSS具有层叠性，允许多个样式规则应用于同一元素，根据特定的规则进行层叠和优先级。
SCSS (Sassy CSS): 它是CSS的一种超集，意味着任何有效的CSS也是有效的SCSS。SCSS引入了一些额外的功能，如变量、嵌套规则、混合（Mixins）等，以提高样式表的可维护性和可重用性。与纯CSS相比，SCSS的语法更灵活，更便于开发者编写和组织样式代码。

总体而言，SCSS可以看作是CSS的扩展，它提供了更多的工具和功能，使样式表更易于编写和维护。在实际开发中，开发者可以选择使用纯CSS或者采用SCSS来编写样式，取决于项目的需求和个人偏好。

SCSS V.S. SASS

Sass（Syntactically Awesome Stylesheets）和 SCSS（Sassy CSS）都是 CSS 预处理器，它们为 CSS 提供了一些额外的功能和语法。主要的区别在于它们的语法风格。

Sass:
Sass 使用严格的缩进来表示代码块，类似于 Python。
不使用大括号 {} 和分号 ;，而是通过缩进来表示代码块的开始和结束。
文件扩展名为 .sass。

例如：

body
    font: 16px/1.4 "Helvetica Neue", sans-serif
    color: #333

SCSS:
SCSS 是 Sass 3 引入的新语法，采用了更接近于普通 CSS 的语法。
使用大括号 {} 表示代码块的开始和结束，使用分号 ; 表示语句的结束。
文件扩展名为 .scss。

例如：

body {
    font: 16px/1.4 "Helvetica Neue", sans-serif;
    color: #333;
}

总体来说，SCSS 更接近于普通的 CSS 语法，更容易学习和使用，因此在实际应用中更为常见。Sass 的缩进风格则更具有一些简洁和优雅的特点，但在可读性上可能相对较弱。选择使用哪种语法主要取决于个人或团队的偏好以及项目的需求。在实际开发中，SCSS 使用更为广泛。

hugo兼容性¶

scss兼容css语法，

需要用 hugo extended 版本的拓展功能，将scss翻译成css使用。
在 Hugo 中，你只能把 Sass 的源文件放到 /assets/scss/ 或 /themes/your-theme/assets/scss/ 下，没有别的路径可以选择。[^3]
导入

{{ $styles := resources.Get "scss/main.scss" }}
{{ with $styles }}
  {{ $styles = $styles | toCSS | minify | fingerprint }}
  <link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}" media="screen">
{{ end }}

1. 变量:¶

CSS（层叠样式表）和 SCSS（Sass的一种语法扩展）之间的主要区别在于语法和功能。SCSS是Sass的一种新的语法，它是Sass 3引入的，旨在提供一种更加人类友好的写法，同时保留了Sass的强大功能。以下是一些CSS和SCSS之间的主要区别的例子：

CSS:

:root {
  --primary-color: #3498db;
}

.element {
  color: var(--primary-color);
}

SCSS:

$primary-color: #3498db;

.element {
  color: $primary-color;
}

在SCSS中，你可以使用变量来保存颜色、字体大小等信息，使得样式表更易于维护。

2. 嵌套规则:¶

CSS:

.container {
  padding: 10px;
}

.container .header {
  font-size: 18px;
}

SCSS:

.container {
  padding: 10px;

  .header {
    font-size: 18px;
  }
}

SCSS允许你以嵌套的方式编写样式规则，使得样式层次结构更清晰。

3. 混合器(类似函数):¶

SCSS 提供了一种称为 mixin 的特性，它可以让你定义可重用的样式块。

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

.element {
  @include border-radius(5px);
}

这使得你可以更灵活地重用样式规则。

4. 继承:¶

SCSS 允许你使用 @extend 关键字继承另一个选择器的样式。

.error {
  border: 1px solid #ff0000;
}

.alert {
  @extend .error;
  background-color: #ffcccc;
}

这可以减少样式表的重复。

语法¶

子元素定义¶

set xxx to the element b in/under a

.a .b {
    xxx
}

大小¶

vh stands for viewport height. 100vh is equal to 100% of the viewport height.
%是父元素的高宽的百分比。
与padding联动 width: calc(min(100%, 1430px));
min-height: calc(100vh - 160px); 使得footer在视野外

块级元素、内联元素¶

块级元素（Block-level elements）：
块级元素会在页面上以块的形式显示，它会独占一行或一块空间。
块级元素的宽度会占据其父元素的100%，高度会根据内容的多少而自动调整。
常见的块级元素有 <div>、<p>、<h1>、<ul>、<li> 等。
内联元素（Inline elements）：
内联元素不会以块的形式显示，它会在文本流中显示，只占据其内容的空间。
内联元素的宽度和高度只会包裹其内容。
常见的内联元素有 <span>、<a>、<strong>、<em> 等。

位置¶

static 默认值，无序指明。并且忽略 top, bottom, left, right 或者 z-index 声明。¹
fixed 全局页面固定位置。使用"left", "top", "right" 以及 "bottom"。
- 多于z-index: 1000;来设置悬浮导航栏
absolute 相对于 static 定位以外的第一个父元素进行定位（没有符合父元素就相对于<html>）。使用"left", "top", "right" 以及 "bottom"。
- 多用于relative元素内, 默认relative不指定位置等于static
relative 多用于原有位置的上下左右微调 left:20向左移动
sticky 像 position:relative 的拓展; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
- 要求：父元素非static比如position: relative; top:40px; 且有固定高度height: 100vh;
- 设置top: 100px;表示到顶的距离

水平居中¶

/* 父元素 text-align: center; */
.su-brand-bar{
    width: 82%;
    margin: 0 auto;
    /* margin: calc(100% - 200px); */
}

方法二:

position: absolute;
left: 50%;
top: 50%;

display¶

²

flex和inline-flex的区别

使用 flex 属性时，容器会被视为块级元素，它会独占一行。其子元素会在主轴方向上排列，占据整个容器的宽度。
使用 inline-flex 属性时，容器会被视为内联元素，即它只会占据其内容所需的空间。其子元素会在主轴方向上排列，但不会占据整个容器的宽度。

边框 magin border padding¶

margin 区域是透明的。
- display: flex;排列时，来实现grid间的距离。
- margin-left: 35px;
- margin-bottom: 35px;
- 我不理解为什么斯坦福的页面为负数
border 一般是有色(虚线)框 border: 3px solid #73AD21;
padding 的颜色继承 background-color
- padding-left: calc(50% - 715px); 来实现放大时边界为0.

图片¶

固定大小div内填充满图片¶

object-fit 属性规定可替换元素的内容应该如何适应到其使用的高度和宽度。通过设置 object-fit，你可以控制图片在其容器中的显示方式。

object-fit 属性值包括：

fill: 默认值，拉伸图片以填充容器。
cover 将图片按比例缩放并裁剪，以使其完全覆盖容器。
contain: 缩放图片以适应容器，保持其原始宽高比，可能会在容器中留有空白。
none: 保持图片原始尺寸，可能会溢出容器。
scale-down: 缩放图片以适应容器，但不超过其原始尺寸，可能比 contain 更小。

以下是一个简单的例子：

img {
  width: 100px; /* 设置固定宽度 */
  height: 100px; /* 设置固定高度 */
  object-fit: cover; /* 将图片裁剪并适应容器 */
}

在这个例子中，你可以根据需要调整固定的宽度和高度。

靠上裁剪成正方形，并带鼠标聚焦效果

.person-img-container{
    width: 150px; /* 设置容器的宽度 */
    height: 150px; /* 设置容器的高度 */
    overflow: hidden; /* 隐藏溢出的部分 */
    display: inline-block; /* 或者使用 display: block; */
}

.person-img-container img {
    width: 100%; /* 图片宽度占满容器 */
    height: 100%; /* 图片高度占满容器 */
    object-fit: cover;
    object-position: top; /* 设置裁剪时图片在容器中的位置为靠上 */
    border-radius: 50%; /* 将图片的边角设置为50%，使其呈圆形 */
    border: 1px solid rgb(146, 157, 192);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5); /* 添加灰色内阴影，颜色可根据需要调整 */
    transition: border-radius 0.5s; /* 添加边角变化的过渡效果，时长为0.5秒 */
}

img:hover {
    border-radius: 0; /* 在悬浮状态下将边角设置为0，使其呈方形 */
}

.big-grid{
    overflow: hidden; /* 隐藏超出容器的部分 */
}

.landscape {
    object-fit: cover; /* 填充整个容器，保持纵横比，可能裁剪部分内容 */
    width: 100%;
    height: 100%;
}

固定大小div内填充满图片(60%开始)¶

.image-container {
    position: relative;
    width: 100%;
    height: 40vh;
    overflow: hidden;
}

.big-pic{
    width: 100%;
    position: absolute;
    top: -60%;
    object-fit: cover;  
    /* opacity: .7;  */
}

字体¶

字体大小¶

在 CSS 中，rem、em、px 是用于定义字体大小的不同单位。它们有一些区别，主要涉及相对大小和绝对大小的概念。

rem（Root Em）:
rem 是相对于根元素（html 元素）的字体大小的单位。
1rem 等于根元素的字体大小。如果根元素的字体大小为 16px，那么 1rem 就等于 16px。
em:
em 是相对于父元素的字体大小的单位。
如果某元素的字体大小为 1em，它将等于其父元素的字体大小。如果嵌套使用，1em 将等于最近的父元素的字体大小。
px（Pixel）:
px 是像素单位，是一个绝对单位。
px 直接表示像素，不受父元素或根元素字体大小的影响。

使用 rem 和 em 可以使你的样式更具有可扩展性和适应性，因为它们相对于父元素或根元素的字体大小而不是绝对的像素值。

例如，使用 rem 可以让你的网站在用户调整浏览器字体大小时更具弹性，而使用 em 可以确保你的字体大小相对于其容器的大小而变化。

字体居中¶

<p style="text-align:center;">123</p>

/* 文本在div的位置 */
.centered-text {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    height: 100vh; /* 设置高度，可以根据需要调整 */
}

周围阴影¶

模拟光线射在对象上产生的阴影

text-shadow: (inset) 20px -19px 30px transparent;

inset 若指定，阴影在字体里
<offset-x> <offset-y> 光照产生阴影的上下左右
<blur-radius> 阴影轮廓模糊正值，0为阴影边缘清晰

color 颜色，允许透明色

炫彩/彩虹字体¶

在 CSS 中，你可以使用 linear-gradient 或 radial-gradient 来创建渐变效果，也可以使用 @keyframes 创建动画效果，从而实现字体颜色的渐变和幻彩效果。以下是一些示例：

线性渐变：¶

.gradient-text {
  background: linear-gradient(to right, #ff00ff, #00ffff);
  -webkit-background-clip: text;
  color: transparent;
}

在这个例子中，linear-gradient 用于创建水平的渐变背景，然后通过 -webkit-background-clip: text; 和 color: transparent; 将背景应用到文本上，从而实现了文字颜色的渐变效果。

径向渐变：¶

.radial-gradient-text {
  background: radial-gradient(circle, #ff0000, #00ff00, #0000ff);
  -webkit-background-clip: text;
  color: transparent;
}

这个例子中使用 radial-gradient 创建了一个径向渐变的背景，然后同样通过 -webkit-background-clip: text; 和 color: transparent; 将背景应用到文本上。

动画效果：¶

@keyframes rainbow {
  0% { color: #ff0000; }
  20% { color: #ff7f00; }
  40% { color: #ffff00; }
  60% { color: #00ff00; }
  80% { color: #0000ff; }
  100% { color: #ff00ff; }
}

.rainbow-text {
  animation: rainbow 5s infinite; /* 持续时间为 5 秒，无限循环 */
}

这个例子使用 @keyframes 定义了一个彩虹动画，然后通过 animation 属性应用到文本上，实现了文字颜色的动画效果。

你可以根据具体需求调整颜色值和动画效果。这些效果在现代浏览器中通常都能很好地支持。

颜色的表示¶

#888
rgba(red, green, blue, alpha) # 最后一个是透明度 0-1之间
black

参考文献¶

[^3] hugo + sass