scss 基本使用

qq_28749759

已于 2023-03-27 17:08:11 修改

阅读量505

点赞数

文章标签：前端 scss Powered by 金山文档

于 2023-03-21 14:02:21 首次发布

本文链接：https://blog.csdn.net/qq_28749759/article/details/129667388

版权

变量 $

任何可以用作css属性值的赋值都可以用作scss的变量值，甚至是以空格分割的多个属性值，如$border-solid: 1px solid black；这时变量还没有生效，除非你引用这个变量，例如：

$light-color: #ffffff;
.text1{
   line-height: 48px;
   font-size: 36px;
   color: $light-color;
}

//编译为
.text1 {
   line-height: 48px;
   font-size: 36px;
   color: #ffffff;
}

混合器 @mixin

当你需要大段大段的重用样式的代码时，scss的混合器就可以派上用场。标识符给一大段样式赋予一个名字，这样你就可以轻易地通过引用这个名字重用这段样式。

通过@include来使用这个混合器，放在你希望的任何地方。@include调用会把混合器中的所有样式提取出来放在@include被调用的地方。例如：

@mixin position($width,$left,$top){
  width: $width;
  position: absolute;
  left: $left;
  top: $top;
}
.img{
   @include position1(248px,5px,32px);
   height: 248px;
}

//编译为
.img {
   width: 248px;
   position: absolute;
   left: 5px;
   top: 32px;
   height: 248px;
}

嵌套CSS

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

.main{
      display: flex;
      align-items: stretch;
      justify-content: center;
      margin: 0 -7px 0 -8px;
      .text-list{
        width: calc(50% - 15px);
        margin: 0 7px 0 8px;
        a{
          display: block;
          padding: 23px 26px 25px 21px;
        }
       }
}

//编译为
.main{
      display: flex;
      align-items: stretch;
      justify-content: center;
      margin: 0 -7px 0 -8px;
}
.main .text-list{
      width: calc(50% - 15px);
      margin: 0 7px 0 8px;
}
.main .text-list a{
      display: block;
      padding: 23px 26px 25px 21px;
}

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

a {
        padding: 5px 22px;
        line-height: 22px;
        font-size: 14px;
        color: #596efb;
        border: 1px solid #596efb;
        margin-right: 15px;
        &:hover{
          color: #ffffff;
          background-color: #596efb;
        }
      }

//编译为
a {
        padding: 5px 22px;
        line-height: 22px;
        font-size: 14px;
        color: #596efb;
        border: 1px solid #596efb;
        margin-right: 15px;
      }
a:hover{
          color: #ffffff;
          background-color: #596efb;
        }

继承

@extend 指令告诉 Sass 一个选择器的样式从另一选择器继承。如果一个样式与另外一个样式几乎相同，只有少量的区别，则使用 @extend 就显得很有用。例如：

.contanier1{
  font-size: 24px;
  font-weight: bold;
  color: green;
}
.contanier2{ 
  @extend .contanier1;
  color: red;
}

//编译为
.contanier1, .contanier2{
  font-size: 24px;
  font-weight: bold;
  color: green;
}
.contanier2{
  color: red;
}

5.插值

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

$name: box;
$attr: border;

p.#{$name} {
  #{$attr}-color: blue;
  animation-name: "my-#{name}-anim";
}

//编译为
p.box{
  border-color: blue;
  animation-name: "my-box-anim";
}

6.选择器 >、+和~

6.1、选择器 >

可以用子组合选择器>选择一个元素的直接子元素，下边这串代码只会选择article下紧跟着的子元素中命中p选择器的元素。

article > p { border: 1px solid #ccc }

而下边这个选择器会选择article下的所有命中p选择器的元素。

article p { margin: 5px }

6.2、选择器 +

可以用同层相邻组合选择器+选择h6元素后紧跟的p元素：

h6 + p { font-size: 1.1em }

6.3、选择器 ~

可以用同层全体组合选择器~，选择所有跟在h2后的同层h3元素，不管它们之间隔了多少其他元素：

h2 ~ h3 { border-top: 1px dashed #ccc }

默认p元素宽度50%，当子元素p是5个时，给第1、第2、第3个p元素宽度设置为33.33%，给第4、第5个p宽度设置为50%

p{
                  width: calc(50% - 8px);
                  height: 20px;
                  line-height: 20px;
                  font-size: 14px;
                  color: #333;
                  letter-spacing: 0;
                  border: 1px solid #e5e6ea;
                  border-radius: 4px;
                  margin: 0 3px 6px;
                  &:first-of-type:nth-last-of-type(5),
                  &:first-of-type:nth-last-of-type(5) ~ p {
                    width: calc(33.33% - 8px);
                    &:nth-child(4),
                    &:nth-child(5){
                      width: calc(50% - 8px);
                    }
                  }
                }

判断某元素的子元素个数并分别设置样式

/*ul只有一个子元素的样式*/
        li:nth-last-child(1):first-child{
            width:100%;
        }

        /*ul有2个子元素的样式*/
        /*li:nth-last-child(2):first-child,  是倒数第二个元素，又是第一个元素，说明li的父元素ul有2个子元素（起到了 判断某父元素下有几个子元素 的作用）*/
        /* ~ 选择位于li:nth-last-child(2):first-child 即 第一个子元素之后的元素*/
    li:nth-last-child(2):first-child,li:nth-last-child(2):first-child ~ li{
            width:calc(100% / 2);
        }

        /*ul有3个子元素的样式*/
        /*第一个元素宽度为1/3，字体颜色为蓝色*/
        li:nth-last-child(3):first-child{
            width:calc(100% / 3);
            color:blue;
        }
        /*第一个元素之后的第一个元素（即 有3个子元素的ul 的 第 3 个元素）*/
        li:nth-last-child(3):first-child ~ li:nth-last-child(1){
            width:calc(100% / 4);
            color:red;
        }
        /*第一个元素之后的第一个元素（即 有3个子元素的ul 的 第 2 个元素）*/
        li:nth-last-child(3):first-child ~ li:nth-last-child(2){
            width:calc(100% / 6);
            color:yellow;
        }

7.导入文件（ @import ）

类似 CSS，Scss 支持 @import 指令。@import 指令可以让我们导入其他文件等内容。

CSS @import 指令在每次调用时，都会创建一个额外的 HTTP 请求。但 Sass @import 指令将文件包含在 CSS 中，不需要额外的 HTTP 请求。

Scss @import 指令语法如下：

@import 'filename';

注意：包含文件时不需要指定文件后缀，Scss 会自动添加后缀 .scss。此外，也可以导入 CSS 文件。

导入后就可在主文件中使用导入文件等变量。

创建一个 reset.scss 文件：

html,
body{
  margin: 0;
  padding: 0;
}
ul,
li {
  list-style: none;
}

然后在 standard.scss 文件中使用 @import 指令导入 reset.scss 文件：

@import "reset";
body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

以上代码转换为 CSS 代码，如下所示：

html, body {
  margin: 0;
  padding: 0;
}
ul,li {
  list-style: none;
}
body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

如果不希望将一个 Scss 的代码文件编译到一个 CSS 文件，可在给文件命名的时候添加一个下划线，这将告诉 Scss 不要将其编译到 CSS 文件，但是，在导入语句中不需要添加下划线。

8.控制指令

8.1 条件语句（ @if ）

当 @if 的表达式返回值不是 false 或者 null 时，条件成立，输出 {} 内的代码，例如：

// 三角形@mixin声明
@mixin icon-arron($direction:top,$size:8px,$color:#cececc){
  margin-left: 10px;
  display: inline-block;
  width: $size;
  height: $size;
  border-top: 2px solid $color;
  border-left: 2px solid $color;
  border-radius: 2px;
  position: relative;
  @if ($direction == top) {
    transform: rotate(45deg);
    top: 0;
  }
  @else if($direction == right){
    transform: rotate(135deg);
    top: -1px;
    margin-left: 6px;
  }
  @else if($direction == bottom){
    transform: rotate(225deg);
    top: -3px;
  }
  @else if($direction == left){
    transform: rotate(315deg);
    top: -2px;
  }
}

//调用
h6{
        margin-bottom: 8px;
        font-size: 18px;
        color: #181818;
        font-weight: 500;
        line-height: 28px;
        position: relative;
        &:after{
          content: '';
          @include icon-arron(right,10px,#596efb);
        }
      }
      p{
        font-size: 14px;
        color: #4b5b76;
        line-height: 22px;
        i{
          @include icon-arron(top);
        }
      }

//编译为
h6{
        margin-bottom: 8px;
        font-size: 18px;
        color: #181818;
        font-weight: 500;
        line-height: 28px;
        position: relative;
}
h6:after{
    content: "";
    margin-left: 10px;
    display: inline-block;
    width: 10px;
    height: 10px;
    border-top: 2px solid #596efb;
    border-left: 2px solid #596efb;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    position: relative;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
    top: -1px;
    margin-left: 6px;
}
p {
    font-size: 14px;
    color: #4b5b76;
    line-height: 22px;
}
p i {
    margin-left: 10px;
    display: inline-block;
    width: 8px;
    height: 8px;
    border-top: 2px solid #cececc;
    border-left: 2px solid #cececc;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    position: relative;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
    top: -1px;
    margin-left: 6px;
}

8.2循环语句（ @for ）

@for 指令可在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动。

包含两种格式：@for $var from <start> through <end>，或 @for $var from <start> to <end>；

区别： through 与 to 的含义：当使用 through 时，条件范围包含 <start> 与 <end> 的值，

而使用 to 时条件范围只包含 <start> 的值不包含 <end> 的值。

另外，$var 可以是任何变量，如 $i；<start> 和 <end> 必须是整数值。

.tuC {
    position: absolute;
    left: 7px;
    top: 0;
    width: 49px;
    height: 22px;
    -webkit-animation-delay: fadeup 2.4s cubic-bezier(0,.9,.9,.9) infinite forwards;
    -moz-animation-delay: fadeup 2.4s cubic-bezier(0,.9,.9,.9) infinite forwards;
    -o-animation-delay: fadeup 2.4s cubic-bezier(0,.9,.9,.9) infinite forwards;
    animation: fadeup 2.4s cubic-bezier(0,.9,.9,.9) infinite forwards;
}
@for $i from 1 through 3 {
    .tuC#{$i} {
         -webkit-animation-delay: #{$i*0.4-0.4}s;
         -moz-animation-delay: #{$i*0.4-0.4}s;
         -o-animation-delay: #{$i*0.4-0.4}s;
         animation-delay: #{$i*0.4-0.4}s;
         top: (-26*$i)*1px;
     }
}

//编译为
.tuC1 {
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    -o-animation-delay: 0s;
    animation-delay: 0s;
    top: -26px;
}   
.tuC2 {
    -webkit-animation-delay: 0.4s;
    -moz-animation-delay: 0.4s;
    -o-animation-delay: 0.4s;
    animation-delay: 0.4s;
    top: -52px;
} 
.tuC3 {
    -webkit-animation-delay: 0.8s;
    -moz-animation-delay: 0.8s;
    -o-animation-delay: 0.8s;
    animation-delay: 0.8s;
    top: -78px;
}

8.3 @while

@while 指令重复输出格式直到表达式返回结果为 false。这样可以实现比 @for 更复杂的循环。

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

//编译为
.item-6 {
  width: 12em; 
}
.item-4 {
  width: 8em; 
}
.item-2 {
  width: 4em; 
}

8.4 @each

@each 指令的格式是 $var in <list>, $var 可以是任何变量名。如 $length 或 $name，而 <list> 是一连串的值，也就是值列表。@each 将变量 $var 作用于值列表中的每一个项目，然后输出结果。

@each $fruit in apple, pear, grape, watermelon {
  .icon-#{$fruit} {
    background-image: url('../images/#{$fruit}.png');
  }
}

//编译为
.icon-apple {
  background-image: url(../images/apple.png);
}
.icon-pear {
  background-image: url(../images/pear.png);
}
.icon-grape {
  background-image: url(../images/grape.png);
}
.icon-watermelon {
  background-image: url(../images/watermelon.png);
}

ul 下面 6 个li，每个 li 的背景色不一样，代码如下：

// 定义数组，数组元素用逗号隔开
$liColor:#f5ad1b,#5f89ce,#94bf45,#da8ec5,#78bfc2,#bec278;
 
// 开始 @each 循环遍历数组
// $c 作为循环变量，代表了数组的元素，不是索引~！！！
@each $c in $liColor{
     $i:index($liColor,$c);        // 获取 $c 在数组中的索引，并赋值给 $i 赋值用冒号，不是等号~！
     li:nth-child( #{$i} ){      // 经典的地方来了，SCSS 循环是从 1 开始，不是 0 哦~
       background: $c;           // 背景色
       &:hover{
         background: lighten($c,10%);    // hover 后的颜色
       }
     }
}