SCSS 备忘单

2025-05-24

SCSS 备忘单

什么是 SCSS

SCSS 的全称是 Sassy CSS。Sassy CSS 是一个 CSS 预处理器，它允许你使用 Vanilla（普通）CSS 中没有的功能。
在本文中，我将列出、解释并举例说明其中一些功能。

变量

在 SCSS 中，您可以轻松声明变量。要创建变量，只需$在变量名称后添加一个符号，然后像普通 CSS 属性一样设置它们。

// Font-weight for a project

$font-light : 400
$font-thick: 500
$font-heavy: 600

.element{
    Font-weight: $font-light;
}

//color palette for a project to maintain consistency

$product-dark-blue: #324e85
$product-light-blue:#4c7396
$product-lighter-blue:#9bb7cf

.element{
    color: $product-dark-blue;
}
Enter fullscreen mode Exit fullscreen mode

嵌套

SCSS 允许嵌套 CSS 规则

// vanilla CSS

.container {
  Width: 100%;
  Color: grey;
  Background-color: green;
}
.container div {
  Border: 1px solid black;
}
.container div a {
  text-decoration: none;
  color: #f2f2f2;
}
.container div a::hover {
  color: #b2b2b2;
}
Enter fullscreen mode Exit fullscreen mode 
// SCSS

.container {
  width: 100%;
  color: grey;
  background-color: green;

  div {
    border: 1px solid black;

    a {
      text-decoration: none;
      color: #f2f2f2;
      &::hover {
        color: #b2b2b2;
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

是不是很酷炫？SCSS 帮你写出更简洁的 CSS。

继承（使用@extend或@mixin）

@延长

@extends帮助您继承另一个类的属性。


// SCSS
.header {
  color: grey;
}

.sub-header {
  @extend .header;
  font-size: 40px;
}
Enter fullscreen mode Exit fullscreen mode

以下是 SCSS 编译后的内容


// Compiled CSS

.header, .sub-header {
  color: grey;
}

.sub-header {
  font-size: 40px;
}
Enter fullscreen mode Exit fullscreen mode
混合

Mixin 是 SCSS 使用 实现继承的另一种方式。您可以使用 实现与使用@mixin相同的效果。首先使用 创建 mixin，然后使用 将其添加到任何需要该属性的类中@extendmixin@mixin@include

// SCSS

//create mixin
@mixin red-color{
  color: grey;
}

.header{
  @include red-color;  /* add mixin */
}

.sub-header{
  @include red-color;
  font-size: 40px;
}
Enter fullscreen mode Exit fullscreen mode 
.header {
  color: grey;
}

.sub-header {
  color: grey;
  font-size: 40px;
}
Enter fullscreen mode Exit fullscreen mode

您能看到和css的编译之间的区别吗？将样式放在两个选择器（标题和子标题）中，而用逗号分隔两个选择器，然后将此样式应用于它们。@extend@mixin@mixin@extend

但有一件事是不能@mixin做的@extend，那就是传递参数并使用它。@mixin也可以为参数采用默认值。

// SCSS

@mixin fontSize ($params: 10px){
  font-size: $params;
}

.header{
  @include fontSize(20px);
}

.sub-header{
  @include fontSize(20px);
}
Enter fullscreen mode Exit fullscreen mode 
// Compiled CSS
.header {
  font-size: 20px;
}

.sub-header {
  font-size: 20px;
}
Enter fullscreen mode Exit fullscreen mode

如果您需要继承一个类，您可以使用其中任何一个，但根据CSS 技巧，最佳做法是在不传递参数时使用 @extend。

进口

SCSS 允许您使用以下方式将其他 SCSS 样式表导入到 SCSS 文件中@import

@import “button.scss” or @import “button”
Enter fullscreen mode Exit fullscreen mode

部分

部分文件是指您不想将其编译为 CSS 格式的 SCSS 文件，但想将其（使用@import）导入到另一个文件中。要创建部分文件，您只需在文件名开头添加下划线_font.scss，然后就可以导入带或不带下划线的文件。
部分文件有助于模块化代码并分离关注点。
例如，在我的项目中，我会为颜色、字体、按钮等创建部分文件，然后将它们导入到 main.scss 文件中。

/* _colors.scss(partial) */

$light-gray: #F2F2F2
$dark-gray: #737373
/*EOF colors.scss*/

/* _buttons.scss(partial) */

.button-primary{
  color: #4c7396;
  background-color: #ffffff;
}
.button-secondary{
  background: #4c7396;
  color: #FFFFFF;
}
/*EOF buttons.scss*/

/* main.scss */
@import "_buttons.scss"
@import "_colors.scss"
Enter fullscreen mode Exit fullscreen mode

运算符

Scss 提供了多种可在 CSS 中使用的运算符。算术运算符如下：

  • 加法(+)
  • 减法(-)
  • 分配（/）
  • 乘法(*)等

// SCSS
@mixin top-margin ($margin){
  margin-top: 30px + $margin;
}

.container{
  width: 800px - 80px;
  @include top-margin(10px);
}

//Compiled CSS

.container {
  width: 720px;
  margin-top: 40px;
}
Enter fullscreen mode Exit fullscreen mode

请注意，算术运算符仅当两个值使用相同单位时才有效rem，即em，，px

它们还支持比较运算符==，如!=、、、、和逻辑运算符、、<。>>=<=andornot

您可以查看这篇文章了解有关运算符的更多信息

莎拉·奇玛

SASS 运算符

Sarah Chima ・ 2017年11月24日

#sass #css #初学者

颜色函数

Scss 提供了一些可以用来操作颜色的函数。其中包括：

  • mix($colorX, $colorY, weight) ：此函数用于混合两种颜色。第一个参数是第一种颜色，第二个参数是第二种颜色，第三个参数是要混合的第一种颜色的百分比。
mix(blue, grey, 30%) /*results 30% blue and 70% grey*/
Enter fullscreen mode Exit fullscreen mode
  • lighten($color, $amount)：此函数用于返回较浅的颜色。第一个参数是颜色，第二个参数是要使其变浅的百分比。
lighten(#ff0000, 30 ) /*results #ff9999/*
Enter fullscreen mode Exit fullscreen mode
  • darken($color, $amount)：采用与 lighten 函数类似的参数，但返回指定的较暗颜色。
darken(#ff0000, 30 ) /*results #660000*/
Enter fullscreen mode Exit fullscreen mode

  • opacify($color, $amount)：此函数返回不透明度增加的颜色。第一个参数是颜色，第二个参数是介于 0 到 1 之间的值。

  • transparentize($color, $amount)：此函数使颜色更加透明，其参数与 opacify 类似。它返回不透明度降低的颜色。您可以说它与 opacify 相反。

这些只是 Scss 中可用的部分颜色函数，您可以查看文档了解更多信息。

其他功能

Scss 还提供其他可能对你有用的功能

  • str-length($string)：此函数返回字符串中的字符数。
  • percentage($number)：此函数将没有单位的数字转换为百分比。
  • round($number)：此函数将数字四舍五入为最接近的整数。
  • min($number1, $number2, $number3, …..)：此函数返回一组数字中的最小值。
  • random()：这将返回一个随机数并且不带任何参数。
  • quote($string)：此函数将引号添加到字符串。
  • unquote($string)：此函数从字符串中删除引号。
  • to-lower-case($string)：此函数将字符串转换为小写。
  • to-upper-case($string)：此函数将字符串转换为大写。

循环

再次感谢 Scss，我们可以在 CSS 中使用for循环。这在创建实用类时非常有用。你可以为颜色、字体大小、边距、填充以及许多其他属性创建类。

下面是我在项目中创建实用程序类时使用的一些循环示例

/* Generate utility classes for font-size */

@for $x from 1 through 70 {
  .font-size-#{$x} {
    font-size: 0px + $x;
  }
}
Enter fullscreen mode Exit fullscreen mode

因此，如果我需要在元素上添加 font-size-20 类，我可以轻松实现。

/* Generate utility classes for margin */

@for $i from 0 through 500 {
  .m#{$i} {
    margin: 0px + $i;
  }
  .mt#{$i} {
    margin-top: 0px + $i;
  }
  .mb#{$i} {
    margin-bottom: 0px + $i;
  }
  .ml#{$i} {
    margin-left: 0px + $i;
  }
  .mr#{$i} {
    margin-right: 0px + $i;
  }
}
Enter fullscreen mode Exit fullscreen mode

如果你在项目中使用循环创建了实用类，请在评论区分享，以便其他人也能借鉴。循环就像我最喜欢的 SCSS 功能一样。

条件语句

scss 的另一个很棒的功能是能够在 css 中使用 If/else 语句。我在我的任何项目中都没有真正使用过这个功能，但我认为它很棒。

$bg: pink;
$bg-mobile: red;

p {
  @if $bg == pink {
    color: blue;
  } @else if $bg-mobile == red {
    color: green;
  } @else {
    color: grey;
  }
}
Enter fullscreen mode Exit fullscreen mode

这只是 if else 语句的一个简单用例，如果您在项目中使用过它，请在评论中分享代码片段。

Scss 的功能远不止本文介绍的这些，但这些是常用的功能。您可以查看其文档。

文章来源：https://dev.to/finallynero/scss-cheatsheet-7g6
Devto 翻译
PREV
11 个免费且有趣的 API，你必须在你的业余项目中使用
NEXT
使用 Vim 作为 Web 开发的主要编辑器