scss 学习

心安事随

发布于 2024-07-29 16:49:36

710

发布于 2024-07-29 16:49:36

文章被收录于专栏：前端大合集

1. 使用变量;

sass让人们受益的一个重要特性就是它为css引入了变量。你可以把反复使用的css属性值定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。或者，对于仅使用过一次的属性值，你可以赋予其一个易懂的变量名，让人一眼就知道这个属性值的用途。

sass使用$符号来标识变量(老版本的sass使用!来标识变量。改成是多半因为‘!highlight−color‘看起来太丑了。)，比如‘是多半因为`!highlight-color`看起来太丑了。)，比如`是多半因为‘!highlight−color‘看起来太丑了。)，比如‘highlight-color和sidebar−width‘。为什么选择‘sidebar-width`。为什么选择`sidebar−width‘。为什么选择‘ 符号呢？因为它好认、更具美感，且在CSS中并无他用，不会导致与现存或未来的css`语法冲突。

1.1 变量声明和使用

sass变量的声明和css属性的声明很像：

// 定义变量名 值是属性值 下面写样式的时候可以直接用变量名替代
$highlight-color: #F90;

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

//编译后
nav {
  width: 100px;
  color: #F90;
}

再看几个例子

$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
  border: $highlight-border;
}

//编译后
.selected {
  border: 1px solid #F90;
}

2. 嵌套css规则

在Sass中，你可以像俄罗斯套娃那样在规则块中嵌套规则块。sass在输出css时会帮你把这些嵌套规则处理好，避免你的重复书写。

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

 /* 编译后 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

大多数情况下这种简单的嵌套都没问题，但是有些场景下不行，比如你想要在嵌套的选择器里边立刻应用一个类似于：hover的伪类。为了解决这种以及其他情况，sass提供了一个特殊结构&。

2.1 父选择器的标识符&;

最常见的一种情况是当你为链接之类的元素写：hover这种伪类时，你并不希望以后代选择器的方式连接。比如说，下面这种情况sass就无法正常工作：

article a {
  color: blue;
  :hover { color: red }
}

正确做法

article a {
  color: blue;
  &:hover { color: red }
}

2.2 群组选择器的嵌套

在使用css编写样式代码的时候,会遇到这样的场景. 比如要选中一组中不同的元素

.container h1, .container h2, .container h3 { margin-bottom: .8em }

我们需要在每个元素前面都加上父级容器,这样代码量就多了,而且看起来也不整洁. 不过sass 嵌套特性在这种场景也非常有用.就上面的代码sass 是这样做的

.container {
  h1, h2, h3 {margin-bottom: .8em}
}

处理这种群组选择器规则嵌套上的强大能力，正是sass在减少重复敲写方面的贡献之一。尤其在当嵌套级别达到两层甚至三层以上时，与普通的css编写方式相比，只写一遍群组选择器大大减少了工作量。

3. 插值语句 `#{}`

通过 #{} 插值语句可以在选择器或属性名中使用变量：

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

编译为

p.foo {
  border-color: blue;
}

4. @at-root

Sass的@at-root指令可以让你在样式表中跳出父级选择器，直接回到根选择器的层级。这对于重构或者修改已有规则时非常方便。

下面是一个示例代码：

.parent {
  color: blue;
  @at-root .new-rule {
      color: red;
    }
}

在上述代码中，.new-rule将会输出为顶级规则，而不是.parent .child .new-rule，因此它的颜色是红色而不是蓝色。这个指令可以用于在具体选择器外部重新定义一些属性并保持样式层次结构的清晰性。

编译后的CSS代码如下所示：

.parent {
  color: blue;
}

.new-rule {
  color: red;
}

可以看到，.new-rule被提升到了顶级规则，且不再与.parent选择器相关联，它的颜色为红色。

需要注意的是，在使用@at-root指令时，如果在括号内放置了其他内容（如变量、函数等），那么这些内容可能会引起选择器的语法错误。所以，我们应该尽量只在@at-root括号内使用简单的CSS属性，避免出错。

5. 定义混合指令@mixin

在Sass中，@mixin指令用于创建可重复使用的代码块。通过定义一些通用的样式或功能，并将它们组合成一个mixin，然后在需要时调用这个mixin，可以大大简化样式表的编写。

下面是一个示例代码：

@mixin border-radius($radius) {
// 兼容其他浏览器
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

.box {
  background-color: #f1f1f1;
  // 引入定义好的混入样式 
  @include border-radius(5px);
}

编译成CSS 之后

.box {
  background-color: #f1f1f1;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

在上述代码中，我们使用了一个@mixin指令定义了一个名为border-radius的mixin，它接受一个参数$radius。在该mixin内部，我们使用了CSS3的前缀来设置圆角半径属性。

然后，在.box选择器内，我们使用@include指令调用了border-radius mixin，并传入了一个参数5px，从而使.box元素拥有了圆角半径。

需要注意的是，变量（如上面的$radius）可以在mixin内部使用，也可以在调用mixin时传递。此外，mixin还支持默认参数和可变参数，能够更加灵活地应对不同情况。

总之，使用@mixin指令可以方便地实现样式代码的复用和管理，提高工作效率。

@mixin border-radius($radius) {
 border-radius: $radius;
}

也类似js里面的Function

border-radius ==> function name(方法名)
$radius ==> argument(参数)

6. 引用混合样式`@include`

使用 @include 指令引用混合样式，格式是在其后添加混合名称，以及需要的参数（可选）：

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

编译为

.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px; }

也可以在最外层引用混合样式，不会直接定义属性，也不可以使用父选择器。

@mixin silly-links {
  a {
    color: blue;
    background-color: red;
  }
}
@include silly-links;

编译为

a {
  color: blue;
  background-color: red; }

混合样式中也可以包含其他混合样式，比如

@mixin compound {
  @include highlighted-background;
  @include header-text;
}
@mixin highlighted-background { background-color: #fc0; }
@mixin header-text { font-size: 20px; }

混合样式中应该只定义后代选择器，这样可以安全的导入到文件的任何位置。

7. 注释

Sass 支持标准的 CSS 多行注释 /* */，以及单行注释 //，前者会被完整输出到编译后的 CSS 文件中，而后者则不会，例如：

/* This comment is
 * several lines long.
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body { color: black; }

// These comments are only one line long each.
// They won't appear in the CSS output,
// since they use the single-line comment syntax.
a { color: green; }

编译为:

/* This comment is
 * several lines long.
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body {
  color: black; }

a {
  color: green; }

可以看到使用// 进行注释的内容不会出现在编译之后的文件里面

更多关于sass 的学习可以到中文官方文档里面进行学习 Sass世界上最成熟、稳定和强大的CSS扩展语言 | Sass中文网

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-07-29，如有侵权请联系 cloudcommunity@tencent.com 删除

border