scss编译

时间:2021-06-06 18:12:01

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;
    }
  }