Scss初步探索

SCSS （Syntactically Awesome StyleSheets） 是什么

在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、继承(extend)、导入 (inline imports) 等高级功能

变量

SCSS 变量支持块级作用域，以$开头

SCSS 变量有 6 种类型：

1. 数字，1, 2, 13, 10px
2. 字符串，有引号字符串与无引号字符串。!important 声明等一律看作无引号字符串
3. 颜色，blue, #04a3f9, rgba(255,0,0,0.5)
4. 布尔型，true, false
5. 空值，null
6. 数组 (list)，用空格或逗号作分隔符，如：1.5em 1em 0 2em, Helvetica, Arial, sans-serif 是说数组有 4 个元素，“1.5em 1em 0 2em”、“Helvetica”、“Arial”、“sans-serif”
7. maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)

SCSS 支持±*/%操作，支持==、!=，可以自动做单位换算

例 1：变量的声明与赋值

// 给content赋值
$content: 'First content';
$content2: null;

// 加!default的意思是，若变量没被赋值过（null也算没赋值），则可以赋上，若已经有值了，就不改了
$content: 'Second content?' !default;
$content2: 'Non-null content' !default;
$new_content: 'First time reference' !default;

#main {
  content: $content;
  content2: $content2;
  new-content: $new_content;
  // 结果：
  // content: "First content"
  // content2: "Non-null content"
  // new-content: "First time reference"
}

例 2：局部变量转化为全变量

#main {
  // 在后面加 !global 转化为全局变量
  $width: 5em !global;
  width: $width;
}

#sidebar {
  width: $width;
}

例 3：插值

通过 #{} 插值

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

控制指令（@if @for @while @each）

混合指令 @mixin 和引入混合指令的 @include

基础

可以加参数，参数名被视为变量名，下划线、短横线可以互换使用

// 无参数
@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}
.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

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

// 关键词参数
p {
  @include sexy-border($color: blue);
}
h1 {
  @include sexy-border($color: blue, $width: 2in);
}

@include 的时候在@mixin 模板中插入内容

@mixin 里可以放一个@content，@include 的时候可以在后面加一个对象，这个对象会放到@content 里

@mixin apply-to-ie6-only {
  * html {
    @content;
  }
}
@include apply-to-ie6-only {
  #logo {
    background-image: url(/logo.gif);
  }
}

// 等价于

* html #logo {
  background-image: url(/logo.gif);
}

为便于书写，@mixin 可以用 = 表示，而 @include 可以用 + 表示

@if

$boolean: true !default;
@mixin test {
  @if $boolean {
    background-color: red;
  } @else {
    background-color: blue;
  }
}

@for

以下两种方法均也可以从大到小（从 4 到 1）

// 第一种：@for $var from <start> through <end>
// 含头含尾
@for $i from 1 through 4 {
  .div-#{$i} {
    width: 60px + $i;
  }
}
// 结果是 div-1 到 div-4，width 为 61px 到 64px

// 第二种：@for $var from <start> to <end>
// 含头去尾
@for $i from 1 to 4 {
  .div-#{$i} {
    width: 60px + $i;
  }
}
// 结果是 div-1 到 div-3，width 为 61px 到 63px

@while

$types: 4;
@while $types > 0 {
  .div-#{$types} {
    width: 20px + $types;
  }
  $types: $types - 1;
}
// 结果是 div-4 到 div-1，width 为 24px 到 21px

@each

$list: adam john wynn mason kuroir;

@mixin author-images {
  @each $author in $list {
    .photo-#{$author} {
      background: url('/images/avatars/#{$author}.png') no-repeat;
    }
  }
}

结果

.author-bio .photo-adam {
  background: url('/images/avatars/adam.png') no-repeat;
}
.author-bio .photo-john {
  background: url('/images/avatars/john.png') no-repeat;
}
.author-bio .photo-wynn {
  background: url('/images/avatars/wynn.png') no-repeat;
}
.author-bio .photo-mason {
  background: url('/images/avatars/mason.png') no-repeat;
}
.author-bio .photo-kuroir {
  background: url('/images/avatars/kuroir.png') no-repeat;
}

多重数组版本

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

map 版本

@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
  #{$header} {
    font-size: $size;
  }
}

运算

算数运算

(+, -, *, /, %)，如果必要会在不同单位间转换值（ width: 1in + 8pt; => width: 1.111in;）

字符串的"+"加法就是字符串连接

关于除号/

// 不能用作除法的情况
// 在原生css中，/有独特的含义，如font: 12px/30px就是指字体大小为12像素、行高为30px
p {
  font: 12px/30px;
}

// 为了确保不被看作是除法，可以采取的措施是
p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

关于颜色的算数运算

rgba 各项是分开的，不会进位
算数运算 alpha 值要相同，因为 alpha 值不参与算数运算

p {
  color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}

关系运算

<, >, <=, >= 用于数字， ==, != 用于所有数据类型

嵌套

样式嵌套

#main {
  width: 97%;

  p,
  div {
    font-size: 2em;
    a {
      font-weight: bold;
    }
  }

  pre {
    font-size: 3em;
  }
}

等价于

#main {
  width: 97%;
}
#main p,
#main div {
  font-size: 2em;
}
#main p a,
#main div a {
  font-weight: bold;
}
#main pre {
  font-size: 3em;
}

当子元素使用父元素的时候，使用 & 代表父元素

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

等价于

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

属性嵌套

关于命名空间，font-family, font-size, font-weight 都是以 font 作为属性的命名空间，可以进行嵌套。命名空间本身也可以有自己的属性值，这里就是 font: 20px/24px

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

等价于

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

参考：https://www.sass.hk/docs/#9

函数指令

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

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

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