SASS 学习笔记：基本语法和技巧-JavaScript中文网-JavaScript教程资源分享门户

什么是 SASS？

SASS（Syntactically Awesome Style Sheets）是一种 CSS 预处理器，它扩展了 CSS 的语法，提供了一些便利的功能，使得样式表更易于维护和扩展。

SASS 可以让你使用变量、函数、嵌套规则、Mixin 等高级功能，以及通过使用嵌套规则和父选择器，可以使得样式表的层次结构更加清晰明了。

基本语法

变量

在 SASS 中，你可以使用变量来保存颜色、字体、大小等常用的值。定义一个变量使用 $ 符号，例如：

$primary-color: #3498db;

在样式中使用变量时，使用 #{} 语法：

a {
  color: $primary-color;
  &:hover {
    color: darken($primary-color, 10%);
  }
}

嵌套规则

SASS 可以让你使用嵌套规则，使得样式表的层次结构更加清晰明了。例如：

// javascriptcn.com 代码示例
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;

    li {
      display: inline-block;

      a {
        display: block;
        padding: 6px 12px;
        text-decoration: none;
      }
    }
  }
}

Mixin

Mixin 是 SASS 中的一个高级功能，它可以让你定义一组样式，并在需要的地方重复使用。例如：

// javascriptcn.com 代码示例
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

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

继承

SASS 中的继承功能可以让你将一个选择器的样式继承到另一个选择器上。例如：

// javascriptcn.com 代码示例
.error {
  border: 1px solid #c00;
  background-color: #fdd;

  &.fatal {
    font-size: 2em;
  }
}

.seriousError {
  @extend .error;
  border-width: 3px;
}

操作符

SASS 中支持一些操作符，例如 +、-、*、/、% 等，可以用于计算和比较。例如：

// javascriptcn.com 代码示例
.container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

article {
  float: left;
  width: 600px / 960px * 100%;
  margin-right: 20px;
}

技巧

使用 Partials

Partials 是以 _ 开头的文件，用于包含一些通用的样式，例如变量、Mixin 等。使用 Partials 可以让你更好地组织你的样式表。例如：

// javascriptcn.com 代码示例
// _variables.scss
$primary-color: #3498db;

// _mixins.scss
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

// style.scss
@import 'variables';
@import 'mixins';

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

使用 @import

SASS 中的 @import 功能可以让你将多个样式表合并为一个。例如：

// javascriptcn.com 代码示例
// style.scss
@import 'reset';
@import 'variables';
@import 'mixins';
@import 'layout';

// layout.scss
header {
  @include container;
}

使用函数

SASS 中内置了很多有用的函数，例如 darken()、lighten()、rgba() 等，可以让你更加灵活地处理颜色、透明度等。例如：

a {
  color: rgba(0, 0, 0, 0.5);
  &:hover {
    color: darken($primary-color, 10%);
  }
}

总结

SASS 是一种 CSS 预处理器，它扩展了 CSS 的语法，提供了一些便利的功能，使得样式表更易于维护和扩展。本文介绍了 SASS 的基本语法和一些技巧，希望对你有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/657fb958d2f5e1655da94842