GuluWater

Appearance

SCSS ​

基本操作规则 单文件编译可以在下面的网站进行操作，多文件编译见下下节，中文文档缺失的东西挺多的，有条件的可以翻看英文文档。 中文文档：https://www.sass.hk 英文文档：https://sass-lang.com/documen... CSS转Scss：https://www.sass.hk/css2sass Scss转CSS：https://www.sassmeister.com

输出格式 ​

:::tips dart sass只支持expanded和compressed。 :::

:nested ​

nested是 scss默认的输出格式，选择器与属性等单独占用一行，缩进量与 scss文件中一致，每行的缩进量反映了其在嵌套规则内的层数。

css
#main {
  color: #fff;
  background-color: #000; }
  #main p {
    width: 10em; }

.p {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline; }

:expanded ​

expanded输出像是我们平常手写的样式，选择器、属性等各占用一行，属性根据选择器缩进，而选择器不做任何缩进。

css
#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
}

.p {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline;
}

:compact ​

compact会将每条 css 规则归纳为一行。嵌套过的选择器在输出时没有空行，不嵌套的选择器会输出空白行作为分隔符。

css
#main { color: #fff; background-color: #000; }
#main p { width: 10em; }

.p { font-size: 10em; font-weight: bold; text-decoration: underline; }

:compressed ​

compressed会删除所有无意义的空格、空白行、以及注释，力求将文件体积压缩到最小，同时也会做出其他调整，比如会自动替换占用空间最小的颜色表达方式。

css
#main{color:#fff;background-color:#000}#main p{width:10em}.p{font-size:10em;font-weight:bold;text-decoration:underline}

语法嵌套规则 ​

```css 这个是正常的css结构 .container { width: 1200px; margin: 0 auto; } .container .header .img { width: 100px; height: 60px; }

编译成scss的样子，子元素向父元素内部嵌套了。 .container { width: 1200px; margin: 0 auto; .header { .img { width: 100px; height: 60px; } } }




#### 属性嵌套

<hr/>

```css
有些css属性遵循相同的命名空间 (相同的开头)，比如font-family，font-size，font-weight都以font作为属性的命名空间。为了便于管理这样的属性，也为了避免重复输入。（这个编辑器提示有点不太理想……，不是很好用）。

.container {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

编译成css
.container {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold;
}

命名空间也可以包含自己的属性值
.container {
  color: red {
    adjust: fantasy;
  }
}

编译成css
.container {
  color: red;
  color-adjust: fantasy;
}

父选择器& ​

在嵌套 css规则时，有时会需要使用嵌套外层的父选择器，例如，当给某个元素设定 hover 样式时，可以用& 代表嵌套规则外层的父选择器，scss在编译时会把&替换成父选择器名。

案例里面的&表示的就是父级a选择器

js
.container {
    a {
        color: #333;
        &:hover {
             text-decoration: underline;
             color: #f00;
        }
    }
}

转化成scss
.container a {
    color:#333;
}
.container a:hover {
    text-decoration:underline;
    color:#F00;
}

换个思路，也可以使用&进行选择器名称拼接。

js
.main {
    color: black;
    &-sidebar { border: 1px solid; }
}

转化成css

js
.main {
    color: black;
}
.main-sidebar {
    border: 1px solid;
}

Scss的两种注释 ​

多行注释/* ... */ ​

多行注释会编译到.css文件中,compressed（压缩）模式下除外， 将 !作为多行注释的第一个字符表示在压缩输出模式下也保留这条注释，通常用于添加版权信息。

css
/*!
* 我是
* 多行
* 注释
*/
body { color: black; }

编译成css

css
/*!
* 我是
* 多行
* 注释 
*/body{color:#000}

单行注释// ​

单行注释不会编译到.css文件

css
// 我是单行注释
body { color: black; }

编译成css

css
body {
  color: black;
}

变量 ​

使用 ​

原生css中的变量，使用--变量名:变量值定义，var(--变量名)进行使用。

css
:root {
    --color: #F00;
}
p {
    color: var(--color);
}

scss中的变量，以美元符号$开头，赋值方法与 css属性的写法一样。

css
$color:#F00;
p {
    color: $color;
}

转行成css

css
p {
    color: #F00;
}

5条变量规则 ​

下文的mixin和function命名也遵循1234条规则：

  1. 变量以美元符号$开头，后面跟变量名；
  2. 变量名是不以数字开头的可包含字母、数字、下划线、横线（连接符）；
  3. 通过连接符-与下划线_定义的同名变量为同一变量；
  4. 变量一定要先定义，后使用；
  5. 写法同css，即变量名和值之间用冒号:分隔；

2种变量作用域 ​

  1. 变量作用域分为全局变量域和局部变量域：
    • 全局变量：声明在最外层的变量，可在任何地方使用；
    • 局部变量：嵌套规则内定义的变量只能在嵌套规则内使用。
  2. 将局部变量转换为全局变量可以添加!global 声明。
css
$color: red;
.container {
    $height: 500px;
    $font-size: 16px !global;
    font-size: $font-size;
    color: $color;
    height: $height;
}
.footer {
    /**$font-size使用!global 申明成全局变量了*/
    font-size: $font-size; 
    /**
    * Error: Undefined variable. 
    * $height是.container下的局部变量，无法在.footer下面编译
    */
    height:$height;
}

编译成css

css
.container {
    font-size: 16px;
    color: red;
    height: 500px;
}

.footer {
     /**$font-size使用!global 申明成全局变量了*/
    font-size: 16px;
}

7种主要的数据类型 ​

scss支持7种主要的数据类型：

  1. 数字，1rem、2vh、13、 10px；
  2. 字符串，分有引号字符串与无引号字符串，"foo"、 'bar'、baz；
  3. 颜色，blue, #04a3f9, rgba(255,0,0,0.5)；
  4. 布尔型，true和false；
  5. 空值，null是其类型的唯一值。表示缺少值，通常由函数返回以表示缺少结果；
  6. 数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em,Helvetica,Arial,sans-serif；
  7. maps， 相当于 JavaScript 的 object，(key1: value1, key2: value2)；

官网中把Function也当作一种类型，点击原文了解。

css
$layer-index: 10;
$border-width: 3px;

$font-weight: bold;

$font-base-family: "Open Sans", Helvetica, Sans-Serif;
$block-base-padding: 6px 10px 6px 10px;

$top-bg-color: rgba(255, 147, 29, 0.6);

$blank-mode: true;

$var: null;

$fonts: (
  serif: "Helvetica Neue",
  monospace: "Consolas",
);

.container {
  font-family: $font-base-family;
  font-size: $font-size;
  padding: $block-base-padding;

  @if $blank-mode {
    background-color: #000;
  } @else {
    background-color: #fff;
  }

  content: type-of($var);
  content: length($var);
  color: $top-bg-color;
}

// 如果列表中包含空值，则生成的CSS中将忽略该空值。
.wrap {
  font: 18px $font-weight map-get($fonts, "sans");
}

编译成css

css
.container {
  font-family: "Open Sans", Helvetica, Sans-Serif;
  font-size: 16px;
  padding: 6px 10px 6px 10px;
  background-color: #000;
  content: null;
  content: 1;
  color: rgba(255, 147, 29, 0.6);
}

.wrap {
  font: 18px bold; // 如果列表中包含空值，则生成的CSS中将忽略该空值。
}

scss属性也支持其他值，比如Unicode字符集，或!important 声明。但是scss 不会特殊对待这些属性值，一律视为无引号字符串。

css
$color:red;
.container {
    color:$color !important;
}

编译成css

css
.container {
  color: red !important;
}

!default ​

可以在变量的结尾添加!default来给变量设置默认值，有点类似Javascript的逻辑运算符let content=content || "Second content"。注意，变量是 null时将视为未被!default赋值。

css
$content: "First content";
// 如果$content之前没定义就使用如下的默认值
$content: "Second content" !default;
#main {
    content: $content;
}

编译成css

css
#main {
  content: "First content";
}

2024 Alvisliu. All Rights Reserved.

Copyright © 2023-present Alvis Liu