SASS的初步

最新推荐文章于 2024-10-09 20:10:15 发布

entropy is true

最新推荐文章于 2024-10-09 20:10:15 发布

阅读量345

点赞数 6

文章标签： sass 前端 css

本文链接：https://blog.csdn.net/2301_80148143/article/details/135831988

版权

本文介绍了Sass中的变量定义、使用方法，包括字符串处理、嵌套、无参数和有参数混合，以及如何利用媒体查询进行响应式设计。通过实例展示了如何通过Sass提高代码复用性和灵活性。

摘要由CSDN通过智能技术生成

1.变量

以美元符号￥开头，赋值方法与CSS属性写法相同。

定义变量：

$width: 10px;

使用变量：

#main {
  width: $width;
}

如果变量类型为字符串，一般不需要加引号，但列如“//”就需要用单引号或双引号包裹。

变量需要定义在使用前。

还可以定义类似数组的变量：

$animals: puppy kitty chick;

同时变量也可以进行简单的运算。

插值

#{} 适用的范围很广。

$name: "mail";
$top-or-bottom: "top";
$left-or-right: "left";

.icon-#{$name} {
  background-image: url("/icons/#{$name}.svg");
  position: absolute;
  #{$top-or-bottom}: 0;
  #{$left-or-right}: 0;
}

等同于：

.icon-mail {
  background-image: url("/icons/mail.svg");
  position: absolute;
  top: 0;
  left: 0;
}

嵌套

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

父选择器&；

在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，例如，当给某个元素设定 hover 样式时，可以用 &代表嵌套规则外层的父选择器。

复用

无参数混合

<div class="user-avatar square">...</div>
<div class="admin-avatar square">...</div>

@mixin square {
  width: 100px;
  height: 100px;
}

// 应用：
.user-avatar {
  @include square;
}
.admin-avatar {
  @include square;
}

@mixin:定义可复用的样式

@include:应用可复的样式。

有参数混合

参数无默认值

@mixin square($size) {
  width: $size;
  height: $size;
}

// 应用
.avatar {
  @include square(100px);
}

.avatar {
  width: 100px;
  height: 100px;
}

参数有默认值

@mixin square($size: 100px) {
  width: $size;
  height: $size;
}

// 不传参数就会使用默认的值 100px
.avatar {
  @include square;
}

// 传入参数就会使用传入的值 200px
.avatar-200 {
  @include square($size: 200px);
}