sass的常用语法总结

嵌套规则

（1）嵌套规则
Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器

#main p {
  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

main p标签将redbox 给包裹住了，css会这样解析：

#main p .redbox {
    background-color: #ff0000;
    color: #000000; 
}

---

（2）&：代表嵌套规则外层的父选择器

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

这里的符号&表示父选择器

a {
  font-weight: bold;
  text-decoration: none; 
}
  a:hover {
    text-decoration: underline; 
 }
  body.firefox a {
    font-weight: normal; 
 }

---

（3） 属性嵌套
有些 CSS 属性遵循相同的命名空间 (namespace)，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性，同时也为了避免了重复输入，Sass 允许将属性嵌套在命名空间中

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

font后边以冒号：区别，css这样编译

.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; 
}

---

（4）注释：两种注释方式

/* */：被完整输出到编译后的 CSS 文件中
//：不会被输出到编译后的 CSS 文件中

---

SassScript：允许属性使用变量、算数运算

（1）变量 $：css属性可以用变量来定义和调用

$width: 5em;

使用：

#main {
  width: $width;
}

变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加 !global 声明：
$width是在#main中定义的，只能在#main中使用，要是想在别的地方使用，加一个!global 即可

#main {
  $width: 5em !global;
  width: $width;
}

#sidebar {
  width: $width;
}

（2）运算：支持数字的加减乘除、取整等运算 (+, -, *, /, %)，如果必要会在不同单位间转换值

除法运算：

p {
  font: 10px/8px;             // Plain CSS, no division
  $width: 1000px;
  width: $width/2;            // Uses a variable, does division
  width: round(1.5)/2;        // Uses a function, does division
  height: (500px/2);          // Uses parentheses, does division
  margin-left: 5px + 8px/2px; // Uses +, does division
}

字符串运算：
如果有引号字符串（位于 + 左侧）连接无引号字符串，运算结果是有引号的，相反，无引号字符串（位于 + 左侧）连接有引号字符串，运算结果则没有引号

p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
  margin: 3px + 4px auto;
}

布尔运算：支持布尔型的 and or 以及 not 运算

（3）圆括号：可以用来影响运算的顺序

p {
  width: 1em + (2em * 3);
}

编译为：

p {
  width: 7em; 
}

（5）插值语句 #{} (Interpolation: #{})
通过 #{} 插值语句可以在选择器或属性名中使用变量：

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

编译为：

p.foo {
  border-color: blue; 
}

也可以在属性值中插入 SassScript

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

编译为：

p {
  font: 12px/30px; 
}

---

@指令

（1）@import
1.@import 寻找 Sass 文件并将其导入，但在以下情况下，@import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件。
《1》文件拓展名是 .css；
《2》文件名以 http:// 开头；
《3》文件名是 url()；
《4》@import 包含 media queries。

引入scss正确写法

@import "foo.scss";

Sass 允许同时导入多个文件，例如同时导入 rounded-corners 与 text-shadow 两个文件：

@import "rounded-corners", "text-shadow";

2.@import

假设 ex22.scss 文件包含以下样式：

.example {
  color: red;
}

然后导入到 #main 样式内

#main {
  @import "ex22";
}

将会被编译为

#main .example {
  color: red;
}

（2）@extend继承样式
两个元素的样式有共同的部分，也有不一样的部分

例子：

<div class="error seriousError">
  Oh no! You've been hacked!
</div>

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  border-width: 3px;
}

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

会这样解析：

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; 
}

.error.intrusion, .seriousError.intrusion {
  background-image: url("/image/hacked.png"); 
}

.seriousError {
  border-width: 3px; 
}

（3）混合指令 @mixin和@include

定义指令@mixin

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

引用指令@include

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

这样解析：

.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px; 
}

传入参数

@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue, 1in); }