Sass语法学习

1、编译监控

自动监控把sass编译成css文件，命令行

sass --watch sass/basic.scss:css/basic.css 

在监控的sass后面,,可以为 sass 生成 css 样式指定生成的格式，默认是nested型；

--style nested|compact|compressed|expended

通过 --style nested( 嵌套 - 默认 )|compact( 紧促型 )|compressed( 压缩 )|expended( 扩展 ) 命令,可以为 sass 生成 css 样式指定生成的格式

2、合成文件

@improt

     在sass中，使用@improt可以把多个不同的sass文件合成一个css文件，在合成的sass中有两种方式，

第一种：@import "demo2","demo3","demo4";

第二种：@import "dem2";@import "demo3";@import "demo4"

第三种：在一个sass文件中,引入另一个sass文件；

3、变量

sass的变量必须是$开头，后面紧跟变量名，而变量值和变量名之间就需要使用冒号(:)分隔开（就像CSS属性设置一样），如果值后面加上!default则表示默认值。

3.1默认变量

sass的默认变量仅需要在值后面加上!default即可。

sass的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可;

特殊变量

一般我们定义的变量都为属性值，可直接使用，但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用。

3.2、多值变量

多值变量分为list类型和map类型，简单来说list类型有点像js中的数组，而map类型有点像js中的对象。

3.3、多值变量

多值变量分为list类型和map类型，简单来说list类型有点像js中的数组，而map类型有点像js中的对象。

3.3.1、list

list数据可通过空格，逗号或小括号分隔多个值，可用nth($var,$index)取值。关于list数据操作还有很多其他函数如length($list)，join($list1,$list2,[$separator])，append($list,$value,[$separator])等，具体可参考sass Functions（搜索List Functions即可）

定义

//一维数据

$px: 5px 10px 20px 30px;

//二维数据，相当于js中的二维数组

$px: 5px 10px, 20px 30px;

$px: (5px 10px) (20px 30px);

3.3.2、map

map数据以key和value成对出现，其中value又可以是list。格式为：$map: (key1: value1, key2: value2, key3: value3);。可通过map-get($map,$key)取值。关于map数据还有很多其他函数如map-merge($map1,$map2)，map-keys($map)，map-values($map)等，具体可参考sass Functions（搜索Map Functions即可）

定义

$heading: (h1: 2em, h2: 1.5em, h3: 1.2em);

全局变量

在变量值后面加上!global即为全局变量。这个目前还用不上，不过将会在sass 3.4后的版本中正式应用。目前的sass变量范围饱受诟病，所以才有了这个全局变量（现在已经能用上了）。

目前变量机制

在选择器中声明的变量会覆盖外面全局声明的变量。(这也就人们常说的sass没有局部变量)(实际测试sass是有局部变量的)；

4、嵌套(Nesting)

sass的嵌套包括两种：一种是选择器的嵌套；另一种是属性的嵌套。我们一般说起或用到的都是选择器的嵌套。

4.1、选择器嵌套

所谓选择器嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而增强了sass文件的结构性和可读性。

在选择器嵌套中，可以使用&表示父元素选择器

4.2、属性嵌套

所谓属性嵌套指的是有些属性拥有同一个开始单词，如border-width，border-color都是以border开头。

/sass style

//-------------------------------

.fakeshadow {

  border: {

    style: solid;

    left: {

      width: 4px;

      color: #888;

    }

    right: {

      width: 2px;

      color: #ccc;

    }

  }

}

 

//css style

//-------------------------------

.fakeshadow {

  border-style: solid;

  border-left-width: 4px;

  border-left-color: #888;

  border-right-width: 2px;

  border-right-color: #ccc; 

}

当然这只是个属性嵌套的例子，如果实际这样使用，那估计得疯掉。

4.3、@at-root

sass3.3.0中新增的功能，用来跳出选择器嵌套的。默认所有的嵌套，继承所有上级选择器，但有了这个就可以跳出所有上级选择器。

普通跳出嵌套