Sass详解

        Sass（Syntactically Awesome Stylesheets）是一种CSS预处理器，它扩展了CSS的功能，提供了变量、嵌套、混合、继承等高级功能，使CSS的编写更加灵活和模块化。Sass有两种语法格式：一种是Sass（缩进语法），另一种是SCSS（Sassy CSS）。

=>基本语法

变量

        Sass允许你使用变量来存储值，如颜色、字体、间距等。

$primary-color: #333;

body {
  color: $primary-color;
}

嵌套

        Sass允许你在CSS规则中嵌套其他CSS规则，这样可以更清晰地表示层次结构。

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    text-decoration: none;
    &:hover {
      text-decoration: underline;
    }
  }
}

混合（Mixins）

        混合允许你定义可重用的CSS片段，并在需要时插入它们。

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

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

继承

        继承允许一个选择器继承另一个选择器的样式。

%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message { @extend %message-shared; }
.alert { @extend %message-shared; }

运算

        Sass允许你在CSS中进行数学运算。

.container {
  width: 100%;
  margin-left: 10px;
  margin-right: 10px;
  width: calc(100% - 20px);
}

=>高级功能

函数

        Sass允许你定义函数以返回值，并在样式表中使用这些函数。

@function px-to-rem($px, $base: 16) {
  @return #{$px / $base}rem;
}

.container { font-size: px-to-rem(18); }

条件和循环

        Sass支持条件语句和循环语句，允许你在样式表中使用逻辑。

@mixin theme-colors($themes) {
  @each $name, $color in $themes {
    .#{$name}-theme {
      color: $color;
    }
  }
}

@include theme-colors((primary: #333, secondary: #666, success: #28a745));

导入和模块化

        Sass允许你将样式分解成多个文件，然后在一个主文件中导入它们。

// _reset.scss
* {
  margin: 0;
  padding: 0;
}

// styles.scss
@import 'reset';
body { font-family: Arial, sans-serif; }

编译Sass

        要将Sass文件编译成CSS文件，可以使用以下命令：

sass input.scss output.css

        也可以设置Sass监听文件的变化：

sass --watch input.scss:output.css

=>示例

        这是一个包含变量、嵌套、混合和继承的完整示例：

$primary-color: #3498db;
$padding: 16px;

@mixin box-shadow($x, $y, $blur, $color) {
  -webkit-box-shadow: $x $y $blur $color;
  -moz-box-shadow: $x $y $blur $color;
  box-shadow: $x $y $blur $color;
}

%flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  padding: $padding;
  background-color: $primary-color;
  @include box-shadow(0px, 0px, 10px, rgba(0, 0, 0, 0.1));
  @extend %flex-center;

  .content {
    color: white;
    text-align: center;

    h1 {
      font-size: 2em;
      margin-bottom: 0.5em;
    }

    p {
      font-size: 1em;
      line-height: 1.5;
    }
  }
}

这段Sass代码会被编译成如下CSS：

.container {
  padding: 16px;
  background-color: #3498db;
  -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
}

.container .content {
  color: white;
  text-align: center;
}

.container .content h1 {
  font-size: 2em;
  margin-bottom: 0.5em;
}

.container .content p {
  font-size: 1em;
  line-height: 1.5;
}