【前端自学(2)】Sass

记录一下自学内容

---

1 Sass

• Sass是css预处理语言
• Sass的变量用$表示
• 注意父选择器的作用(和Less一样)

//一般情况下sass(less)解嵌套的时候会把父选择器通过一个空格连接到子选择器的前面(这种叫后代选择器),但有的时候不能写后代选择器
.article a{
  color:blue;
  :hover{
    color: red;
  };
}
//上述sass(less)编译为下面的css
.article a {
  color: blue;
}
.article a :hover { 
//注意到这里的a和:hover中间有一个空格，表示经过任意一个a，都会让所有a变红，我们往往不想要这个效果
  color: red;
}

//加上父选择器
.article a{
  color:blue;
  &:hover{
    color: red;
  };
}
//上述sass(less)编译为下面的css
.article a {
  color: blue;
}
.article a:hover {
//注意到这里的a和:hover中间没有空格，表示经过任意一个a，只会让经过的a变红
  color: red;
}

• Sass/Less 群组选择器

//群组选择器
nav, aside {
  a {color: blue}
}

//解析为
nav a,
aside a {
  color: blue;
}

• Sass局部文件
  Sass局部文件的文件名以下划线开头，Sass不会单独编译它们来输出对应的css
• Sass默认变量值

$fancybox-width: 400px !default;
.fancybox {
width: $fancybox-width;
}

• Sass嵌套导入

//_blue-theme.scss
aside {
  background: blue;
  color: white;
}

//another css
.blue-theme {@import "blue-theme"}

• Sass的混合器@mixin，使用@include将其放在指定位置

//可以设置默认值
//为便于书写，@mixin可以用=表示，而@include可以用+表示
@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}
a {
  @include link-colors(blue, red, green);
}

• Sass继承

//.seriousError将会继承样式表中任何位置处为.error定义的所有样式
//不要用后代选择器去继承
//Class 选择器并不是唯一可以被延伸(extend)的，Sass允许延伸任何定义给单个元素的选择器
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

• Sass函数
  Sass 支持自定义函数，并能在任何属性值或Sass script 中使用

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }

• Sass控制指令
  Sass包括@if,@for,@each,@while等控制指令
  更多相关内容请参考
  https://www.sass.hk/docs/ Sass中文文档

---

2 总结

• 以上是Sass的一些特性，注意区分Sass和Less，Less是基于JavaScript运行，所以Less是在客户端处理。另一方面，Sass是基于Ruby，是在服务器端处理的。