SaSS
发表更新前端 / CSS9 分钟读完 (大约1350个字)

SaSS

SASS是对CSS3（层叠样式表）的语法的一种扩充，它可以使用巢状、混入、选择子继承等功能，可以更有效有弹性的写出Stylesheet。Sass最后还是会编译出合法的CSS让浏览可以使用，也就是说它本身的语法并不太容易让浏览器识别（虽然它和CSS的语法非常的像，几乎一样），因为它不是标准的CSS格式，在它的语法内部可以使用动态变量等，所以它更像一种极简单的动态语言。

安装使用

在vscode扩展中搜索easy sass并安装

在项目文件夹中新建test.scss文件,编写后保存生成css文件

PixPin_2024-10-22_20-35-52

变量申明

变量的概念

  • 使用美元符号$
  • 注意声明的顺序(要在变量使用前声明)
  • 可以在一个变量中引用另一个变量
  • 调用变量时候依然使用美元符号加变量名
1
2
3
4
5
6
7
8
9
10
11
12
//scss文件
//不同变量可以相互引用，但是要注意声明顺序
$demo-color:pink;
$demo-border: 1px solid $demo-color;
.nav-border{
    border: $demo-border;
}

//生成css文件
.nav-border {
  border: 1px solid pink;
}

嵌套

  • 使用Sass可以轻松的将多个内容嵌套在一起
  • 不用像css一样需要分开写
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/*
可以尽情使用sass语法实现css无法实现的套娃操作
*/

#content{
    div{
        h1{border: 1px solid #000;}
        p{border: 1px solid #000;}
    }
}

//css
/*
可以尽情使用sass语法实现css无法实现的套娃操作
*/
#content div h1 {
  border: 1px solid #000;
}

#content div p {
  border: 1px solid #000;
}

&符号

将该符号后面的内容与其父元素直接进行连接,不用像平常的嵌套子元素一样与父元素使用空格进行连接

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//&符号
article a{
    color: #000;
    &:hover{
        color: #fff;
    }
}

//css文件
article a {
  color: #000;
}

article a:hover {
  color: #fff;
}

群组嵌套

子元素会和父元素一一配对

反之亦然,如果父元素使用逗号隔开,那么每个父元素都会和子元素一一配对

1
2
3
4
5
6
7
8
9
10
11
//群组嵌套
#content{
    h1,h2,h3,h4{
        border: 1px solid #000;
    }
}

//css
#content h1, #content h2, #content h3, #content h4 {
  border: 1px solid #000;
}

多重选择器

可以在嵌套层中使用多种选择器

+相邻兄弟选择器

>子元素选择器

~后继兄弟选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//选择器
#strick{
    > h1{border: #000;}
    + h2{border: #000;}

    th > {
        dt{margin: auto;}
        dd{margin: auto;}
    }
}

//css
#strick > h1 {
  border: #000;
}

#strick + h2 {
  border: #000;
}

#strick th > dt {
  margin: auto;
}

#strick th > dd {
  margin: auto;
}

多属性叠写

如果需要一次指定border-width,borde-style

1
2
3
4
5
6
7
8
9
10
11
12
13
// 多属性叠写
#border-test{
    border: {
        width: 1px;
        style: solid;
    }
}

//css文件
#border-test {
  border-width: 1px;
  border-style: solid;
}

import

使用方法:

  1. 导入外部scss文件,注意不需要添加后缀.scss
  2. 不可以导入css文件
  3. scss文件编译时候,优先把导import导入的文件进行编译并插入到输出css文件头部中,之后才会编译本文件中的内容
  4. 可以导入scss文件中的局部内容@import "./part/abc",这样就导入part.scss文件中的abc
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//part.scss文件
part{
    margin-top: auto;
}
//test.scss文件
@import "part";
// 多属性叠写
#border-test{
    border: {
        width: 1px;
        style: solid;
    }
}

//生成的test.css文件
part{
    margin-top: auto;
}

#border-test {
  border-width: 1px;
  border-style: solid;
}

!default

如果这个变量被声明赋值了,就使用它声明的值,否则使用默认值

1
2
3
4
5
6
7
8
9
10
11
12
//默认值
$default-border: 1px solid #000 !default;

div{
    border:$default-border
    
}

//css文件
div {
  border: 1px solid #000;
}

@mixin混合

可以作为一个大型的结构体

  • @mixin name{}
  • 在任意处使用@include即可把@mixin定义内容引入
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//混合

@mixin border-test{
    border: 1px solid #000;
    padding: 10px;
}

notice{
    @include border-test;
}

//css文件
notice {
  border: 1px solid #000;
  padding: 10px;
}

@mixin嵌套解构

mixin中可以写入任意的解构,可以使用多种选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
@mixin mixintest{
    demo{
      > h1{color: #000;}
      + div{
        div.echo & {
          border: 1px solid #000;
        }
        &:hover{
          color: #fff;
        }
        }
      }
  }

asideTest{
    @include mixintest;
}

//css生成文件
asideTest demo > h1 {
  color: #000;
}

div.echo asideTest demo + div {
  border: 1px solid #000;
}

asideTest demo + div:hover {
  color: #fff;
}

@mixin函数

@mixin声明名称后小括号中写入函数形参,注意变量的声明形式

调用是使用小括号传入实参即可

可以定义带有默认值的形参

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//mixin函数
@mixin mixin-function($a,$b,$c){
    color:$a;
    background-color:$b;
    border:$c;
}

a{
    @include mixin-function(#000,#fff,1px solid #000);
}

//css生成文件
a {
  color: #000;
  background-color: #fff;
  border: 1px solid #000;
}

注释

  • 普通注释//编译后不会显示在css中
  • 多行注释/**/编译后会显示在css中

继承

使用@extends name来使用继承关系,引入名称(或者部分名称)为name的选择器

@extend 指令告诉 Sass 一个选择器的样式从另一选择器继承。

如果一个样式与另外一个样式几乎相同，只有少量的区别，则使用 @extend 就显得很有用。

以下 Sass 实例中，我们创建了一个基本的按钮样式 .button-basic，接着我们定义了两个按钮样式 .button-report 与 .button-submit，它们都继承了 .button-basic ，它们主要区别在于背景颜色与字体颜色，其他的样式都是一样的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
.button-basic  {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-report  {
  @extend .button-basic;
  background-color: red;
}

.button-submit  {
  @extend .button-basic;
  background-color: green;
  color: white;
}

//生成css文件
.button-basic, .button-report, .button-submit {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-report  {
  background-color: red;
}

.button-submit  {
  background-color: green;
  color: white;
}
#
关注我

最新文章

分类

×