Sass基础篇，一文直接会

HeroTang
358 阅读3分钟

Sass官方文档
此文适用于有CSS基础的人
介绍 编译原理必须在使用前解释清楚。

原理
识别嵌套规则将编写的SCSS拼接
对于前端开发者来说可以极大程度避免重复定义属性、重复类名编写，提升开发效率。
使用规则一：定义变量
$VarName:xxxx

$base-color: #c6538c;
$border-dark: rgba($base-color, 0.88);

.alert {
  border: 1px solid $border-dark;
}

.alert {
  border: 1px solid rgba(198, 83, 140, 0.88);
}

定义变量后可直接在下面使用
注意，定义的变量也可以当作动态名使用
使用方法为#{$Varname}
举例如下:

$BOXBORDER:border
div{
    #{$BOXBORDER}-radius:10px;
}

使用规则二：嵌套使用规则
此规则使用方法类似HTML标签，可极大程度减少冗余规则编写

<div>
    <ul>
        <li></li>
    </ul>
<div>
</div>

div{
    //规则
    ul{
        //规则
        li{
            //规则
        }
    }
}

若直接使用对此DIV修改样式需要重复编写父标签
在SCSS中则可以直接使用嵌套来定义
使用规则三：函数式使用
SCSS关键词：@mixin @include
先定义后使用
对于高复用性mixin可以单独抽离而后引用（后面会讲）
可以接受参数，同时也可以设置默认参数

@mixin reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

@mixin horizontal-list {
  @include reset-list;
  li {
    display: inline-block;
    margin: {
      left: -2px;
      right: 2em;
    }
  }
}

nav ul {
  @include horizontal-list;
}

编译如下
```css
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav ul li {
  display: inline-block;
  margin-left: -2px;
  margin-right: 2em;
}

划重点：可以将其灵活运用到动画规则编写。

//下文中的unique()时SCSSCRIPT提供的接口，可随机生成ID。
具体使用方法可参考官方文档，这里不多讲解。
注意动画编写的方式和原CSS编写差异有点大，注意理解。
@content类似于VUE里面的slot可以接受{}内的内容。

@mixin inline-animation($duration) {
  $name: inline-#{unique-id()};

  @keyframes #{$name} {
    @content;
  }

  animation-name: $name;
  animation-duration: $duration;
  animation-iteration-count: infinite;
}

.pulse {
  @include inline-animation(2s) {
    from { background-color: yellow }
    to { background-color: red }
  }
}

编译如下

pulse {
  animation-name: inline-um2hyp9bp;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
@keyframes inline-um2hyp9bp {
  from {
    background-color: yellow;
  }
  to {
    background-color: red;
  }
}

当然这里还可以直接在mixin接受的参数设置默认参数。


@mixin inline-animation($duration=2S) {
  $name: inline-#{unique-id()};

  @keyframes #{$name} {
    @content;
  }

  animation-name: $name;
  animation-duration: $duration;
  animation-iteration-count: infinite;
}

.pulse {
  @include inline-animation(2s) {
    from { background-color: yellow }
    to { background-color: red }
  }
}

编译后结果一样
使用规则四：类选择器及父亲标识
常常使用>,+,~选择一组标签时，SCSS提供更便捷的方法
同时由于，SCSS编译的原理，如果直接在嵌套里面使用伪类或者伪元素会对整组标签定义
例如你想对ul中的li进行:hover获取下拉菜单，但是SCSS在拼接的时候获取到{}自动添加空格
这就造成你想得到 ul li:hover 编程ul li :hover，导致结果大相径庭。
父亲选择器之&符号使用

ul{
    li{
        &:hover{
            //xxxxx
        }
    }
}

编译后

 ul li:hover{
     //xxxx
 }

类选择使用基本和原生css一样，只不过需要嵌套到{}里。

ul > {
  li {
    list-style-type: none;
  }
}

h2 {
  + p {
    border-top: 1px solid gray;
  }
}

p {
  ~ {
    span {
      opacity: 0.8;
    }
  }
}

编译如下：

CSS OUTPUT

ul > li {
  list-style-type: none;
}

h2 + p {
  border-top: 1px solid gray;
}

p ~ span {
  opacity: 0.8;
}

使用规则五：变量作用域
此规则参考javascript的作用域，定义在{}内的同名变量优先被使用。

$btncolor:blue
ul{
    $btncolor:dark
    li{
        background-color:$btncolor;
    }
}

编译为

ul li{
    background-color:dark;
}

这部分为SCSS的基本使用规则，如果对SCSS感兴趣可以看看官网文档。
SCSS还可以做到模块引入，模块加载，条件判断，循环。
若有兴趣可以关注下喔后续的文章，整理后将会深入讲解SCSS
关于SCSS的编译极其配置可以参考下掘金上其他文章，这里只告诉大家如何使用。

avatar
文章
阅读
粉丝