绝对路径和相对路径的区别

scss使用教程

SCSS（Sassy CSS）是CSS的一个超集，它增加了许多特性，如变量、嵌套、混合、继承等，使得CSS的编写更加高效和模块化。以下是一些基础的SCSS语法和概念

1. 变量

在SCSS中，你可以使用变量来存储颜色、字体、边距等值，然后在需要的地方引用这些变量。

scss
$primary-color: #3498db;
$font-stack: Helvetica, Arial, sans-serif;

body {
  color: $primary-color;
  font-family: $font-stack;
}

2. 嵌套

SCSS允许你在选择器中嵌套，这样可以更清晰地表示层级关系。

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

  li { display: inline-block; }

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

3. 混合（Mixins）

混合类似于函数，可以在多个地方复用一组CSS规则。

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

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

4. 继承

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

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

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

5. 导入

你可以将多个SCSS文件导入到一个主文件中，便于模块化管理。

scss
@import 'variables';
@import 'mixins';
@import 'base';

6. 计算

SCSS支持基本的数学运算，如加、减、乘、除。

scss
$base-padding: 10px;
$base-margin: $base-padding * 2;

.container {
  padding: $base-padding;
  margin: $base-margin;
}

7. 条件和循环

SCSS支持@if、@for、@each和@while等控制结构。

scss
$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

8. 函数

SCSS允许你定义自己的函数。

scss
@function calculate-rem($px) {
  @return $px / 16 * 1rem;
}

body {
  font-size: calculate-rem(16);
}

编译SCSS

SCSS需要编译成CSS才能在浏览器中使用。你可以使用命令行工具如sass，或者使用IDE插件来实时编译。

bash
sass input.scss output.css

总结

SCSS提供了许多强大的功能，使得CSS的编写更加高效和可维护。通过使用变量、嵌套、混合、继承等特性，你可以编写更加模块化和可读性强的样式代码。