具有超能力的Sass！

tabzzz

已于 2024-05-12 00:49:50 修改

阅读量844

点赞数 14

分类专栏：前端文章标签： sass 前端 css

于 2024-05-12 00:49:08 首次发布

本文链接：https://blog.youkuaiyun.com/m0_73850058/article/details/138735116

版权

前端专栏收录该内容

8 篇文章

订阅专栏

文章目录

本文仅做对Sass官方网站的总结，对于想要了解Sass的人或者是初学者会有很大帮助，如果想要深入了解Sass的话这些肯定不够，文章满满干货绝无一点废话，总结了在开发中高频使用的特性、方法等等。
好啦！话不多说，我们开始咯！

Sass概述

Sass（Syntactically Awesome StyleSheets）作为CSS的一种强大扩展，极大地丰富了CSS的功能，通过提供变量、嵌套、混合、继承等高级功能，让CSS的编写更加高效、易于管理。

Sass 是世界上最成熟、最稳定、最强大的专业级CSS扩展语言！（官网自述）

Sass的安装

通过npm（Node.js的包管理器）安装Sass是一种常见且简单的方式：

npm install -g sass

对于国内用户，考虑到网络的限制，推荐使用淘宝NPM镜像，可以显著提高安装速度。

Sass快速入门

变量和数据存储

Sass引入了变量的概念，使得样式的复用和修改变得轻而易举。定义变量时，变量名前需加上$符号。

示例：

$primary-color: #333;
$body-font: "Open Sans", sans-serif;

拿一个官网的例子来做更复杂的演示：

$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
  border: $highlight-border;
}

//编译后

.selected {
  border: 1px solid #F90;
}

嵌套规则

Sass的嵌套功能让我们能够按照HTML的结构来组织CSS规则，使样式更加模块化和易于理解。

示例：

nav {
  color: #f00;
  ul {
    margin: 0;
    padding: 0;
    li { display: inline-block; }
  }
}

// 编译后

nav {
  color: #f00;
}
nav ul {
  margin: 0;
  padding: 0;
}
nav ul li {
  display: inline-block;
}

不仅仅适用于这种嵌套，像这样的场景，我们更能发现Sass对于书写CSS的极大便利：

.container {
  h1, h2, h3 {margin-bottom: .8em}
}

// 编译后

.container h1, .container h2, .container h3 {
  margin-bottom: 0.8em;
}

还有一种视觉冲击感非常强的属性嵌套的写法：

nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}

// 编译后

nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

导入

css有一个特别不常用的特性，即@import规则，它允许在一个css文件中导入其他css文件。然而，后果是只有执行到@import时，浏览器才会去下载其他css文件，这导致页面加载起来特别慢。

sass也有一个@import规则，但不同的是，sass的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求。另外，所有在被导入文件中定义的变量和混合器（下一点讲解）均可在导入文件中使用。

Sass导入方法图

Partials和Import

我们知道，sass文件是要经过一定的方法才可以变成css的，因为我们的浏览器只能读懂css。那么我们在采用导入这个方法的时候，就要尽可能避免一些仅做为导入使用而不参与页面样式构建的sass被编译为css，这样会增加我们网页的负担。而这种sass文件被称为局部文件。

总结来说就是：为了更好地组织代码，Sass支持将样式分割成多个文件（partials），然后通过@import指令将它们包含到主样式表中。Partials通常以_开头，这告诉Sass这个文件是一个partial，不应该被编译成CSS文件。

看图说话：

Sass导入解释图

在这个图中，带有_标识的三个sass文件即为仅做为导入使用而不参与页面样式构建的文件，即局部文件。sass约定以_做为专门只为了导入而编写的sass文件的标识，而First.sass和Second.sass即为参与页面央视构造的sass文件。

约定还有，如果你想导入themes/_One.sass这个局部文件里的变量，你只需要在样式表中以@import "themes/One"的方式进行引入。

静默注释

好用到爆炸，上代码！

body {
  color: #333; // 这种注释内容不会出现在生成的css文件中
  padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}

混合（Mixins）

Mixins允许定义可重用的样式块。它们不仅可以减少重复的代码，还可以让样式声明更加灵活。

定义Mixins（通过@mixin）：

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
          border-radius: $radius;
}

使用Mixins（通过@include）：

.box { @include border-radius(10px); }

条件语句和循环

Sass提供了@if、@for、@each和@while等控制指令，允许在样式表中使用逻辑判断和循环语句，这为动态生成样式提供了可能。

示例使用@if:

$color: red;

.element {
  @if $color == red {
    background-color: red;
  } @else if $color == blue {
    background-color: blue;
  } @else {
    background-color: green;
  }
}

示例使用@for：

@for $i from 1 through 3 {
  .item-#{$i} { width: 20 * $i + px; }
}

示例使用@while：

$x: 1;
@while $x < 13 {
  .col-#{$x} { width: 100%/12 * $x;}
  $x: $x + 1;
}

扩展/继承

使用@extend指令可以共享一组CSS属性从一个选择器到另一个。这是DRY（Don’t Repeat Yourself）原则在Sass中的体现，有助于减少代码冗余。

示例：

.error-message {
  border: 1px solid #f00;
  background-color: #fdd;
}

.warning-message {
  @extend .error-message;
  border-color: #ff0;
}

小结

当使用CSS预处理器时，开发者们能够更加轻松地管理和组织CSS代码。这些预处理器提供了许多功能，例如变量、嵌套、混合、继承和函数等，使得CSS编写变得更加模块化、可维护和可重用。

总的来说，像Sass和Less这样的CSS预处理器为开发者提供了更高效、更便捷的CSS编写方式，让他们能够更专注于设计和实现网站或应用的功能，而不必过多地关注底层的CSS细节。

所以，你总该熟悉一个的对吧😽