Posted Updated Tutorials21 minutes read (About 3198 words)

Css & Scss

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

CSS vs SCSS vs SASS

  1. CSS (Cascading Style Sheets): 它是一种样式表语言，用于描述网页上的元素应该如何呈现。CSS规则定义了元素的外观，包括颜色、字体、间距、边框等。CSS具有层叠性，允许多个样式规则应用于同一元素，根据特定的规则进行层叠和优先级。
  2. 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 提供了一些额外的功能和语法。主要的区别在于它们的语法风格。

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

例如：

1
2
3
body
    font: 16px/1.4 "Helvetica Neue", sans-serif
    color: #333
  1. SCSS:
  • SCSS 是 Sass 3 引入的新语法，采用了更接近于普通 CSS 的语法。
  • 使用大括号 {} 表示代码块的开始和结束，使用分号 ; 表示语句的结束。
  • 文件扩展名为 .scss。

例如：

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

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

hugo兼容性

scss兼容css语法，

  1. 需要用 hugo extended 版本的拓展功能，将scss翻译成css使用。
  2. 在 Hugo 中，你只能把 Sass 的源文件放到 /assets/scss/ 或 /themes/your-theme/assets/scss/ 下，没有别的路径可以选择。[^3]
  3. 导入
1
2
3
4
5
{{ $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:

1
2
3
4
5
6
7
:root {
  --primary-color: #3498db;
}

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

SCSS:

1
2
3
4
5
$primary-color: #3498db;

.element {
  color: $primary-color;
}

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

2. 嵌套规则:

CSS:

1
2
3
4
5
6
7
.container {
  padding: 10px;
}

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

SCSS:

1
2
3
4
5
6
7
.container {
  padding: 10px;

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

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

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

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

1
2
3
4
5
6
7
@mixin border-radius($radius) {
  border-radius: $radius;
}

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

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

4. 继承:

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

1
2
3
4
5
6
7
8
.error {
  border: 1px solid #ff0000;
}

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

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

语法

子元素定义

set xxx to the element b in/under a

1
2
3
.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在视野外

块级元素、内联元素

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

位置

  • static 默认值，无序指明。并且忽略 top, bottom, left, right 或者 z-index 声明。[^1]
  • 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;表示到顶的距离

水平居中

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

方法二:

1
2
3
position: absolute;
left: 50%;
top: 50%;

display

^2

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 更小。

以下是一个简单的例子：

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.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，使其呈方形 */
}
1
2
3
4
5
6
7
8
9
.big-grid{
    overflow: hidden; /* 隐藏超出容器的部分 */
}

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.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 是用于定义字体大小的不同单位。它们有一些区别，主要涉及相对大小和绝对大小的概念。

  1. rem（Root Em）:

    • rem 是相对于根元素（html 元素）的字体大小的单位。
    • 1rem 等于根元素的字体大小。如果根元素的字体大小为 16px，那么 1rem 就等于 16px。

  2. em:

    • em 是相对于父元素的字体大小的单位。
    • 如果某元素的字体大小为 1em，它将等于其父元素的字体大小。如果嵌套使用，1em 将等于最近的父元素的字体大小。

  3. px（Pixel）:

    • px 是像素单位，是一个绝对单位。
    • px 直接表示像素，不受父元素或根元素字体大小的影响。

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

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

字体居中

1
2
3
4
5
6
7
8
9
<p style="text-align:center;">123</p>

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

周围阴影

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

1
text-shadow: (inset) 20px -19px 30px transparent;
  1. inset 若指定，阴影在字体里
  2. <offset-x> <offset-y> 光照产生阴影的上下左右
  3. <blur-radius> 阴影轮廓模糊正值，0为阴影边缘清晰
  4. color 颜色，允许透明色

炫彩/彩虹 字体

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

线性渐变：

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

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

径向渐变：

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

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

动画效果：

1
2
3
4
5
6
7
8
9
10
11
12
@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 属性应用到文本上，实现了文字颜色的动画效果。

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

颜色的表示

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

参考文献

[^1]: Runoob CSS position 属性

[^3] hugo + sass

Css & Scss

http://icarus.shaojiemike.top/2022/05/16/Work/Programming/2-languageGrammar/CssScss/

Author

Shaojie Tan

Posted on

2022-05-16

Updated on

2025-01-30

Licensed under

#

Like this article? Support the author with

Follow

Categories

Subscribe for updates

follow.it

Links

Recents

Archives

Tags

5G1
64bits vs 32bits1
AI3
AMAT1
AMD3
ASPLOS1
ATI1
AVX2
Algorithm1
Alpha1
Analysis1
Apt1
Assembly4
BFS1
BHive1
BT3
BTL1
Baka Mitai1
Bash1
Big-Endian1
×