Sass学习笔记

最新推荐文章于 2024-09-29 11:37:28 发布

可莉大魔王

最新推荐文章于 2024-09-29 11:37:28 发布

阅读量135

点赞数

文章标签： sass 学习 css

本文链接：https://blog.csdn.net/yifan6688/article/details/129201298

版权

Sass是一种CSS预处理器，它引入了变量、嵌套规则、作用域、导入文件、部分、混入和继承等特性，提高了CSS的可维护性和效率。例如，Sass变量允许我们存储和重用值，嵌套规则使结构更清晰，而混入则实现了代码复用。

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

一、基础认知

Sass 是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。

Sass 文件后缀为 .scss

二、Sass 变量

变量使用 $ 符号：

$variablename: value;

三、Sass 作用域

Sass 变量的作用域只能在当前的层级上有效果

$myColor: red;

h1 {
  $myColor: green;   // 只在 h1 里头有用，局部作用域
  color: $myColor;
}

p {
  color: $myColor;
}

当然 Sass 中我们可以使用 !global 关键词来设置变量是全局的：

四、Sass 嵌套规则与属性

Sass 嵌套 CSS 选择器类似于 HTML 的嵌套规则。

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

很多 CSS 属性都有同样的前缀，如：font-family, font-size 和 font-weight ， text-align, text-transform 和 text-overflow，我们可以使用嵌套属性来编写它们：

font: {
  family: Helvetica, sans-serif;
  size: 18px;
  weight: bold;
}

text: {
  align: center;
  transform: lowercase;
  overflow: hidden;
}

五、Sass 导入文件

类似 CSS，Sass 支持 @import 指令。

@import 指令可以让我们导入其他文件等内容。

六、Sass Partials

如果你不希望将一个 Sass 的代码文件编译到一个 CSS 文件，你可以在文件名的开头添加一个下划线。这将告诉 Sass 不要将其编译到 CSS 文件。

七、@mixin 与 @include

@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。

@include 指令可以将混入（mixin）引入到文档中。

混入的参数也可以定义默认值，语法格式如下

@mixin sexy-border($color, $width: 1in) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2in); }

八、可变参数

有时，不能确定一个混入（mixin）或者一个函数（function）使用多少个参数，这时我们就可以使用 ... 来设置可变参数。

@mixin box-shadow($shadows...) {
      -moz-box-shadow: $shadows;
      -webkit-box-shadow: $shadows;
      box-shadow: $shadows;
}

.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

九、@extend 与继承

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

.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;
}