你的位置:首页 > 网页设计

[网页设计]sass用法


可能刚开始我们学习前端的时候都习惯用html+css。来做网页,但是我们发现css有很多重复的代码或者是你要改里面的图片或者文字还有去诶个的找很麻烦,所以我们就用sass来简化它。

首先我们需要安装一个koala软件它是编译asaa代码来生成css代码,刚开始我坐起来很不习惯,但是它确实方便了很多,也提高了你做网页的效率。

sass有两种后缀名文件:一种后缀名为sass,不使用大括号和分号;另一种就是我们这里使用的scss文件,这种和我们平时写的css文件格式差不多,使用大括号和分号。所有sass文件都指后缀名为scss的文件。在此也建议使用后缀名为scss的文件,以避免sass后缀名的严格格式要求报错。

列:body

       background: #eee

       font-size:12px

p

       background: #0982c1

//文件后缀名为scss的语法

body

{ background: #eee; font-size:12px;

}

p

{ background: #0982c1;

}

 !defanlt 默认值,在外面可以随便改变这个默认值
可以任何地方加上变量需要加上#号{}号为特殊变量

多值变量,可以1个变量多个值
列:$num:1px 2px 3px 4px
    margin:nth($num,1);
nth作用域(根据你的下标值获取某个元素)

 嵌套(Nesting)
sass的嵌套包括两种:一种是选择器的嵌套;另一种是属性的嵌套。一般说起或用到的都是选择器的嵌套。

混合(mixin)
sass中使用@mixin声明混合,可以传递参数,参数名以$符号开始,多个参数以逗号分开,也可以给参数设置默认值。声明的@mixin通过@include来调用。

继承
sass中,选择器继承可以让选择器继承另一个选择器的所有样式,并联合声明。使用选择器的继承,要使用关键词@extend,后面紧跟需要继承的选择器。

for循环
for循环有两种形式,分别为:@for $var from <start> through <end>和@for $var from <start> to <end>。$i表示变量,start表示起始值,end表示结束值,这两个的区别是关键字through表示包括end这个数,而to则不包括end这个数。

 

当然这几个只是我说的几个方法而已,他还有很多方法,这几个是我们最常用的。可以测试一下