sass基础

简介

sass 是一个 CSS 预处理语言，完全兼容CSS，扩展了CSS的能力，
增加了变量、嵌套规则、混合（Mixins）等功能。SASS有两种语
法：缩进式（Indented）和紧凑式（Strict）。缩进式语法类似
于Python，使用缩进来定义块；而紧凑式语法则更接近传统的CSS。

安装

1	pnpm install -g sass

安装完成后，你可以使用sass命令来编译SASS文件。例
如，如果你有一个名为styles.scss的SASS文件，你可
以运行以下命令来生成对应的CSS文件：

1	sass styles.scss styles.css

使用

变量

Sass的变量功能允许我们存储和重用数据，以便在样式表中使用。

    
// 定义一个变量
$primary-color: #3366ff;
 
// 使用变量
body {
  background-color: $primary-color;
}

嵌套

Sass的嵌套功能允许我们定义规则，使其更易于阅读和
理解。嵌套规则会自动继承父规则的属性，除非我们显
式地覆盖它们。

.container {
    width: 960px;
    .header {
        background-color: #3366ff;
        padding: 20px;
        .logo {
            font-size: 24px;
        }
    }
}

混合

Sass的混合功能允许我们定义一组规则，并将其应用到多个元素上。

@mixin button($bg-color, $text-color) {
  background-color: $bg-color;
  color: $text-color;
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 16px;
}

.button-primary {
  @include button(#3366ff, #fff);
}

函数

Sass的函数功能允许我们定义自定义函数，以简化样式表的编写。

@function rem($px) {
    @return $px / 16 * 1rem;
}
.container {
    width: rem(960px);
    height: rem(600px);
}

特性

@for和@each，能动态处理数据

@for $i from 1 through 5 {
  .item-#{$i} {
    width: $i * 10rem;
  }
}

$colors: red, green, blue;
@each $color in $colors {
    .color-#{$color} {
        color: $color;
        background-color: darken($color, 20%);
    }
}

@if和@else，判断条件

$width: 960px;
@if $width > 768px {
    body {
        background-color: #3366ff;
    }
}
@else {
    body {
        background-color: #ff3366;
    }
}

@extend，继承样式

.button {
    background-color: #3366ff;
    color: #fff;
}
.button-primary {
    @extend .button;
}

@include，引入样式

@mixin button($bg-color, $text-color) {
    background-color: $bg-color;
    color: $text-color;
}

.button-primary {
    @include button(#3366ff, #fff);
}