运用scss语法

166 阅读1分钟

一、使用变量

1.变量得声明

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

  这意味着变量  $color-base 的值是  #00c16f,任何可以用作 CSS 属性值的赋值都可以用作 sass 的变量值,甚至是以空格分割的多个属性值:

2。变量得使用

image.png

二、&在scss里面应用

1.在div的类名里面子级类名累加父级类名中间用_符号连接,HTML代码展示 VP_KKAK`}BO9}5T71JMY5XQ.png

2.css样式里面的应用

RW%VRCZYBY(B6X312}P7$PO.png

7)(8U7)KSVZ1Q`QN4{O6G.png

3.scss里面可以优化代码,有利于广泛应用样式

image.png

在common.scss文件里可以引用多个小的scss文件,common相当于减少代码引用次数的一个公共scss文件

image.png

4.我们也可以根据方法传值的方式进行样式的设置

scss文件里举例方法

image.png

根据传的值,判断方向和距离,方法调取,从而样式实现

image.png