[Angular] 学习使用 Angular Material 的 SCSS 入门指南

2 年 ago

文, 翔

1 minute

我决定在Angular Material中创建一个主题。由于我完全不懂SCSS，所以我会努力学到一点点，大概能理解多少就多少吧。

官方网站：https://sass-lang.com/

语法

SCSS的语法是对CSS进行了扩展。
CSS也可以直接作为SCSS解释。

Variable.

在SCSS中，您可以声明并引用变量。

.myclass {
  $mywidth: 100%;
  width: $mywidth;
}

在中文中，使用$符号来标记，然后用冒号将其与值分隔开。

变量的作用范围

变量的作用域限定在包含其声明的 {} 内部。

如果在{}之外声明，将成为全局范围。

在 {} 的内部使用 global 将变量标记为全局作用域。

$myglobal: blue;

.myclass {
  $alsoglobal: lightblue !global;
}

变量的类型

型説明例数値数値です。1.5, 8px文字列文字列です。クォートはあってもなくてもよいです。foo, "bar"色RGB値や色の名前です。#4ff, blue真偽値trueまたはfalseです。truenullnullです。nullリストスペースまたはカンマ区切りの値です。1 1 auto, Helvetica,Sansマップキーと値の組です。言語によっては、連想配列やハッシュともいいます。(key1:value1, key2:value2)関数への参照関数への参照です。callで呼び出せます。$ref = get-function("関数名")

以@开头的指示

@导入

读取外部文件，并将其整合到一个CSS文件中。

@mixin和@include

变量是用来重复使用值的机制。
Mixin是用来重复使用整个样式的机制。

@mixin 強調 {
  font-size: 1.4em;
  font-weight: bold;
}

在混合器(mixin)中定义的样式可以通过@include进行调用。

.my-em {
  @include 強調;
}

mixin可以用带参数的方式进行声明。

@mixin 色付き枠($color) {
  border-style: solid;
  border-width: 1px;
  border-color: $color;
}

使用时需要传递参数。

@include 色付き枠(green);

@功能

你可以声明一个函数。

函数

存在着各种方便的函数定义。

rgb($red, $green, $blue) RGB値を色にします。

map_get($map, $key) マップから指定されたキーに対応する値を返します。

其他请看这里，函数列表。

稍等一下。

明白了