关于使用scss的一些用法心得(第一篇博客)

一、scss的几个主要特点

1.变量

如何在scss中定义变量、使用变量?

例(1):

定义变量 $color:pink

使用变量 p{

background-color:$color

}

在定义变量的时候变量名必须以$开头。

为什么要使用变量?

代码可维护性高、方便统一管理

2、嵌套

所谓嵌套就是父级选择器里可以套后代选择器

例(2):

html代码:

scss代码:

p{

p{

}

}

不要怀疑,就是这么简单easy !

3、scss里的 & 符号

正常情况下嵌套选择器的时候会这样:

见例(2)scss代码 进行预处理之后 会生成这样的代码: p{} , p p{}

注意p跟p中间的空格,有时候我们并不希望出现这个空格,比如在使用 :hover的时候,这个时候你就可以在冒号前面加上&。

说白了,&=父元素 ,前面都是废话,这句才是重点!

4、 混合器(mixin)

解决scss冗余代码的神器!

mixin 类似于 javaScript 里面的函数,作用就是 定义一个代码块 然后这段代码可以重复被调用。

例(3)

@mixin radius($angle:50% ) {

border-radius:$angle;

}

这样就申明了一个mixin 代码块,你需要就直接调用 比如 p{ @include radius },这个p就会变成圆角,当然你可以继续将有用的重复的代码放进来,在不同的地方直接调用即可,这样即简化了代码,维护的时候又方便,有没有爽的一匹?, 还有,上面的代码进行了传参,还使用了默认值哦!。

注意的地方是 形参也是一个变量所以前面也要加$, 我就犯过这样的错!

默认值,就是在形参后面跟冒号加默认值,如果你在调用的时候没传参数,他就会使用你设置的默认值。

先暂时就写这么多,后续再补充,自己也在学习当中,大家一起进步!

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容