sass学习--基本特性（基础篇）

最新推荐文章于 2022-08-23 19:30:58 发布

VIP文章马灿发

最新推荐文章于 2022-08-23 19:30:58 发布

阅读量7.5k

点赞数 1

分类专栏： sass 文章标签： sass

本文链接：https://blog.csdn.net/macanfa/article/details/51742543

版权

1.变量：

由变量声明符、变量名称、变量值组成，例如：$width:300px;

1-1：声明普通变量与默认变量

//普通变量
$fontSize: 12px;
body{
    font-size:$fontSize;
}

//默认变量：默认变量的价值在进行组件化开发的时候会非常有用。
$baseLineHeight:1.5 !default;
body{
    line-height: $baseLineHeight; 
}

注意： sass 的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可。

1-2：变量的调用

$fontSize: 12px;//声明
body{
    font-size:$fontSize;//调用
}

1-3：全局变量与局部变量

全局变量就是定义在元素外面的变量！（在选择器、函数、混合宏…的外面定义的变量为全局变量）；

局部变量：定义在元素内部的变量，内部的局部变量不会影响外部的其他元素，局部变量只会在局部范围内覆盖全局变量。在局部变量的属性值后加上!global关键字可以将变量提升为全局变量!

$color: orange !default;//定义全局变量(在选择器、函数、混合宏...的外面定义的变量为全局变量)

.block {
  color: $color;//调用全局变量
}
em {
  $color: red;//定义局部变量
  a {
    color: $color;//调用局部变量
  }
}
span {
  color: $color;//调用全局变量
}

那么问题来了：什么时候声明变量？

该值至少重复出现了两次；
该值至少可能会被更新一次；
该值所有的表现都与变量有关（非巧合）。

２.嵌套

分为3种：选择器嵌套、属性嵌套、伪类嵌套。

２-1：选择器嵌套：

//HTML结构：
<header>
<nav>
    <a href=“##”>Home</a>
    <a href=“##”>About</a>
    <a href=“##”>Blog</a>
</nav>
<header>

//Sass: 
nav {
  a {
    color: red;
    //&：上一级选择器
    header & {
      color:green;
    }
  }  
}

2-2：属性嵌套

Sass 中还提供属性嵌套，CSS 有一些属性前缀相同，只是后缀不一样，比如：border-top/border-right，与这个类似的还有 margin、padding、font 等属性。

//属性嵌套
.box {
  border: {
   top: 1px solid red;
   bottom: 1px solid green;
  }
}

2-3：伪类嵌套

其实伪类嵌套和属性嵌套非常类似，只不过他需要借助&符号一起配合使用。例如经典的“clearfix”：

.clearfix{
    &:before,
    &:after {
        content:"";
        display: table;
      }
    &:after {
        clear:both;
        overflow: hidden;
      }
}