Sass深入指南：变量、嵌套、导入与混合器实战-优快云博客

本文链接：https://blog.youkuaiyun.com/wolfking__/article/details/118751461

本文详细介绍了Sass的变量声明、嵌套规则、文件导入、混合器（mixin）使用、继承（extend）及算术运算，帮助理解并掌握Sass的高效编程技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

sass的用法

1.变量声明 $

// 定义变量必须以$开头
$main-color: #4399fc;
nav {
  color: $main-color;
}
//编译后
nav {
  color: #4399fc;
}
// 类似定义数组
$linkColor:#ffffff #6fb6fd;
div{
    color: nth($linkColor,1);
    background-color:nth($linkColor,2);
}

// css
div{
    color: #ffffff;
    background-color:#6fb6fd;
}

2.嵌套

// sass可以进行选择器的嵌套
ul{
    display:flex;
    li{
       list-style: none;
    }
}
// css
ul{
    display:flex;
}
ul li{
    list-style: none;
}

3. 导入SASS文件

 // 目录中存在一个colors.scss的文件通过@import导入
@import './colors'

4.混合器 @mixin
混合器使用@mixin标识符定义实现大段样式的重用，通过@include来使用这个混合器。

@mixin b-radius {
  border-radius: 5px;
}
div{
  @include b-radius;
}
div{
  background-color: pink;
  border-radius: 5px;
}
// 给混合器传参
@mixin link-colors($normal, $hover) {
  color: $normal;
  &:hover { color: $hover; }
}
a {
  @include link-colors(blue, red);
}
//csss：
a { color: blue; }
a:hover { color: red; }

5.继承 @extend

.active{
  border: 1px solid red;
  background-color: #fdd;
}
.box{
  @extend .active;
  color:pink;
}
class="box" 修饰的html元素最终的展示效果就好像是class="box active">

6.加减乘除运算

.aside{
    width:(200px + 400px) / 960px * 100%;
}
// css
.aside{
    width:62.5%;
}

7.函数定义

@function size($px){
	@return 750rpx * $px / 1536;
}
div{
	$size(100px)
}