Scss 入门

7个月前更新

110

Scss 是对 CSS 的扩展，提供了比 CSS 更简洁的语法和更强大的功能。不过，在部署时，我们要先把 Scss 编译成 CSS，才能让浏览器识别。编译 Scss 的方法有很多，这里我们使用 VS Code 的插件 Live Sass Compiler 进行自动编译。

基本准备

配置保存目录。在 VS Code 配置文件中添加如下配置：

"liveSassCompile.settings.formats": [
    {
        "format": "expanded",
        "extensionName": ".css",
        "savePath": "/dist/css",
        "savePathReplacementPairs": null
    }
]

这将使 Scss 编译产物被放置在 /dist/css 目录下。

认识项目结构：

# 创建产物目录
mkdir -p dist/css
touch dist/index.html
# 创建 Scss 代码目录
mkdir scss
touch scss/main.scss

.
├── dist
│   ├── css
│   └── index.html
└── scss
    └── main.scss

这里 dist 目录用来存储我们的编译产物，scss 目录用来存储我们的 Scss 源代码。

基本配置：

我们来编写一些基础代码。首先在 dist/index.html 中引入 CSS 文件：

dist/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 在这里引入 CSS 文件 -->
    <link rel="stylesheet" href="./css/main.css">
    <title>Scss Tutorial</title>
</head>
<body>

</body>
</html>

接下来编辑 scss/main.scss，添加一个 CSS 规则：

body {
    background: blue;
}

使用自动编译：

使用 VS Code 打开 scss/main.scss 文件，窗口右下角可以看到 Watch Sass 的按钮。点击它，就会监视 Scss 文件的改动并自动编译到 dist/css 目录。打开 Live Server，访问 http://localhost:5500/dist，就会看到我们的 Scss 规则生效了：

Scss 变量

在 Scss 中，我们可以像这样使用变量：

scss/main.scss：

$primary-color: #272727;

body {
    background: $primary-color;
}

字典

Scss 变量可以是字典。

scss/main.scss:

$font-weights: (
    "regular": 400,
    "medium": 500,
    "bold": 700
);

body {
    font-weight: map-get($font-weights, bold);
}

dist/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/main.css">
    <title>Scss Tutorial</title>
</head>
<body>
    <div>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellendus ab accusantium molestias voluptate ex exercitationem veniam cupiditate. Velit esse accusamus autem non harum. Quasi veritatis dolorem tenetur. Sapiente, ipsam nostrum? Eos fugiat enim facere non, sit reiciendis! Sed a exercitationem, minus pariatur vero error distinctio, unde quibusdam repudiandae atque inventore.</p>
    </div>
</body>
</html>

嵌套

Scss 可以直接在一个规则中嵌套另一个规则。

scss/main.scss:

.main {
    width: 80%;
    margin: 0 auto;

    p {
        font-weight: 700;
    }
}

Partial Scss 文件

Partial Scss 文件是以下划线 _ 开头的 Scss 文件。Scss 编译器不会自动编译这些文件，只有在被其他文件引入时才会编译。

scss/_variables.scss:

$primary-color: #272727;

使用 @import 引入 Scss 文件。注意我们无需前缀 _ 和后缀 .scss。

scss/main.scss:

@import "./variables";

body {
    background: $primary-color;
}

函数

使用 @function 定义函数，使用 @return 返回值。

scss/main.scss:

$font-weights: (
    "regular": 400,
    "medium": 500,
    "bold": 700
);

@function weight($weight-name) {
    @return map-get($font-weights, $weight-name);
}

body {
    font-weight: weight(regular);
}

参考：Learn Sass in 30 Minutes | YouTube

来源链接：https://www.cnblogs.com/Undefined443/p/18655182

评分

欢迎为Ta评分