SASS?
SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。
sass有两种后缀名文件:
- sass(不使用大括号和分号)---不建议使用
- scss(使用大括号和分号)----普遍使用
导入:
@import "reset.css";
sass有两种注释方式:
- 标准的css注释方式
- //双斜杆形式的单行注释(单行注释不会被转译出来。)
SASS提供四个编译风格的选项:
* nested:嵌套缩进的css代码,它是默认值。
* expanded:没有缩进的、扩展的css代码。
* compact:简洁格式的css代码。
* compressed:压缩后的css代码。
scss---->
1. 变量必须是$开头
2. !default-----默认值
默认变量一般是用来设置默认值,然后根据需求来覆盖的,覆盖的方式也很简单,只需要在默认变量之前重新声明下变量即可
特殊变量一般我们定义的变量都为属性值,可直接使用,但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用。
多值变量
list类型(通过空格,逗号或小括号分隔多个值,可用nth($var,$index)取值)
map类型(以key和value成对出现,其中value又可以是list)
简单来说list类型有点像js中的数组,而map类型有点像js中的对象。
SCSS允许在代码中使用算式:
body {
margin: (14px/);
top: 50px + 100px;
right: $var * %;
}
条件语句:
p {
@if + == { border: 1px solid; }
@if < { border: 2px dotted; }
}
循环语句:
1. @for $var from <start> through <end>
2. @for $var from <start> to <end>。
PS: $i(变量),start(起始值),end(结束值)
@for $i from to {
.border-#{$i} {
border: #{$i}px solid blue;
}
}