css预处理器sass变量和嵌套

最新推荐文章于 2024-05-21 21:14:20 发布

不期望不希望不奢望

最新推荐文章于 2024-05-21 21:14:20 发布

阅读量357

点赞数

文章标签： css sass 前端

本文链接：https://blog.youkuaiyun.com/weixin_72101182/article/details/125949249

版权

本文介绍了Sass预处理器中的关键特性，包括变量的使用，如$开头的变量和默认值！default，以及如何通过嵌套简化CSS代码，提高代码可读性和管理效率。同时，文章还讲解了Sass中的注释，包括多行和单行注释的区别及其在编译过程中的表现。

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

1.变量$

Sass的变量必须是$开头，后面紧跟变量名，如果值后面加上!default则表示默认值

$fontSize: 12px;
body{
    font-size:$fontSize;
}

2.嵌套

Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器，嵌套功能避免了重复输入父选择器，而且令复杂的 CSS 结构更易于管理

//sass 
#main p {
  color: #00ff00;
  width: 70%;
 
  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}
 
//css 
#main p {
    color: #00ff00;
    width: 70%; 
}
#main p .redbox {
  background-color: #ff0000;
  color: #000000; 
}

两份代码意义完全相同，但相对来说sass更加便捷

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

//sass
a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }

 
//css
a {
    font-weight: bold;
    text-decoration: none; 
}
a:hover {
  text-decoration: underline; 
}

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

//sass 
.funky {
  font: {
    family: "微软雅黑";
    size: 30em;
    weight: bold;
  }
}
 
//css 
.funky {
  font-family: "微软雅黑";
  font-size: 30em;
  font-weight: bold; 
}