初面网

Appearance

Sass(Scss) ​

  • 注释

分为块注释/* */与行注释//。前者会完整输出到编译后的css文件中。

如果块注释的第一个字符是叹号，其块内注释会在压缩模式下也保留。这通常用于添加版权信息。

  • 嵌套
css
div p{
  color: red;
  .font-color{
    color: gray;
  }
}
  • 父选择器
css
a{
  text-decoration: none;
  &:hover{
    text-decoration: underline;
  }
}
  • 配合 后缀
css
#main {
  color: black;
  &-sidebar { border: 1px solid; }
}

编译为

css
#main {
  color: black; }
  #main-sidebar {
    border: 1px solid; }
  • 属性嵌套
css
.funky {
  font: 20px/24px {
    family: fantasy;
    weight: bold;
  }
}

编译为

css
.funky {
  font: 20px/24px;
    font-family: fantasy;
    font-weight: bold; }

SassScript ​

这个功能允许sass像js那样书写变量、方法等，能够程序化地生成样式。

  • 变量

使用$符号开头

在块内声明的变量属于局部变量。想将局部变量提升为全局变量需要使用!global。

css
$width: 5em;

#main{
  width: $width;
  $height: 10em !global;
}

#sider{
  height: $height;
}
  • 数据类型

支持6中主要的数据类型

  1. 数字, 1,2, 10px
  2. 字符串, "f", 'c', n
  3. 颜色, blue, #ccc, rgba(255,0,0,1)
  4. 布尔
  5. 空值, null
  6. 数组, 用空格或逗号作分割
  7. maps, 相当于javascript的object, (key1: value1, key2: value2)
  • 字符串
css
@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";
  }
}
@include firefox-message(".header");

编译为

css
body.firefox .header:before {
  content: "Hi, Firefox users!"; }

请留意其中.header是如何转变的，会非常有用

  • 运算

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

除法运算比较特殊，以下三种情况 / 将被视为除法运算符号：

  • 如果值，或值的一部分，是变量或者函数的返回值
  • 如果值被圆括号包裹
  • 如果值是算数表达式的一部分
css
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
}

如果需要使用变量，同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中，只需要用 #{} 插值语句将变量包裹。

css
p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}
  • 插值语句

#{}，像这样的符号，在里面写上选择器或属性名

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

编译为

css
p.foo {
  border-color: blue; }
  • 尚未定义(!default)

如果未定义则重新赋值，如果已定义则忽略本行赋值

如果是null, 则算作未赋值

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

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

编译为

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

@import导入 ​

通常，@import 寻找 Sass 文件并将其导入，但在以下情况下，@import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件。

  • 文件拓展名是 .css；
  • 文件名以 http:// 开头；
  • 文件名是 url()；
  • @import 包含 media queries。

Sass 允许同时导入多个文件：

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

@extend扩展 ​

用于：一个元素使用的样式与另一个元素完全相同，但又添加了额外的样式。

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

@for ​

两种格式：

@for $var from <start> through <end>

@for $var from <start> to <end>

through包含开头和结尾，to仅包含开头

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

编译为

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

@each ​

格式是：@each var in <list>

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

编译为

css
.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'); }

多条件

css
@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;
  }
}

编译为

css
.puma-icon {
  background-image: url('/images/puma.png');
  border: 2px solid black;
  cursor: default; }
.sea-slug-icon {
  background-image: url('/images/sea-slug.png');
  border: 2px solid blue;
  cursor: pointer; }
.egret-icon {
  background-image: url('/images/egret.png');
  border: 2px solid white;
  cursor: move; }

@while ​

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

编译为

css
.item-6 {
  width: 12em; }

.item-4 {
  width: 8em; }

.item-2 {
  width: 4em; }

@mixin ​

用@include引用

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

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

可以在最外层引用混合样式

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

编译为

css
a {
  color: blue;
  background-color: red; }

更新于: