sass学习笔记

前言

Sass 教程 Sass 中文文档 | Sass 中文网

VScode 插件推荐：Sass 以及 Live Sass Compiler

Sass 的一些用法

1、类名嵌套 类名里面写类名

2、类名重复 &修饰符

.header {
  height: 50px;
  width: 100px;
  span {
    font-size: 16px;
    &:active {
      color: red;
    }
    &:hover {
      color: green;
    }
  }
}

3、注意:sass 后缀和 scss 后缀文件写法上的区别，sass 的格式是没有分号和花括号的。

4、变量，变量的命名：$符号开头(Less 是@符)

5、功能函数，如 lighten(颜色,变浅的值)，darken

$text-color: #444;
$default-ff: 'Consolas';
$default-fz: 12px+4px;
.title {
  color: $text-color;
  font-family: $default-ff;
  font-size: $default-fz;
}
.title-1 {
  color: lighten($text-color, 10%);
}

6、scss 文件的文件名前面加下划线，意味着这是一个私有的 scss 文件，用来被其他的 scss 文件引用，因此不会自动编译。

7、引入 scss 文件，引入方法和引入 css 方法一样，scss 文件的后缀名称可以省略，私有 scss 的_也可以省略，使用时注意后边的分号;必须加，否则报错。

8、当我们引入的文件是变量时，被引入的文件不会出现在主文件当中，否则会出现在主文件当中。这位我们进行代码拆分提供了一个新的思路，我们可以把样式文件拆分为_header.scss,_main.scss,_footer.scss 等等。

@import 'mixins';

9、混合 mixin，定义混合：@mixin 混合的名称{样式}，使用混合：@include 混合的名称，混合里面也可以传递参数

定义混合：

@mixin text-ellipsis($width) {
  width: $width + px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

使用混合：

.p1-text {
  @include text-ellipsis(300);
}

10、mixin 搭配媒体查询的使用

@mixin ipad {
  @media screen and (max-width: 768px) {
    @content;
  }
}

.wrapper {
  width: 400px;
  @include ipad {
    width: 200px;
  }
}

2022 年 12 月 21 日 19:36:15