sass的基本使用
开头的时候,先说一下 我之前对sass的理解吧,对于这个sass这个样式预处理方法(我自己是这么叫的 虽然有点不规范 具体怎么叫 大家自行百度吧),我之前只是听说过而已,根本没有怎么去使用过,只是听说 它和less一样,都非常的流行,而且写代码起来很方便,但是,之前我都没有怎么具体的去理解它,现在勉强能使用一下了,先说一下自己对sass使用的理解吧,。。。
首先呢
在开始的时候先注意一下 提醒自己的:在公司里面的sass文件是用scss为后缀的~~~~~~~
sass中是可以定义变量的,变量的用法和js变量一样的
变量的声明:$bg:yellow; yellow 就是$bg的值
然后 sass写样式的时候,它是可以嵌套的使用的,
什么意思呢,就好比,你写了一个类的样式,然后这个类下面还有别的样式,我们可以这么的来写
![]()
|
![]()
|
他们就成了这样了 是不很爽
第三点,sass还可以加入其它的sass文件
这里就引入了 function.scss的sass文件了。这样 在自己文件编译的时候,会将function.scss文件编译在同一个css里面去
第四点
sass还可以自定义一些代码片段;
用法 :
用@mixin name{
这里是定义代码的内容;
}
name是你这段定义代码内容的名字
用@include来引用你定义的内容
@include name
这样 你就把你定义的内容引用进来了
第五点:继承和扩展
这个是什么意思呢 简单的来说吧,你定义了一个类a1,然后下一个类 a2 他的样式和a1的一样,不同的就是 a2多了几个别的样式
我们可以将a1的样式继承过去给a2,
使用很简单,只需要在a2里面加上 @extend .a1 就可以了
但是有一个很机制的地方,虽然说a2继承a1的样式,在看css的时候,a1的样式并不会写在a2里面,它是将a2添加到a1旁边,就是a1和a2形成一个组合选择器,这样可以减少代码的使用量
最后还有一些运算,颜色函数,一些循环之类的样式,个人觉得 在写样式的时候用处并不是很大,所以 先忽略啦 将来碰到再看看去。。。。原谅楼主的懒惰~