sass入门（变量和嵌套）

最新推荐文章于 2024-11-04 19:43:58 发布

原创最新推荐文章于 2024-11-04 19:43:58 发布

· 280 阅读

版权

本文介绍了Sass语言的一些基本概念，包括嵌套规则、父选择器的使用、属性嵌套、占位符选择器、不同类型的注释以及变量的运用。Sass通过允许使用变量、属性嵌套和占位符选择器等特性，提高了CSS的可维护性和复用性，同时详细解释了如何通过`@extend`指令调用占位符选择器。此外，还讨论了重要注释在压缩模式下如何保留。

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

1.嵌套规则

Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器，例如：

#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

2. 父选择器 & 可以用 & 代表嵌套规则外层的父选择器

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

编译后的 CSS 文件中 & 将被替换成嵌套外层的父选择器，如果含有多层嵌套，最外层的父选择器会一层一层向下传递：

#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
}

& 必须作为选择器的第一个字符，其后可以跟随后缀生成复合的选择器，例如

#main {
  color: black;
  &-sidebar { border: 1px solid; }
}

3.属性嵌套

Sass 允许将属性嵌套在命名空间中，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。例如：

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

4.占位符选择器 %foo

Sass 额外提供了一种特殊类型的选择器：占位符选择器。与常用的 id 与 class 选择器写法相似，只是 # 或 . 替换成了 %。必须通过 @extend 指令调用。当占位符选择器单独使用时（未通过 @extend 调用），不会编译到 CSS 文件中。

***5.注释 /* */ 与 //***

 单行注释  //单行注释不会存在css文件

 多行注释  /*多行注释会存在css文件中*/

6.::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。::before和::after必须配合content属性来使用，content用来定义插入的内容，content必须有值，至少是空。
在这里插入图片描述

7.Sass允许使用变量，变量以美元符号$开头

$width: 5em;
直接使用即调用变量：

#main {
  width: $width;
}

如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中

$left: left;
div{
    margin-#{$left}:40px;
}

好处：ss生成时，变量会被他们的值替代，以后只需要改变这个变量的值，所有引用变量的地方的值都会改变。

8.将局部变量转换为全局变量可以添加 !global 声明：

#main {
  $width: 5em !global;
  width: $width;
}

#sidebar {
  width: $width;
}
编译为

#main {
  width: 5em;
}

#sidebar {
  width: 5em;
}

9.数据类型

SassScript 支持 6 种主要的数据类型：

数字，1, 2, 13, 10px
字符串，有引号字符串与无引号字符串，"foo", 'bar', baz
颜色，blue, #04a3f9, rgba(255,0,0,0.5)
布尔型，true, false
空值，null
数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)

10.在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息

　/*!
　　　　重要注释！
　　*/