Sass学习笔记

Sass 是对 CSS 的扩展，让 CSS 语言更强大、优雅。 它允许你使用变量、嵌套规则、 mixins、导入等众多功能， 并且完全兼容 CSS 语法。

可以通过命令行的方式编译Sass：

sass input.scss output.css

还可以命令 Sass 监视文件的改动并更新 CSS ：

sass --watch input.scss:output.css

但一般就会使用gulp、webpack来编译工程中的sass。

嵌套

sass允许css规则进行嵌套：

#main p {
  color: #00ff00;
  width: 97%;

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

会被编译为：

#main p {
  color: #00ff00;
  width: 97%; 
}
#main p .redbox {
    background-color: #ff0000;
    color: #000000; 
}

这有效帮助我们避免父选择器的重复书写。

引用父选择器 &

a{
    font-weight: bold;
    text-decoration: none;
    &:hover{
        text-decoration: underline;
    }
}

& 在编译时将被替换为父选择符，输出到 CSS 中。

嵌套属性

CSS有一些属性是在一个命名空间下的，如font：font-family, font-size, font-weight。sass就允许在一个命名空间下面书写sub属性，从而避免一条一条书写：

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

被编译为：

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

注释

sass支持两种注释方式：

• 多行： /* */ ：被编译为css的时候被保留
• 单行：//：被编译为css的时候被去除，不会被保留

/* This comment is
 * several lines long.
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body { color: black; }

// These comments are only one line long each.
// They won't appear in the CSS output,
// since they use the single-line comment syntax.
a { color: green; }

被编译为：

/* This comment is
 * several lines long.
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body {
  color: black; 
  }

a {
  color: green; 
  }

变量

变量以美元符号$开头：

$width :5em;

#main{
    width:$width;
}

变量只在其被定义时所属嵌套选择器中可用。若变量在所有嵌套选择器的外部被定义，那么它们在任意地方都是可用的，可以理解为全局的。

变量默认值

你可以通过在值的末尾添加 !default 标记来指定变量默认值。当变量没有被赋值的情况下就会使用这个默认值：

$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;

#main {
  content: $content;
  new-content: $new_content;
}

被编译为：

#main {
  content: "First content";
  new-content: "First time reference"; }

运算

数字运算

sass支持数字类型的标准运算：+、-、*、/、%，如果需要的话，也可以在不同单位间做转
也支持关系运算： <、>、<=、>=、 ==、!=

p {
  width: 1in + 8pt;
}

被编译为：

p {
  width: 1.111in; 
  }

括号可以改变运算顺序

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

被编译为：

p {
  width: 9em; }

颜色运算

所有算数运算都支持颜色值， 并且是分段运算的。 也就是说，红、绿、蓝各颜色分量会单独进行运算：

p {
  color: #010203 + #040506;
}

计算公式为 01 + 04 = 05、02 + 05 = 07 和 03 + 06 = 09， 并且被合成为：

p {
  color: #050709; 
}

字符串运算

+运算符可以用来连接字符串

p {
  cursor: e + -resize;
}

被编译为：

p {
  cursor: e-resize; 
  }

@规则

Sass 支持所有 CSS3 的 @ 规则， 以及一些 Sass 专属的规则，也被称为“指令”。

@import

Sass扩展了css的@import规则，使其能够引入scss文件。
所有引入的scss文件都会被合并并输出一个单一的css文件。

@import根据文件名引入，默认情况下会寻找scss文件并直接引入，但是在几种情况下会被编译成css的@import规则：

• 文件的扩展名是 .css
• 文件名以 http:// 开头
• 文件名是 url()
• @import 包含了任何媒体查询（media queries）

css中的@import规则用于从其他样式表导入样式规则，但并不会进行合并等操作。

@import "foo.scss"
@impot "foo"

两者都将引入 foo.scss 文件
可以通过一个 @import 引入多个文件:

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

如果你有一个scss文件需要引入，但是你又不希望它被编译为一个css文件，就可以在文件名前面加一个下划线就能避免被编译。

例如，你有一个文件叫做 _colors.scss。 这样就不会生成 _colors.css 文件了， 而且你引入的时候还可以省略掉前面的下划线：

@import "colors";

嵌套@import规则

虽然大部分时间只需在顶层文件使用 @import 就行了， 但是，你还可以把他们包含在 CSS 规则 和 @media 规则中。

//example.scss
.example {
  color: red;
}

#main {
  @import "example";
}

会被编译成：

#main .example {
  color: red;
}

@media

与css中的@media用法相同，但那是可以被嵌套在规则中。

.sidebar{
    width:300px;
    @media screen and (orientation:landscape){
        width:500px;
    }
}

被编译为：

.sidebar {
  width: 300px; 
}
@media screen and (orientation: landscape) {
    .sidebar {
      width: 500px; 
    } 
}

@media规则之间也可以互相嵌套，编译时会被用and连接起来：

@media screen{
    .sidebar{
        @media (orientation:landscape){
        }
    }
}

被编译为：

@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px; 
    } 
}

@extend

用于继承另一个样式。

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

被编译为：

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

.seriousError {
  border-width: 3px;
}

这意味这error中所有的样式seriousError 也都有，同时还有一些自己独有的样式。

条件语句

@if

p{
    @if 1+1 == 2 {border: 1px solid;}
    @if 5<3      { border: 2px dotted; }
    @if null     { border: 3px double; }
}

被编译为：

p {
  border: 1px solid; 
}

可以和多个@else if语句、一个@else语句一起使用。

$type:monster;

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

被编译为：

p {
  color: green; 
}

@for

@for指令用于重复地输出一组样式。

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

被编译为：

.item-1 {
  width: 2em; 
  }
.item-2 {
  width: 4em; 
  }
.item-3 {
  width: 6em; 
  }

@each

用于遍历一个list

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

编译为：

.puma-icon {
  background-image: url('/images/puma.png'); }
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); }
.egret-icon {
  background-image: url('/images/egret.png'); }
.salamander-icon {
  background-image: url('/images/salamander.png'); }

@while

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

编译为：

.item-6 {
  width: 12em; }

.item-4 {
  width: 8em; }

.item-2 {
  width: 4em; }

mixin指令

Mixins允许定义可以在整个样式表中可以重用的样式。

定义一个mixin

使用@mixin来定义一个mixin：

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

mixin也可以包含选择器：

@mixin clearfix {
  display: inline-block;
  &:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  * html & { height: 1px }
}

包含一个mixin

使用@include来引入一个mixin：

.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也可以在任何规则外部引入：

@mixin silly-links {
  a {
    color: blue;
    background-color: red;
  }
}

@include silly-links;

一个mixin内部也可以引用其他mixin：

@mixin highlighted-background { background-color: #fc0; }
@mixin header-text { font-size: 20px; }

@mixin compound {
    @include highlighted-background;
    @include header-text;
}

参数

mixin可以将sass变量作为参数。
在定义mixin时，参数是用逗号分隔的变量名，全部在mixin名字之后的括号中。使用mixin时也以同样的方式传入参数

@mixin sexy-border($color, $width){
    border:{
        color: $color;
        width: $width;
        style: dashed;
    }
}

p {
    @include sexy-border(blue,1em);
}

被编译为：

p{
    border-color: blue;
    border-width: 1em;
    border-style: dashed;
}

mixin可以设定参数的默认值，如果在使用的时候没有传入那个参数就使用默认值：

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

被编译为：

p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed; }

h1 {
  border-color: blue;
  border-width: 2in;
  border-style: dashed; }

函数指令

@function grid-width($n){
    @return $n*5;
}

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

编译为：

#sidebar{
    width: 10px;
}

在函数最后必须使用return来返回结果。