Sass 快速入门

基础语法

Sass 是世界上最成熟、最稳定、最强大的专业级CSS扩展语言。

文档: 前往 sass 官网

前置说明

介绍

Sass 是一种 Css 的扩展语言和预编译处理工具，提供了一种类似编程方式来编写样式代码。遵循 Sass 语法，用编程的方式去理解和书写样式，从而提高样式的开发效率和可维护性。

既然说了 Sass 是 Css 的扩展语言，那么一切合法的 Css 语言也就完全可以写在 Sass 文件中。类似 Typescript 是 Javascript 的超集一样。

编译sass

安装sass编译工具

bash

$ npm install -g sass

编译sass文件

bash

$ sass input.scss output.css [-w]

模块化

通过下划线开头的方式来命名 sass 文件（比如 _filename.scss），编译工具将不会把该模块文件编译输出为单独的 .css 文件。引入该下划线命名的模块时，不需要开头的下划线。

引入示例代码如下：

_theme-color.scssindex.scss

scss

$primary-color: red;

scss

@use 'theme-color';

.title {
  color: theme-color.$primary-color;
  margin: 5px;
}

错误定位

当 Sass 在样式表中遇到无效语法时，会解析失败，并向用户显示错误信息，其中包含无效语法的位置及其无效原因，便于用户更正问题。

注释

scss

// 双斜线用于单行注释

/** css的注释也适用于sass */

自定义属性

自定义属性如果要用变量，注意使用插值语法来使用变量，否则会被原封不动编译到原位。

如果自定义属性中引用的变量值是需要带引号，则需要借助 meta.inspect() 函数辅助。

index.scss

scss

@use 'sass:meta';

$color: red;
$raleway: 'Segoe UI', sans-serif;

:root {
  --primary-color: #{$color}; // success => 编译结果为 --primary-color: red;
  // --warning-color: $color; // error => 编译结果为 --primary-color: $color;

  --font-raleway: #{meta.inspect($raleway)}; // success => 编译结果： --font-raleway: "Segoe UI", sans-serif;
  // --font-raleway_: #{$raleway}; // error => 编译结果： --font-raleway: Segoe UI, sans-serif;
}

隐藏声明

有时你可能只想让某个属性声明在某些时候显示。如果声明的值为空 null 或未加引号的空字符串，Sass 就不将该声明编译成CSS 。其中 sass() 用来判断

index.scssindex.css

scss

$rounded-corners: false;

.button {
  border: 1px solid black;
  border-radius: if(sass($rounded-corners): 5px);
}

css

.button {
  border: 1px solid black;
}

规则

& 是 sass 设计的一种特殊选择器，用于在嵌套选择器中引用外部选择器。

编译前的 index.scss编译后的 index.css

scss

.alert {
  &:hover {
    font-weight: bold;
  }

  [dir='rtl'] & {
    margin-left: 0;
    margin-right: 10px;
  }

  :not(&) {
    opacity: 0.8;
  }
}

css

CSS输出 .alert:hover {
  font-weight: bold;
}
[dir='rtl'] .alert {
  margin-left: 0;
  margin-right: 10px;
}
:not(.alert) {
  opacity: 0.8;
}

BEM 命名

科普

BEM（块元素修饰符）全称Block-Element-Modifier，是由Yandex团队提出的前端CSS命名方法论，旨在通过规范命名规则提升代码可维护性与团队协作效率。

其核心概念是将界面分解为独立块(Block)、块内元素(Element)及状态修饰符(Modifier)三个层级。命名规范采用.blockelement--modifier结构：块名作为独立组件基础，元素通过双下划线()与块名连接，修饰符通过双短横线(--)表示状态变化。该方法要求CSS类名仅由块、元素、修饰符三部分组成，避免多层嵌套选择器。

index.scssindex.css

scss

.dialog {
  color: red;
  &__title {
    text-align: center;
  }
}

scss

.dialog {
  color: red;
}
.dialog__title {
  text-align: center;
}

Scss 基础

官方参考文档: 前往Sass官网
中文文档: 前往Sass中文文档

环境搭建

前提需要安装VSCode插件Live Sass Compiler，之后就可以在下面的状态栏启动运行了。该插件会实时根据scss文件变化进行编译生成css文件。
.scss文件名前面加_下划线，不会被编译成对应的css文件。比如vars.scss文件，你应该取名为_vars.scss，那么就不会编译出对应的单个vars.css文件了。记住：导入_vars.scss模块的时候，导入文件名不需要加_下划线，直接就写成你的scss存放路径加不带下划线和后缀的文件名，比如@import 'vars'; 即可！！！

详情

settings.json

json

{
  /** other settings... */
  "liveSassCompile.settings.formats": [
    {
      /*
                nested: 嵌套格式
                expanded: 展开格式
                compact: 紧凑格式
                compressed: 压缩格式
            */
      "format": "expanded", // 编译的css格式
      "extensionName": ".css", // 扩展名
      "savePath": "/dist" // 保存路径(null 的话, 保存到和源文件同一目录。 ~、/标识当前VSCode打开的项目根目录)
    }
  ],
  /* 排除目录 */
  "liveSassCompile.settings.excludeList": [
    "/**/node_modules/**",
    "/.vscode/**"
  ],
  /*包含编译的文件*/
  "liveSassCompile.settings.includeItems": [
    "/src/**/**.scss" // 有哪些目录下的scss文件需要编译，就包括在这里来
  ],
  /* 是否生成对应的 map 文件*/
  "liveSassCompile.settings.generateMap": false, // 是否生成对应的 map 文件
  /* 是否添加浏览器兼容前缀 */
  "liveSassCompile.settings.autoprefix": false // 是否添加浏览器兼容前缀, 设置为false，那么不管浏览器兼容问题，只生成标准的css
  /*"liveSassCompile.settings.autoprefix": [
        "> 1%", // 兼容最新的浏览器版本
        "last 2 versions",  // 兼容最新两个版本
    ]*/
}

注释

scss

// 单行注释

/**
多行注释内容

*/

sass 数据类型

scss

// 空值
$var1: null;
// 数字
$var2: 520;
$var3: 520px;
// 字符串
$var4: '*';
// 颜色
$var5: red;
$var6: #0f0;
$var7: rgb(0, 0, 255);
// 布尔值
$var8: true;
// list数组
$var9: 1px, 2px, 3px; // 逗号的方式定义数组
$var10: 4px 5px 6px; // 空格的方式定义数组
// map对象
$var11: (
  name: 'zy',
  age: 18
);

定义变量

信息

遵循先定义后使用的规则。
变量命名要求：以$开头，中间由数字、大小写字母、_、-组成，不能以数字开头。
在选择器中改写全局变量可以通过 !global
通过 !default 定义变量默认值，如果后面重新赋值，则采用新的值。

scss

// 赋予默认值
$a: red !default;
$a: blue; // 可以修改默认值

// 定义变量
$sidebar-width: 100px;
// 改写变量
.header {
  //不加 !global 就表示创建了一个同名的局部变量，对变量的任何操作都不会影响外部变量的值
  $sidebar-width: 200px !global; // 已经被修改, 后面再使用就会受到影响
  width: $sidebar-width;
}
.main {
  width: $sidebar-width;
}

使用变量

scss

$var: 5px 10px 20px;
$var1: red;
$var2: (
  name: 'zy',
  age: 18
);

.header::after {
  margin: $var; // 使用数组的所有值
  padding: nth($list: $var, $n: 1); // 通过 nth 函数来获取数组里面具体某一项的值
  // 对象通过 map-get 函数获取值, 如果键不存在则返回 null, null会被忽略
  content: map-get($map: $var2, $key: 'name');
  color: $var1;
}

导入

说明

通过 @import url('xxx.css') 可以导入css模块和请求远程css资源，但是不能用来导入scss模块。
通过@import 可以导入scss模块，在导入scss模块时，不需要加.scss文件名后缀。

导入css资源

scss

@import './custom.css';
@import url('xxx.css');
@import url('https://xxx.com/custom.css');

嵌套

详情

scss

body {
  @include size(100px, 160px);
  // (1)子孙选择器
  .container {
    @include size(100vw, 100vh);
    background-color: #eee;
  }
  // (2)直接选择器(子代选择器)
  > .row {
    width: 100%;
  }
  // (3)伪元素选择器
  &::after {
    content: '';
    display: block;
    background-color: #f00;
  }
  // (4)兄弟选择器, 也可以在前面加 &, 标识父级元素与其拼接成的选择器
  + .row {
    margin-top: 20px;
  }
  // (5)选择除该元素外其他后面平级的兄弟元素
  div ~ .col {
    color: black;
  }
  // (6)选中具有符合条件的所有元素
  &::has(+ input[data-required])::after {
    content: '*';
    color: red;
  }
  // (7) 选中具有多个类名的元素
  .base {
    &.second {
      color: red;
    }
  }
}

继承

scss

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

.alert-info {
  @extend .alert;
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}

css

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

.alert-info {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}

scss

// 占位(.btn 与 %base 之间空格表示的意思就不一样了)
// .btn%base 是一个元素同时具有两个类名，.btn %base是一个具有 .btn 类名的元素，其子孙元素身上具有 .btn-default
.btn%base {
  width: 100px;
  height: 50px;
}
// 样式继承
.btn-default {
  @extend %base;
}

css

.btn.btn-default {
  width: 100px;
  height: 50px;
}

css

.btn .btn-default {
  width: 100px;
  height: 50px;
}

占位符

说明

你可能发现被继承的css父类并没有被实际应用，也就是说html代码中没有使用该类，它的唯一目的就是扩展其他选择器。
对于该类，可能不希望被编译输出到最终的css文件中，它只会增加css文件的大小，永远不会被使用。
这就是占位符选择器的作用。
占位符选择器类似于类选择器，但是，它们不是以句点(.)开头，而是以百分号(%)开头。
当在Sass文件中使用占位符选择器时，它可以用于扩展其他选择器，但不会被编译成最终的CSS。

源代码示例编译后的结果

scss

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

.alert-info {
  @extend %alert;
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}

scss

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

.alert-info {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}

各种运算符

等号运算符

运算符	功能描述
==	判断两个值是否相等
!=	判断两个值是否不相等

关系运算符

运算符	功能描述
<	小于
>	大于
<=	小于等于
>=	大于等于

逻辑运算符

运算符	功能描述
and	逻辑与
or	逻辑或
not	逻辑非

数字操作符

运算符	功能描述
+	加
-	减
*	乘
/	除
%	取模

除法运算说明

以下三种情况/将被视为除法运算符号：
如果值或值的一部分，是变量或者函数的返回值
如果值被圆括号包裹
如果值是算术表达式的一部分
相同单位相除，单位会被抵消掉。 :::

%百分比单位运算细节

%只能与同单位的相加减，不能与其他单位相加减。因为不能确定这个百分比具体是多少px。而像pt这种系统固定单位，就可以与px单位进行运算。

*乘法不能用于两个都带单位的值运算，否则单位也会被连接起来。 :::

字符串运算
插值语句
- 通过#{变量}的方式将值插入到这个位置。

scss

$font-size: 12px;
$line-height: 30px;
p {
  font: $font-size/$line-height Helvetica;
}

css

/**显然不是我们想要的结果 */
p {
  font: 0.4 Helvetica;
}

scss

/**通过 #{变量} 方式将值插入到这里来 */
$font-size: 12px;
$line-height: 30px;
p {
  font: #{$font-size}/#{$line-height} Helvetica;
}

scss

p {
  font: 12px/30px Helvetica;
}

scss

$class-name: danger;
$attr: color;
p.#{$class-name} {
  border-#{$attr}: #f00;
}

css

p.danger {
  border-color: #f00;
}

判断

判断语句使用@if、@else if、@else指令组合进行控制。

scss

$theme: 'light';
.container {
  @if $theme == 'light' {
    background: #fff;
  } @else if $theme == 'dark' {
    background: #000;
  } @else {
    background: white;
  }
}

内置函数

函数名称	功能描述
darken	返回对颜色值按调暗百分比计算后的颜色值
lighten	返回对颜色值进行调亮百分比计算后的颜色值
opacify	返回对颜色值按透明度叠加后的颜色值
quote	向文本添加引号
unquote	将字符串引号去掉
str-length	获取字符串长度
string-insert	将内容插入字符串指定位置
percentage	将无单位的数值转换为百分比
round	将数字四舍五入为最接近的整数
min	获取几个数字中最小值
max	获取几个数字中最大值
random	返回一个随机数

颜色函数

源代码编译后的结果

scss

p {
  color: lighten(#f00, 20%); // 计算调亮后的颜色
  background-color: darken(#fff, 20%); // 计算调暗后的颜色
  border-color: opacify(
    $color: rgba(255, 0, 0, 0.1),
    $amount: 0.6
  ); // 会进行叠加，且amount不能为负数
}

css

p {
  color: #ff6666;
  background-color: #cccccc;
  border-color: rgba(255, 0, 0, 0.7);
}

混合

提示

混合指令可以将各种代码写到一块，通过 @include 指令将这一块的代码引入到需要的地方。

mixin是可以重复使用的一组css声明。
mixin有助有减少重复代码，只需声明一次，就可以在文件中引用。
混合指令可以包含所有的css规则，绝大部分Sass规则，甚至可以通过参数功能引入变量，输出多样化的样式。
使用参数时建议加上默认值。

(1)无参数可以使用不带括号的方式定义混合

scss

@mixin block {
  /* 可以写所有的css代码，还可以写部分scss代码 */
  width: 100vw;
  height: 100vh;
  border-radius: 50%;
  border: 1px solid red;
}
.container {
  @include block;
}

(2)无参数也可以使用括号的方式定义混合

scss

@mixin block() {
  width: 100vw;
  height: 100vh;
}
.container {
  @include block();
}

(3)mixin参数: 定义必选参数

scss

@mixin block($wdith, $height) {
  width: $wdith;
  height: $height;
}
.container {
  @include block(100vw, 100vh);
}

(4)mixin参数: 指定参数默认值

scss

@mixin block($width: 100vw, $height: 100vh) {
  width: $width;
  height: $height;
}
.container {
  /**不指定给某个参数传值，那么就按照原来参数的顺序依次传入 */
  @include block(100px, 200px);
}
.container {
  /**参数有默认值的情况下，可以指定给某一个参数传值 */
  @include block($height: 100px);
}

(5)剩余参数
剩余参数：通过 ... 符号来定义剩余参数，剩余参数可以接收任意个参数，并且也可以指定默认值。比如下面的arr。

scss

@mixin block($wdith, $arr...) {
  width: $wdith;
  padding: $arr;
}
.container {
  @include block(100vw, 10px, 20px, 30px, 40px);
}

感谢赞赏

感谢赞赏

Sass 快速入门 ​

基础语法 ​

前置说明 ​

介绍 ​

编译sass ​

模块化 ​

错误定位 ​

注释 ​

自定义属性 ​

隐藏声明 ​

规则 ​

Scss 基础 ​

环境搭建 ​

注释 ​

sass 数据类型 ​

定义变量 ​

使用变量 ​

导入 ​

嵌套 ​

继承 ​

占位符 ​

各种运算符 ​

判断 ​

内置函数 ​

混合 ​

Sass 快速入门

基础语法

前置说明

介绍

编译sass

模块化

错误定位

注释

自定义属性

隐藏声明

规则

Scss 基础

环境搭建

注释

sass 数据类型

定义变量

使用变量

导入

嵌套

继承

占位符

各种运算符

判断

内置函数

混合