CSS预处理器之Sass（二）-阿里云开发者社区

CSS预处理器之Sass（二）

2024-07-02 22

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： CSS预处理器之Sass（二）

CSS预处理器之Sass（一）：https://developer.aliyun.com/article/1556766

2.4.2 %foo 的基础使用

咱们使用占位符选择器的使用用来定义按钮的基本样式，然后将其继承给 3 种类型的按钮

%button-base {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  border: 1px solid #000;
  color: #000;
  background-color: #fff;
}

.button-primary {
  @extend %button-base;
  background-color: #007bff;
  color: #fff;
}

.button-secondary {
  @extend %button-base;
  background-color: #6c757d;
  color: #fff;
}

.button-success {
  @extend %button-base;
  background-color: #28a745;
  color: #fff;
}

转为 css 后

index.css

.button-success, .button-secondary, .button-primary {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  border: 1px solid #000;
  color: #000;
  background-color: #fff;
}

.button-primary {
  background-color: #007bff;
  color: #fff;
}

.button-secondary {
  background-color: #6c757d;
  color: #fff;
}

.button-success {
  background-color: #28a745;
  color: #fff;
}
/*# sourceMappingURL=index.css.map */

③ Sass 代码注释 ✅

多行注释

/*
  多行注释
*/

单行注释

// 单行注释

④ Sass 变量 ✅

4.1 css 中变量的定义与使用

/*
`:root` 伪类选择器用于选择文档根元素，对于 HTML 文档来说，它选择的是 `<html>` 元素。在这里，它定义了全局的 `CSS` 变量。
*/
:root {
  --color: red;
}
/*
`body` 选择器选择了页面的 `<body>` 元素，这里定义了其他全局的 `CSS` 变量。
*/
body {
  --border-color: #ccc;
}
/*
`.header` 选择器选择了页面的 .header 类元素，这里定义了 header 元素区域的 `CSS` 变量
*/
.header {
  --background-color: #f2f2f2;
}

4.2 Sass 变量的定义

定义规则

变量以 $ 开头，后跟变量名
变量名是不以数字开头的可包含字母、数字、下划线、横线（连接符）

注意：连接符与下划线定义的同名变量为同一变量

$font-size: 14px;
$font_size: 20px;
.container {
  font-size: $font-size;
}

4.2 Sass 变量的作用域

全局作用域
在 Sass 文件的任何地方定义的变量都具有全局作用域，可以在整个文件中访问和使用。这意味着在文件的任何位置都可以使用该变量，包括嵌套的规则块内部。
局部作用域
局部作用域是指在特定的规则块内部定义的变量，只能在该规则块内部使用。这些变量在规则块外部是不可见的。当规则块嵌套时，内部规则块可以访问外部规则块的变量，但外部规则块无法访问内部规则块的变量。

$color: red; // 全局作用域

body {
  $size: 16px; // 局部作用域
  font-size: $size;
  
  .container {
    color: $color; // 可以访问全局变量
    width: $width; // 错误，无法访问外部规则块的变量
  }
}

全局作用域的另一种定义方法

在局部作用域中定义一个变量时，它默认只在当前作用域内有效。但是，如果希望将该变量声明为全局变量，可以在变量赋值语句的末尾添加 !global 标志。

$color: red; // 全局变量

body {
  $size: 16px; // 局部变量
  font-size: $size;
  
  .container {
    $color: blue !global; // 声明为全局变量
    color: $color; // 使用全局变量
  }
}

4.3 Sass 变量值类型

Sass 支持 6 种主要的数据类型

数字:：1、2、10px
字符串（有引用与无引用字符串）：“foo”、‘bar’、car
颜色：blue、#000、rgba(0, 0, 0, .5)
布尔值
空值：null
list：用空格或逗号作分隔符，1.5em 1em 0 2em，Helvetica, Arial, sans-serif
maps, 相当于 JavaScript 的 object，(key1：value1, key2：value2)

$layer-index: 10;
$border-width: 3px;
$font-base-family: 'Open Sans' , Helvetica, Sans-serif;
$top-bg-color: rgba(255, 147, 29, 0.6);
$block-mode: true;
$var: null;
$color-map: (color1: red, color2: #ccc, color3: pink);
$fonts: (serif: 'Helvetica Neue', monospace: "Consolas");

.container {
  $font-size: 16px !global;
  font-size: $font-size;
  @if $block-mode {
    background-color: #000;
  }
  @else {
    background-color: #fff;
  }
  content: type-of($var);
  content: length($var);
  color: map-get($color-map, color2);
}

.footer {
  font-size: $font-size;
}

.wrap {
  font: 18px bold map-get($fonts, "sans");  // 如果没找到 key ，就为空
}

转为 css 后

index.css

.container {
  font-size: 16px;
  background-color: #000;
  content: null;
  content: 1;
  color: #ccc;
}

.footer {
  font-size: 16px;
}

.wrap {
  font: 18px bold;
}
/*# sourceMappingURL=01-scss的语法扩张.css.map */

4.3 Sass 变量值的默认值设置

$color: #ccc;
$color: #333 !default;
.container {
  border-color: $color;
}

⑤ Sass 导入@import ✅

5.1 css 中的导入方法

@import url('public.css');

5.2 Sass 中使用

public.scss

$border-color: red;

index.scss

@import 'public.scss';
border: 1px solid $border-color;

5.3 注意事项

如下的几种方式将不会导入任何 Sass 文件

文件拓展名是 .css

@import "public.css";

文件名是以 http:// 开头

@import "http://xxx.com/xxx";

使用的是 url()

@import url(public.scss);

@import 包含了媒体查询

@import  'landscape' screen and (orientation:landscape);

5.4 局部文件的概念

如果不希望 _public.scss 文件被 Sass 检测到并编译成 CSS，可以将文件名改为以下划线开头的形式，例如 _public.scss。这是 Sass 的约定，以此命名的文件会被视为局部文件，不会被直接编译成独立的 CSS 文件。

当你在其他 Sass 文件中使用 @import 导入 _public.scss 文件时，只会将其中的变量和混合器等内容引入到当前文件中，而不会生成额外的 CSS 输出。

例如，在另一个 Sass 文件中导入 _public.scss 文件：

@import 'path/to/_public.scss';
/*
  在这里可以使用 _public.scss 中定义的变量和混合器
*/

⑥ Sass 混合指令（Mixin Directives）✅

⑦ Sass @extend 继承指令 ✅

Sass 的 @extend 指令用于实现样式的继承。通过 @extend，可以将一个选择器的样式规则继承到另一个选择器中，从而避免重复编写相似的样式

7.1 单继承

index.scss

.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    font-size: 12px;
}

.alert-info {
    @extend .alert;
    color: blue;
    background-color: #BDBEEA;
    border-color: #fafafa;
}

.alert-success {
    @extend .alert;
    color: green;
    background-color: #B1EBB6;
    border-color: #fafafa;
}

.alert-warning {
    @extend .alert;
    color: orange;
    background-color: #E8CEA1;
    border-color: #fafafa;
}

.alert-danger {
    @extend .alert;
    color: red;
    background-color: #EAABAD;
    border-color: #fafafa;
}

转为 css 后

index.css

.alert, .alert-danger, .alert-warning, .alert-success, .alert-info {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  font-size: 12px;
}

.alert-info {
  color: blue;
  background-color: #BDBEEA;
  border-color: #fafafa;
}

.alert-success {
  color: green;
  background-color: #B1EBB6;
  border-color: #fafafa;
}

.alert-warning {
  color: orange;
  background-color: #E8CEA1;
  border-color: #fafafa;
}

.alert-danger {
  color: red;
  background-color: #EAABAD;
  border-color: #fafafa;
}
/*# sourceMappingURL=index.css.map */

CSS预处理器之Sass（三）：https://developer.aliyun.com/article/1556766

CSS预处理器之Sass（二）

2.4.2 %foo 的基础使用

③ Sass 代码注释 ✅

④ Sass 变量 ✅

4.1 css 中变量的定义与使用

4.2 Sass 变量的定义

4.2 Sass 变量的作用域

4.3 Sass 变量值类型

4.3 Sass 变量值的默认值设置

⑤ Sass 导入@import ✅

5.1 css 中的导入方法

5.2 Sass 中使用

5.3 注意事项

5.4 局部文件的概念

⑥ Sass 混合指令（Mixin Directives）✅

⑦ Sass @extend 继承指令 ✅

7.1 单继承

热门文章

最新文章

相关课程

相关电子书

相关实验场景