sass基础使用技巧

嵌套

最常用的技巧，例如

<div class='container'>
    <span class='content' />
</div>

那么我们编写scss文件时可以：

.container{
    width:500px;
    span {
    height:200px;
    }
}

&父级选择器嵌套

.container{
    width:500px;
    &:hover{    //相当于.container:hover{},但是不用额外在外层写
    color:#fff
    }

}

//不用&选择器的写法
.container{
    width:500px；
}
.container:hover{    
    color:#fff
    }

属性嵌套

相同属性可以集中一起写，例如：

.container { 
font: {
family: Aria; 
size: 3em; 
weight: bold; } }

//相当于
.funky { 
font-family: Aria; 
font-size: 3em; 
font-weight: bold; }

嵌套标识符> + ~

">" 指元素中嵌套的所匹配的元素

// .container > .content

<div classname='container'>
    <span class='content' /> //匹配
    <span class='content' /> //匹配
    <span class='body' /> //不匹配
</div>

"+"指下方紧邻的匹配元素

// .a + .b
<img class='b' />
<img class='a' />
<img class='b' /> //匹配
<img class='b' />

"~"指下方所有匹配元素

// .a ~ .b
<img class='b' />
<img class='a' />
<img class='b' /> //匹配
<img class='b' /> //匹配

变量

sass允许用变量$来存储重复使用的css数值，通常在scss文件顶部声明，例如：

$primary-color:#66ccff

body{
    .container{
    background-color:$primary-color
    }

}

注：如果在类名当中定义变量，那么只能在该类名中使用

插值语句#{}

可以通过插值语句任意调用想要使用的插值区别于变量：避免sass运行运算表达式

$container: body;
$ba:background

#{container} {
 #{ba}-color:yellow
}

!default

在变量结尾添加!default,可以让一个没有使用!default声明赋值的变量赋值。变量已经被赋值，不会被重新赋值；变量没有被赋值，会被重新赋值

Mixins

可以让我们定义一组css规则，并且能够让我们在需要的地方重用这些规则，有些类似react当中我们自己封装的组件，用mixins写好之后，在调用的时候只需要传递相应的参数就可以显示，这有利于减少代码量，使得样式编写组件化，例如：

@mixin theme($theme: DarkGray) {
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, .25);
  color: #fff;
}
//这里定义了一组名为theme的样式，可以传入$theme变量
作为background和box-shadow的颜色

//直接利用@include引用theme，并根据需要修改$theme
.info {
  @include theme;
}
.alert {
  @include theme($theme: DarkRed);
}
.success {
  @include theme($theme: DarkGreen);
}

文件模块化

在scss文件中，可以利用类似import语法如@use引入其他文件的变量，mixins和函数

// _base.scss
$primary-color:#66ccff

body{
    .container{
    background-color:$primary-color
    }

}

//style,scss
@use 'base';
//或者
@import 'base'

.filter{
    color:base.$primary-color
}

注意：

一定记得要在句子末尾加上分号
导入sass文件时可以省略文件的后缀名.scss
如果想导入css.文件，那么后缀名.css就不可删除

继承

利用%为前缀编写变量，如果有样式@extend该变量，则继承并显示该变量的内容,需要注意的是，只有被@extend的%变量才会显示：

//message-shared被以下的类样式继承了
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

//equal-heights没有被继承
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;//继承后也可以额外添加样式
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}

计算

可以引用sass中的math，在scss文件中进行计算，例如

@use "sass:math"
 
    //将px转换为百分比
.container{
    width: math.div(600px * 960px) * 100%
        
}

我们也可以在一个scss文件中定义变量并计算，并在vite中配置全部scss文件，就可以使用里面的变量啦。

Sass基础使用技巧