Sass & Less

他们是预处理的css代码，
优点：
①使css语言更加简洁，适应性更强，更容易维护。
（不需要考虑浏览器兼容问题，会自动编译兼容浏览器的css代码）

主要功能有：

①提供变量

$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.bg{
  color: $highlight-color;
  border:$highlight-border;
}

中划线和下划线是代表同一个变量名
②代码嵌套

// 本来要这么写
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }
//现在可以这么写
#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

大多数样式可以这么写，除了:hover这样的伪类
解决：使用父选择器

• 父选择器

article a {
  color: blue;
  &:hover { color: red }
}

• 群组选择器

// 本来要这么写
.container h1, .container h2, .container h3 { margin-bottom: .8em }
//现在可以这么写
.container {
  h1, h2, h3 {margin-bottom: .8em}
}

上述例子中使用的是内嵌的选择器。外迁的群组选择器也是可以的。

• 组合选择器

article section { margin: 5px }
article > section { border: 1px solid #ccc }

>子组合选择器：选择article下紧跟着的子元素中命中section选择器的元素
+同层相邻组合选择器：选择article元素后紧跟的section元素
运算符
~全体组合选择器：选择所有跟在article后的同层section元素，不管它们之间隔了多少其他元素
他们可以嵌套到选择器里

• 嵌套属性

//本来这么写
nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}
//现在可以这么写
nav {
  border: {
    style: solid;
    width: 1px;
    color: #ccc;
  }
}
//还能这样
nav {
  border: 1px solid #ccc {
     left: 0px;
     right: 0px;
  }
}

③导入sass文件
不同于importcss文件，到浏览器加载所有完毕才加载该样式。importscss文件实际上是生成了一个css文件，没有浏览器导入样式迟缓问题。

• 局部样式

当通过@import把sass样式分散到多个文件时，你通常只想生成少数几个css文件。那些专门为@import命令而编写的sass文件，并不需要生成对应的独立css文件，这样的sass文件称为局部文件。对此，sass有一个特殊的约定来命名这些文件。

文件名以下划线开头，导入时文件名省略下划线不写

//themes/_night-sky.scss
@import "themes/night-sky";

设置默认值
在导入scss文件时,
!default和!important相反的意思。如果你已经声明了这个值，那么就用声明值，反之就用!default定义的默认值

$width:200px !default

• 嵌套导入

sass允许@import命令写在css规则内,导入了blue-theme的内容

.blue-theme {@import "blue-theme"}

④混合器
混合器提供了一段css样式复用的可能

@mixin no-bullets {
  list-style: none;
  li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px;
  }
}
ul {
  color: #444;
  @include no-bullets;
}

混合器传参

@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}
//第一种传参方式
a {
  @include link-colors(blue, red, green);
}
//第二种传参方式
a{
  @include link-colors(
      $normal: blue,
      $visited: green,
      $hover: red
  );
}

默认参数值

@mixin link-colors(
    $normal,
    $hover: $normal,
    $visited: $normal
  )
{
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

@include link-colors(red) ``$hover和$visited也会被自动赋值为red。

⑤继承
选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式

通常使用继承会让你的css美观、整洁。因为继承只会在生成css时复制选择器，而不会复制大段的css属性。（不像混合）

.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

.seriousError不仅会继承.error自身的所有样式，任何跟.error有关的组合选择器样式也会被.seriousError以组合选择器的形式继承，如下代码:

//.seriousError从.error继承样式
.error a{  //应用到.seriousError a
  color: red;
  font-weight: 100;
}
h1.error { //应用到hl.seriousError
  font-size: 1.2rem;
}

不要使用后代选择器去继承css样式(就是下面第二种，因为sass会生成几种方案去继承)

.a.b代表 一个元素上 同时 有 a 类 和 b 类
.a .b(中间有空格) 代表 .b 是 .a 的子元素选择.
.a,.b代表 class='a' 和 class='b' 都会被选择上.

scss教程
快速入门scss
less语法