scss编译

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/2);
　　　　top: 50px + 100px;
　　　　right: $var * 10%;
　　}

 条件语句:

 

p {
　　　　@if 1 + 1 == 2 { border: 1px solid; }
　　　　@if 5 < 3 { border: 2px dotted; }
　　}

 

循环语句:
1. @for $var from <start> through <end>

2. @for $var from <start> to <end>。

PS：   $i（变量），start（起始值），end（结束值）

@for $i from 1 to 10 {
　　　　.border-#{$i} {
　　　　　　border: #{$i}px solid blue;
　　　　}
　　}

 

 

 

 

 

 

 

 

 

转载于:https://www.cnblogs.com/yin-yi/p/4660250.html