Sass

Xu Quan（Nikkkki）

2018-07-13

FreeCodeCamp

Sass, freecodecamp

Sass (Syntactically Awesome StyleSheets)是CSS语言的扩展。它拥有一些原生CSS不能实现的功能，让项目的样式代码变得更为简单，更容易维护。

Sass本质上是一个编译器，它使用Sass语法写代码，然后转换成CSS语言，因此我们在使用的时候可以创建变量、嵌套CSS规则、引入其他的Sass文件，这使得代码更紧凑，也更容易阅读。

Sass允许两种语法形式，一种是SCSS（Sassy CSS），也是这一部分习题使用的语法，它是CSS语法的扩展，也就是说所有的有效的CSS样式表在SCSS文件中都能够使用，而且语义相同，这类语法文件使用.scss后缀。另一种是缩进语法，或者直接被称为Sass，它使用缩进而不是括号来表示选择器的嵌套，使用转行而不是分号来切分属性设置。这类文件使用.sass后缀。

课程习题主要介绍了Sass的一些基本语法。我参考Sass的官网把内容整理了一下。

Sass (Syntactically Awesome StyleSheets)是CSS语言的扩展。它拥有一些原生CSS不能实现的功能，让项目的样式代码变得更为简单，更容易维护。

课程习题主要介绍了Sass的一些基本语法。我参考Sass的官网把内容整理了一下。

使用变量

变量声明 `$highlight-color: #F90`

变量可以是以空格分割的多个属性值 $basic-border: 1px solid black
变量可以使以逗号分割的多个属性值 $plain-font: "Myriad Pro", Myriad, Helvetica
Sass变量也有作用域，在{}规则块内定义的变量只能在规则块内使用

变量引用

直接引用 border: $highlight-color

命名规则

中划线-和下划线_都可以使用
两种写法互通 $link-color和$link_color指向同一个变量

嵌套CSS规则

避免重复书写 #content article h1 {} #content article p {}

使用大括号嵌套即可

#content {
  background-color: #f5f5f5;
  aside {
    background-color: #eee;
  }
}

伪类选择器使用标识符`&`

Sass解析时，将父子类的选择器通过空格连接到子选择器的前面
伪类如:hover通过这种方法会出问题，所以在前面放一个&
1
2
3
4
article a {
color: blue;
&:hover { color: red }
}

#####子组合选择器>,+,~

a > b选择a元素的直接子元素b
a + b选择紧跟a的b元素
a ~ b选择紧跟a元素的同层b元素，不论它们之间隔了多少其他元素

属性嵌套

属性嵌套的规则是把属性名从中间-的地方断开，在根属性后边添加一个冒号
1
2
3
4
5
6
7
nav {
border {
style: solid;
width: 1px;
color: #ccc;
}
}

导入文件

`@import`规则

在生成css文件时就把相关文件导入进来，无需发起额外的下载请求
引入的文件可以省略.sass或scss文件后缀

默认变量值 `$link-color: blue !default;`

嵌套导入

混合器

大段样式的重用
@mixin标识符定义混合器
@include使用混合器

混合器传参

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

继承

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

@extend

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

控制指令

`@if`

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

`@for`

1
2
3

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

`@each`

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

@each $animal, $color, $cursor in (puma, black, default),
                                  (sea-slug, blue, pointer),
                                  (egret, white, move) {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}

`@while`

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

以下是这部分的习题解答：

####Introduction to the Sass Challenges

Store Data with Sass Variables

Sass不同于CSS的一点是，Sass可以使用变量。方法与JavaScript类似，需要声明变量，数据会被保存起来。

JavaScript声明变量使用let和const关键字，Sass则用$后接变量名。

当一些元素都使用相同的颜色的时候，使用变量会很方便，更改颜色的时候只需要更改变量值即可。
1
2
3
4
5
6
7
8
$text-color: red;

.header{
text-align: center;
}
.blog-post, h2 {
color: $text-color;
}

Nest CSS with Sass

Sass允许CSS规则嵌套，这能很好地帮助我们管理代码

.blog-post {
  h1 {
  text-align: center;
  color: blue;
}
p {
  font-size: 20px;
  }
}

Create Reusable CSS with Mixins

在Sass中，mixin指的是一组可以反复使用的CSS声明。

比如有一些新的CSS特性会存在浏览器兼容问题，这时我们需要给特性加上一些前缀，来让不同的浏览器识别，如：

div {
  -webkit-box-shadow: 0px 0px 4px #fff;
  -moz-box-shadow: 0px 0px 4px #fff;
  -ms-box-shadow: 0px 0px 4px #fff;
  box-shadow: 0px 0px 4px #fff;
}

这时我们可以利用mixin来保存这一组代码，并且使用参数来保证我们可以修改里面的值：

@mixin box-shadow($x, $y, $blur, $c){ 
  -webkit-box-shadow: $x, $y, $blur, $c;
  -moz-box-shadow: $x, $y, $blur, $c;
  -ms-box-shadow: $x, $y, $blur, $c;
  box-shadow: $x, $y, $blur, $c;
}

/*使用的时候*/
div {
  @include box-shadow(0px, 0px, 4px, #fff);
}

调用mixin的时候需要使用@include关键字

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius:$radius;
}

#awesome {
  width: 150px;
  height: 150px;
  background-color: green;
  @include border-radius(15px);
}

Use @if and @else to Add Logic To Your Styles

@if语句可以用来做条件判断，和JavaScript一样，Sass也有@else if和@else语句

@mixin border-stroke($val) {
  @if $val == light{
    border: 1px solid black;
  }
  @else if $val==medium {
    border: 3px solid black;
  }
  @else if $val==heavy {
    border: 6px solid black;
  }
  @else {
    border: none;
  }
}
     
#box {
  width: 150px;
  height: 150px;
  background-color: red;
  @include border-stroke(medium);
}

Use @for to Create a Sass Loop

Sass中的@for循环和JavaScript中的for循环用法类似，它有两种写法：
- start through end 包括end
- start to end不包括end
例子：
1
2
3
@for $i from 1 through 12 {
.col-#{$i} {width: 100%/12 * $i;}
}
习题解答
1
2
3
@for $i from 1 to 6 {
.text-#{$i} {font-size: $i * 10px;}
}

Use @each to Map Over Items in a List

each方法用于遍历元素，如：

1
2
3

@each $color in blue, red, green {
  .#{$color}-text {color: $color;}
}

另一种写法是给出一组键值对形式的值来遍历，使用@each语法时需要带上$key

$colors: (color1: blue, color2: red, color3: green);

@each $key, $color in $colors {
  .#{$color}-text {color: $color;}
}

习题解答：

@each $color in blue, black, red {
  .#{$color}-bg {background-color: $color;}
}

div {
  height: 200px;
  width: 200px;
}

Apply a Style Until a Condition is Met with @while

@while方法类似于JavaScript中的while循环，它的使用规则是循环创建CSS规则，直到条件满足。前面提到的用@for循环创建栅格化布局的例子也可以使用@while来实现
1
2
3
4
5
$x: 1;
@while $x < 13 {
.col-#{$x} { width: 100%/12 * $x;}
$x: $x + 1;
}
习题解答：
1
2
3
4
5
$x: 1;
@while $x < 11 {
.text-#{$x} {font-size: $x * 5px;}
$x: $x + 1;
}
Split Your Styles into Smaller Chunks with Partials

partial在Sass中指的是CSS代码模块，可以在其他的Sass文件中被引入和使用。它允许我们更好地管理模块中的代码。

partial代码有以下特征：
- 文件以_开头，告诉Sass这是一个代码块，不要转换成CSS文件
- 文件保存在.scss文件中
- 引用时使用@import关键字,@import时不需要带_
1
2
3
4
/* mixins存在名为"_mixins.scss"的partial中 */
/* In the main.scss file */

@import 'mixins'
引入mixins之后，partial中的所有代码、变量都可以直接被使用
1
2
3
// The main.scss file

@import 'variables'
Extend One Set of CSS Styles to Another Element

Sass有一个特性叫做extend扩展，它允许我们将一个元素的CSS样式“借”来给另一个元素使用。

比如我们设置一个元素.panel的css样式如下：
1
2
3
4
5
.panel{
background-color: red;
height: 70px;
border: 2px solid green;
}
这时另一个元素.big-panel拥有.panel相同的样式，此外，它还设置了width，font-size样式，那么我们可以直接将.panel的样式搬过来使用
1
2
3
4
5
.big-panel{
@extend .panel;
width: 150px;
font-size: 2em;
}
写法是@extend加上元素名

习题解答：
1
2
3
4
.info-important {
@extend .info;
background-color: magenta;
}

使用变量

变量声明 $highlight-color: #F90