Sass | 青训营笔记

胡壹峰
122 阅读4分钟

这是我参与 [第五届青训营] 伴学笔记创作活动的第12天 在青训营项目中我使用Sass来作为css预处理

1.Sass在vite项目中使用

​ 使用npm下载在项目中

npm i sass -D

​ 在某文件中编写，在其他文件中引用

import "./index.scss";

2.Sass基本语法

1.用嵌套结构代替后代选择器

image-20230120182822412.png

​ 如图，将后代放入父级的嵌套内，起到后代选择器的作用

​ 若想要其他组合选择器效果，则需在前——相邻选择器是在后面——加上相应选择符号（注意空格）

.test {
  > div {
    color: bisques;
  }
  & + p {
    font-family: "Courier New", Courier, monospace;
  }
}

2.Sass注释

  1. 使用 /**/ 可以多行写，在编译后可以显示在源码中
  2. 单行注释 // 在编译后不显示在源码中

3.Sass扩展语法

3.1 可以用 & 代表父级名称

//index.scss &代表 '.test'
.test {
  color: aqua;
  &:hover {
    color: bisques;
  }
  &-first {
    font-family: "Courier New", Courier, monospace;
  }
}

/*index.css*/
.test {
  color: aqua;
}
.test:hover {
  color: bisques;
}
.test-first {
  font-family: "Courier New", Courier, monospace;
}

3.2 属性嵌套

​ 有些 CSS 属性遵循相同的命名空间 (namespace)，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性，同时也为了避免了重复输入，Sass 允许将属性嵌套在命名空间中

//index.scss font为命名空间
.test {
  color: aqua;
  a {
    color: brown;
    font: {
      size: 18px;
      family: Arial;
      weight: 100;
    }
  }
}

/*index.css*/
.test {
  color: aqua;
}
.test a {
  color: brown;
  font-size: 18px;
  font-family: Arial;
  font-weight: 100;
}

​ 注意font：后面要加一个空格

4.Sass变量

基本使用

  • 用符号 $ 开头

  • 变量名称要字母开头，中间可使用字母、数字、连接符 -、下划线 _；

    • 变量编译为css后, - 与 _ 无区别，最终的名称取决于哪个命名在后面

    • $font-size: 18px;
$font_size: 18px;

  • 区分大/小写字母。

  • 变量后接 : ，冒号后空格再给值

//index.scss font为命名空间
$font-size: 18px;
$font-family: Arial;
$font-weight: 100;

.test {
  color: aqua;

  font: {
    size: $font-size;
    family: $font-family;
    weight: $font-weight;
  }
}


/*index.css*/ 
.test {
  color: aqua;
  font-size: 18px;
  font-family: Arial;
  font-weight: 100;
}

变量类型

​ 主要有7种类型

  • 数字，1, 2, 3px, 4pt, 40% 等

  • 字符串，有引号字符串与无引号字符串，"foo", 'bar', baz

  • 颜色，aqua, #f0f0f0, rgba(255,055,255,0.1)

  • 布尔型，true, false

  • 空值，null——表示缺少值，通常由函数返回以指示缺少结果

  • 数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif

  • maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)

  • //maps示例
$color-map: (color1: aqua, color2:  #f0f0f0, color3: rgba(255,055,255,0.1));

变量作用域

​ 1.局部变量：在选择器内定义的变量

​ 2.全局变量：在最外层定义的变量——或者用 !global标记的变量

$font-size: 18px; /* 全局变量 */

.test {
  $font-family: Arial !global; /* 使用 !global 提升为全局变量 */
  color: aqua;
  font: {
    size: $font-size;
    family: $font-family;
  }
}

变量默认值

​ 使用 !default 在定义变量时设定为默认值，使其在其他地方可修改

$font-size: 18px !default; //提供默认值
.test {
  $font-size: 66px;
}

5.导入 @import

基本使用

​ 在css的基础上，sass拓展了导入的功能，使其可以导入scss文件，可以使用被导入文件的 变量，混合指令 @minix ，函数

//public.scss
$size: 18px;
@mixin m1 {
  .son {
    color: bisque;
  }
}
//test.scss
@import "public"; //可省略后缀 .scss
.test {
  font-size: $size;
  @include m1;
}

不被视为scss导入情况：

  1. 文件拓展名是 .css；

  2. 文件名以 http:// 开头；

  3. 文件名是 url()；

    @import url(public);

  4. @import 包含媒体查询 media queries。

局部文件：

当只想 @import 而不想让编译器将public.scss编译为css时，在文件前加上前缀 _ 可使其不被编译

_public.scss
@import "public" //注意：public与 _public 等效

注意： public 与 _public 在sass看来是同样的文件名，所以同级目录下不能同时存在 有以及没有 _前缀的文件

嵌套 @import

​ 一般都会在文件最外层处使用@import，将@import嵌套进css结构中，会使得导入的变量、混入、函数只能在当前局部中使用

.test {
    @import "public";
}

​ 注意：@import不能嵌套使用在控制指令或混入中

6.混合指令 @mixin

​ @mixin 用于定义可重复使用的样式，如css，大部分sass，并且可通过参数引入变量

@mixin m1($deg) {
  -webkit-transform: rotate($deg); /*为Chrome/Safari*/
  -moz-transform: rotate($deg); /*为Firefox*/
  -ms-transform: rotate($deg); /*为IE*/
  -o-transform: rotate($deg); /*为Opera*/
}

.test {
  @include m1(-3deg); //不指定变量，需要按照定义顺序传入参数
  @include m1(-$deg: -3deg); //显示指定变量值
}

默认参数

​ 使用混合指令必须给所有参数传值，除非在定义混合指令时给上参数默认值

//给出默认参数
@mixin triangle($top: 0px, $right: 0px, $bottom: 0px, $left: 0px) {
  padding-top: $top;
  padding-right: $right;
  padding-bottom: $bottom;
  padding-left: $left;
  height: 0px;
  width: 0px;
}
.test {
  @include triangle($top: 10px, $left: 10px);
}

剩余参数 arguments...

​ js中的剩余参数 ... 在前面：...arguments ——sass中功能是可以指代任意个数的参数

@mixin linear-gradient($direction, $gradients...) {
  background-color: nth($gradients, 1);
  background-image: linear-gradient($direction, $gradients);
}
.test {
  @include linear-gradient(to right, #f00, orange, yellow);
}

​ @mixin 可以重复使用，使用参数时建议加上默认值

7.继承 @extend

​ 当多个css结构用到同样几个样式时，可以声明一个公共父类，使用继承来压缩代码——使用占位符 %定义父类可以使编译后的css不出现父类，进一步减少css大小

%father {
    font-size: 18px;
    width: 100px;
    height: 50px
}

.son-first {
    @extend %father;
    color: red;
    background-color: gray;
}

.son-second {
    @extend %father;
    color: green;
    background-color: silver;
}
avatar
文章
阅读
粉丝