1+1=10

记记笔记，放松一下...

SASS 小记

碰到了，稍微整理一下，看起来以后应该不会用了

SASS名字来自 Syntactically Awesome Style Sheets的缩写。它是一种用于生成级联样式表CSS的预处理脚本语言。

格式

SASS 文件通常以 .scss 或 .sass 为扩展名，需要通过 SASS 编译器编译成标准 CSS。

1
sass styles.scss styles.css

它有两种语法格式，一种采用缩进的格式（原始格式），另一种采用类似CSS的块格式（新式格式）。后缀分别采用：

  • .sass
  • .scss

SCSS（Sassy CSS），主流

接近标准的CSS（是CSS的超集），兼容CSS代码，使用大括号和分号。

1
2
3
4
5
$primary-color: #3498db;

body {
  color: $primary-color;
}

SASS（缩进语法）

不适用大括号和分号，通过缩进层次

1
2
3
$primary-color: #3498db
body
  color: $primary-color

特性

注释

SCSS支持两种方式注释（多行注释可以在生成的css中保留）

1
2
3
4
5
6
7
// 这是一个单行注释
body {
  color: #333; // 行内注释
}

/* 这是一个多行
注释 */

CSS3 只支持 多行注释。

变量（Variables）

SCSS 提供了 $ 符号定义变量，用于存储颜色、字体、间距等常量

1
2
3
4
5
6
7
$primary-color: #3498db;
$font-size: 16px;

body {
  color: $primary-color;
  font-size: $font-size;
}

在CSS3中，自定义属性（Custom Properties）可实现类似效果

1
2
3
4
5
6
7
8
9
:root {
  --primary-color: #3498db;
  --font-size: 16px;
}

body {
  color: var(--primary-color);
  font-size: var(--font-size);
}

嵌套规则（Nesting）

SCSS 支持选择器嵌套，让代码更简洁，结构更加清晰。

1
2
3
4
5
6
7
8
nav {
  ul {
    list-style: none;
  }
  a {
    text-decoration: none;
  }
}

CSS3的嵌套，浏览器支持还不充分。

混合（Mixins）

Mixins 是SCSS提供的一种代码复用机制，类似于函数。

1
2
3
4
5
6
7
@mixin rounded($radius) {
  border-radius: $radius;
}

button {
  @include rounded(5px);
}

继承（Inheritance）

SCSS使用 @extend 来共享样式，减少重复

1
2
3
4
5
6
7
8
%button-styles {
  padding: 10px;
  border: none;
}

button {
  @extend %button-styles;
}

数学运算（Math Operations）

SCSS 支持基本的数学运算，方便计算宽度、高度、间距等

1
2
3
4
.container {
  width: 100% - 20px;
  padding: 10px / 2;
}

现代 CSS3 原生支持数学运算，可以直接使用 calc()：

1
2
3
4
.container {
  width: calc(100% - 20px);
  padding: calc(10px / 2);
}

条件与循环（Control Directives and Loops）

SCSS 支持条件语句（@if）、循环（@for、@each），用于生成动态样式

1
2
3
4
5
@for $i from 1 through 5 {
  .box-#{$i} {
    width: 10px * $i;
  }
}

模块化与导入（Partials and Imports）

SCSS 允许使用 @import 和 @use 管理模块化样式，支持分文件组织代码。

1
2
3
4
5
6
7
// _buttons.scss
.button {
  background: $primary-color;
}

// main.scss
@use 'buttons';

现代 CSS3 支持 @import，但不支持变量隔离，模块化的能力有限

历史

网上信息比较杂，还是先看历史。

1
ruby sass => libsass => dart sass

ruby sass

  • https://sass-lang.com/ruby-sass/

最早的sass开源版本，是2006年采用ruby语言开发的。需要安装ruby才能使用，且不能被node调用。

2019年3月26日，ruby sass生命期结束。

Ruby Sass was the original implementation of Sass, but it reached its end of life as of 26 March 2019. It’s no longer supported, and Ruby Sass users should migrate to another implementation.

Compass经常和ruby sass一块出镜，使用compass创建的项目中，会有一个配置文件 config.rb。这个需要移植。

https://github.com/sass/libsass/issues/78

libsass

  • https://sass-lang.com/libsass/
  • https://sass-lang.com/blog/libsass-is-deprecated/

2012年，libSass 发布了1.0版本，它是用C++开发的一个开源库。它的设计目标：

  • 性能（是ruby版本的10倍以上）
  • 易于集成（有Node-sass, libsass-python 等等各种封装）
  • 兼容性 (libsass 3.3 已经实现与ruby 版本 sass的完全兼容)

libasss以及基于它的的Node-sass等顺应前端工程化潮流出现，速度块。但是node-sass和node的版本对应比较麻烦。

2020年，libSass及其封装标记为过时，不建议在新项目中使用。

libsass-python

libsass有各种封装，比如python：

  • https://sass.github.io/libsass-python/

安装方式

1
pip install libsass

dart sass

Dart Sass 是 Sass 官网力推的工具，它包括了基于 Dart VM 的命令行工具，以及基于 Node 的纯 Javascript 实现。

注意：dart sass是习惯称呼，最早在npm上也是以 dart-sass名字发布的，但是，现在已经更名为 sass。

  • 采用dart sass编写的sass编译器，不需要像node-sass一样和node版本需要对应。
  • 对CSS新特性支持更全。

Dart 是一种Google开发的编程语言，它与2011年10月首次亮相，是一种基于类的可选类型化编程语言，设计用于创建 Web 应用程序。

Sass使用

SCSS应该越来越不流行了。

如果项目样式逻辑不复杂（如只有几个页面、少量组件），直接用原生 CSS 或现代 CSS（变量、自定义属性、嵌套等）即可。

使用前端框架（如 React、Vue、Angular）时，通常推荐 CSS Modules 或 框架自带的样式解决方案，这时 SCSS 的模块化优势不再明显。

参考

  • https://sasscss.org/
  • https://sass-lang.com/
  • https://en.wikipedia.org/wiki/Sass_(style_sheet_language)
  • https://github.com/sass/libsass/issues/78

Posted by Debao Zhang Tools css, scss