【1分钟学会】Sass

目录

Sass 入门

1.安装Sass

2.创建Sass文件

3. 编译 Sass 代码

Sass 功能

嵌套规则

变量 $

混合指令 @mixin

模块

函数

运算符

结论

Sass 入门

1.安装Sass

首先，确保安装了Node.js。
安装 Node.js 后，打开终端并运行以下命令全局安装 Sass

npm install -g sass。

2.创建Sass文件

• SCSS（Sassy CSS）：此语法与常规 CSS 类似，使初学者更容易过渡。它使用花括号和分号，就像 CSS 一样。
• 缩进语法（Sass）：这种语法更简洁，使用缩进而不是花括号来定义块。

3. 编译 Sass 代码

由于浏览器无法直接解释 Sass( .scss) 文件，需要将它们编译成 CSS。
编译单个文件：导航到 Sass 文件所在的目录。然后运行以下命令：

sass --watch style.scss style.css

一次编译多个文件

sass --watch **/*.scss **/*.css

Sass 功能

嵌套规则

嵌套功能避免了重复输入父选择器，而且令复杂的 CSS 结构更易于管理：

nav { 
    ul {
        li {
            a { 
                color: blue; 
            }
        }
    }
}

父选择器 &

#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
}

属性嵌套

比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

变量 $

• 变量支持块级作用域
• 嵌套规则内定义的变量只能在嵌套规则内使用（局部变量）
• 不在嵌套规则内定义的变量则可在任何地方使用（全局变量）
• 将局部变量转换为全局变量可以添加 !global

#main {
  $width: 5em !global;
  width: $width;
}

#sidebar {
  width: $width;
}

混合指令 @mixin

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

.container {
    @include flex-center;
}

模块

// _colors.scss
@use 'sass:color';

$primary: #007bff;
$secondary: color.adjust($primary, $lightness: -20%);

// style.scss
@use 'colors' as c;

body {
    background-color: c.$secondary;
}

函数

@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue, 1in); }

运算符

.container {
    width: 100% - 30px;
}

结论

Sass 能够编写更简洁、更易于维护且功能丰富的 CSS 代码。通过利用它，可以简化开发工作流程并创建更优雅、更高效的样式。当然，这篇内容只是引领大家快速入门的，Sass还有更多丰富的功能。