Sass 语法

编译

编译命令

• 单文件转换命令 sass input.scss output.css
• 单文件监听命令 sass --watch input.scss:output.css
• 如果你有很多的sass文件的目录，你也可以告诉sass监听整个目录：sass --watch app/sass:public/stylesheets

编译配置项

• –style 表示解析后的 css 是什么排版格式

  • :nested 默认

    #main {
      color: #fff;
      background-color: #000; }
      #main p {
        width: 10em; }
    
    .huge {
      font-size: 10em;
      font-weight: bold;
      text-decoration: underline; }
    

  • expanded

    #main {
      color: #fff;
      background-color: #000;
    }
    #main p {
      width: 10em;
    }
    
    .huge {
      font-size: 10em;
      font-weight: bold;
      text-decoration: underline;
    }
    

  • compact

    #main { color: #fff; background-color: #000; }
    #main p { width: 10em; }
    
    .huge { font-size: 10em; font-weight: bold; text-decoration: underline; }
    

  • compressed

    #main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}
    

• –sourcemap 表示开启 sourcemap 调试。开启 sourcemap 调试后，会生成一个后缀名为 .css.map 文件。

变量 $

• 普通变量 $fontSize: 12px; 只在当层块以及以下块内有用，如果内部块有同名变量则以内部为准，类似于函数的块作用域

• 默认变量 $fontSize: 12px !default;

  • 如果之前未定义过该变量，则给该变量赋初始值；如果之前已经定义过该变量且赋过不为 null 的值，则该默认赋值将被忽略。

  • 它可被其他同名普通变量覆盖。

• 变量引用 只在当层块以及以下块内有用，如果内部块有同名变量则以内部为准，类似于函数的块作用域

• 变量名 用中划线和下划线连接都可以，无论用中划线还是下划线等值

  $link-color: blue;
  a {
    color: $link_color;
  }
  //编译后
  a {
    color: blue;
  }
  

• 插值语句 #{}

  对变量取值的一种特殊用法，通过 #{} 插值语句可以在选择器或属性名中使用变量：

  $name: foo;
  $attr: border;
  p.#{$name} {
    #{$attr}-color: blue;
  }
  
  p.foo {
    border-color: blue; }
  
  // #{} 插值语句也可以在属性值中插入 SassScript，大多数情况下，这样可能还不如使用变量方便，但是使用 #{} 可以避免 Sass 运行运算表达式，直接编译 CSS。
  p {
    $font-size: 12px;
    $line-height: 30px;
    font: #{$font-size}/#{$line-height};
  }
  

嵌套 {} > + ~

• 父级选择器 &

  // 一般用法
  article a {
    color: blue;
    &:hover { color: red }
  }
  /*编译后*/
  article a { color: blue }
  article a:hover { color: red }
  
  // 你想不到但也有用处的用法
  #content aside {
    color: red;
    body.ie & { color: green }
  }
  /*编译后*/
  #content aside {color: red};
  body.ie #content aside { color: green }
  

• 选择器嵌套
  • 群组选择器
  • 子组合选择器：>
  • 同层相邻选择器：+
  • 同层选择器：~

  article {
    ~ article { border-top: 1px dashed #ccc }
    > section { background: #eee }
    dl > {
      dt { color: #333 }
      dd { color: #555 }
    }
    nav + & { margin-top: 0 }
  }
  /*编译后*/
  article ~ article { border-top: 1px dashed #ccc }
  article > footer { background: #eee }
  article dl > dt { color: #333 }
  article dl > dd { color: #555 }
  nav + article { margin-top: 0 }
  

• 属性嵌套 属性前缀相同可以将属性提取出来进行属性嵌套

  // 一般属性嵌套
  nav {
    border: {
    style: solid;
    width: 1px;
    color: #ccc;
    }
  }
  /*编译后*/
  nav {
    border-style: solid;
    border-width: 1px;
    border-color: #ccc;
  }
  
  // 你想不到但又很实用的用法——属性嵌套+属性缩写
  nav {
    border: 1px solid #ccc {
    left: 0px;
    right: 0px;
    }
  }
  /*编译后*/
  nav {
    border: 1px solid #ccc;
    border-left: 0px;
    border-right: 0px;
  }
  

导入 @import

• css @import VS sass @import

  原生 css 的@import 可以导入外部 .css 样式文件，但只有执行到 @import时，浏览器才会去下载其他 css 文件，这导致页面加载起来特别慢。所以用 sass 的 @import 去导入外部样式文件，在生成 css 文件时就把相关文件导入进来。

  如何区分 @import 是 css 还是 sass 的导入功能呢？只有以下三种情况，sass 文件中的 @import 是以原生 css 的行为做导入操作。

  • 被导入文件的名字以 .css 结尾；
  • 被导入文件的名字是一个 URL 地址（比如 http://www.sass.hk/css/css.css），由此可用谷歌字体 API 提供的相应服务；
  • 被导入文件的名字是 CSS 的 url() 值。

• 单文件导入 @import "test2.scss";

  可省略后缀，即支持 .scss、.sass 格式，但不能用 @import 导入 .css 文件，它会认为是想用原生 css @import 导入。但因为 sass 兼容原生 css，我们可以将 .css 改为 .scss，这样就以 sass 的方式导入样式文件。

• 多文件导入 @import "test2.scss", "test3.scss";

• 部分文件 Partials 导入，不希望被编译为 css，Partials 文件命名需要 _ 开头，但引入的时候不需要 _。

• 嵌套导入

  #main {
      // 生成的结果跟你直接在 #main 选择器内写_test2.scss文件的内容完全一样。
      // 注意部分导入的样式文件命名要以 _ 开头，但引入的时候可以省略 _ 符号
  	@import "test2.scss";
  }
  

注释 // /* */

• 多行注释 /* */，编译到 css 文件

  如果写在原生 css 不支持的地方，识别不了，也不会编译到 css 文件中。

• 单行注释 // 不会被编译到 css 文件

混入 @mixin/@include

如果你的整个网站中有几处小小的样式类似（例如一致的颜色和字体），那么使用变量来统一处理这种情况是非常不错的选择。但是当你的样式变得越来越复杂，你需要大段大段的重用样式的代码，独立的变量就没办法应付这种情况了。你可以通过 sass 的混合器实现大段样式的重用。

• 定义混入

  • 无参 @mixin large-tex{...}

  • 有参 @mixin large-text($color, $width:10px) {...}

• 使用混入

  • 无参@include large-text
  • 有参 只传 value，要和形参位置严格对应 @include large-text('red', 20px) ；使用name:value形式传参不限制传参位置@include large-text($width:20px)；可以给参数设置默认值

继承 @extend

@extend 类名继承其他样式类

//通过选择器继承继承样式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

// 一般你以为继承到的
.seriousError {
  border: 1px solid red;
  background-color: #fdd;
  border-width: 3px;
}

// 除了以上从 .error 自身继承到的，其它与 .error 相关联的组合样式都被 .seriousError 继承
.error a{  // 应用到 .seriousError a
  color: red;
  font-weight: 100;
}
h1.error { // 应用到 hl.seriousError
  font-size: 1.2rem;
}

关于 @extend 有两个要点你应该知道。

• 跟混合器相比，继承生成的 css 代码相对更少。因为继承仅仅是重复选择器，而不会重复属性，所以使用继承往往比混合器生成的 css 体积更小。如果你非常关心你站点的速度，请牢记这一点。

  所以最佳实践是你完全可以放心地继承有后代选择器修饰规则的选择器，不管后代选择器多长，但有一个前提就是，不要用后代选择器去继承。因为如果用后代选择器去继承有后代选择器的 css 规则，会让情况变得很复杂。

• 继承遵从 css 层叠的规则。当两个不同的 css 规则应用到同一个 html 元素上时，并且这两个不同的 css 规则对同一属性的修饰存在不同的值，css 层叠规则会决定应用哪个样式。相当直观：通常权重更高的选择器胜出，如果权重相同，定义在后边的规则胜出。

数据类型

• 字符串，有引号字符串与无引号字符串，“foo”, ‘bar’, baz

  // 需要注意的是索引从 1 开始
  // https://www.runoob.com/sass/sass-string-func.html
  quote(string) - 给字符串添加引号。
  unquote(string)	- 移除字符串的引号
  str-index(string, substring) - 返回 substring 子字符串第一次在 string 中出现的位置。如果没有匹配到子字符串，则返回 null。
  str-insert(string, insert, index) - 在字符串 string 中 index 位置插入 insert。
  str-length(string) - 返回字符串的长度。
  str-slice(string, start, end) - 从 string 中截取子字符串，通过 start-at 和 end-at 设置始末位置，未指定结束索引值则默认截取到字符串末尾。包含起始和截止索引位置字符。
  to-lower-case(string) - 将字符串转成小写
  to-upper-case(string) - 将字符串转成大写
  unique-id()	- 返回一个无引号的随机字符串作为 id。不过也只能保证在单次的 Sass 编译中确保这个 id 的唯一性。
  

• 数字，1, 2, 13, 10px

  abs(number)	- 返回一个数值的绝对值。
  ceil(number) - 向上取整
  floor(number) - 向下取整
  comparable(num1, num2) - 返回一个布尔值，判断 num1 与 num2 是否可以进行比较
  max(number...) - 返回最大值
  min(number...) - 返回最小值
  percentage(number) - 将数字转化为百分比的表达形式。
  random() - 返回 0-1 区间内的小数，
  random(number) - 返回 1 至 number 之间的整数，包括 1 和 limit。
  round(number) - 返回最接近该数的一个整数，四舍五入。
  

• 列表 ，list，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif

  // Sass 列表是不可变的，因此在处理列表时，返回的是一个新的列表，而不是在原有的列表上进行修改。
  // 列表的起始索引值为 1，记住不是 0。
  append($list, $value, [$separator]) - 将单个值 $value 添加到列表尾部。$separator 是分隔符，默认会自动侦测，或者指定为逗号或空格。（space-空格，comma-逗号，slash-斜杠）
  index($list, $val) - 元素的索引位置，从1开始
  is-bracketed($list) - 判断列表中是否有中括号
  join($list1, $list2, [$separator, $bracketed]) - 合并两列表，将列表 list2 添加到列表 list1 的末尾。$separator 是分隔符，默认会自动侦测，或者指定为逗号或空格。 $bracketed 默认会自动侦测是否有中括号，可以设置为 true 或 false。
  length($list) - 数组长度
  list-separator($list) - 返回一列表的分隔符类型。可以是空格或逗号。
  nth($list, $index) - 获取指定索引位置的值
  set-nth($list, $index, $val) - 设置指定位置的值
  zip($lists) - 将多个列表按照以相同索引值为一组，重新组成一个新的多维度列表。
  

• 映射，maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)

  // Sass Map 是不可变的，因此在处理 Map 对象时，返回的是一个新的 Map 对象，而不是在原有的 Map 对象上进行修改。
  map-get($map, $key, [$keys...]) - 通过key值获取value；支持传入多个key值获取深层的值
  map-has-key($map, $key, [$keys...]) - 判断是否包含某个键；支持深层key
  map-keys($map) - 获取所有键的列表
  map-values($map) - 获取所有值的列表
  map-remove($map, $keys...) - 移除一个或多个key
  map-merge($map1, $map2) - 浅层次合并两个map，相同的属性取$map2的值
  

• 颜色，blue, #04a3f9, rgba(255,0,0,0.5)

  rgb(red, green, blue) - 创建一个 Red-Green-Blue (RGB) 色。
  rgba(red, green, blue, alpha) - 根据红、绿、蓝和透明度值创建一个颜色。
  hsl(hue, saturation, lightness) - 通过色相（hue）、饱和度(saturation)和亮度（lightness）的值创建一个颜色。
  hsla(hue, saturation, lightness, alpha) - 通过色相（hue）、饱和度(saturation)、亮度（lightness）和透明（alpha）的值创建一个颜色。
  grayscale(color) - 将一个颜色变成灰色，相当于 desaturate( color,100%)。
  complement(color) - 返回一个补充色，相当于adjust-hue($color,180deg)。
  invert(color, weight) - 返回一个反相色，红、绿、蓝色值倒过来，而透明度不变。
  
  red(color) - 从一个颜色中获取其中红色值（0-255）。
  green(color) - 从一个颜色中获取其中绿色值（0-255）。
  blue(color) - 从一个颜色中获取其中蓝色值（0-255）。
  hue(color) - 返回颜色在 HSL 色值中的角度值 (0deg - 255deg)。
  saturation(color) - 获取一个颜色的饱和度值(0% - 100%)。
  lightness(color) - 获取一个颜色的亮度值(0% - 100%)。
  alpha(color)	
  opacity(color) - 获取颜色透明度值(0-1)。
  

• 空值，null

• 选择器函数 selector

  is-superselector(super, sub) - 比较两个选择器匹配的范围，即判断 super 选择器是否包含了 sub 选择器所匹配的范围，是的话返回 true，否则返回 false。
  selector-append(selectors) - 将第二个 (也可以有多个) 添加到第一个选择器的后面。 selector.
  selector-extend(selector, extendee, extender)	
  selector-nest(selectors) - 返回一个新的选择器，该选择器通过提供的列表选择器生成一个嵌套的列表。
  selector-parse(selector) - 将字符串的选择符 selector 转换成选择器队列。
  selector-replace(selector, original, replacement) - 给定一个选择器，用replacement 替换 original 后返回一个新的选择器队列。
  selector-unify(selector1, selector2) - 将两组选择器合成一个复合选择器。如两个选择器无法合成，则返回 null 值。
  simple-selectors(selectors) - 将合成选择器拆为单个选择器。	
  

• Introspection 函数

  // Sass Introspection 函数比较少用于构建样式表，一般用于代码的调试上。
  call(function, arguments...) - 函数的动态调用，即调用函数 function 参数为 arguments，并返回结果。
  content-exists() - 查看当前的混入是否传递 @content 块。
  feature-exists(feature) - 检查当前的 Sass 实现是否支持该特性。
  function-exists(functionname) - 检测指定的函数是否存在
  get-function(functionname, css: false) - 返回指定函数。如果 css 为 true，则返回纯 CSS 函数。
  global-variable-exists(variablename) - 检测某个全局变量是否定义。
  inspect(value) - 返回一个字符串的表示形式，value 是一个 sass 表达式。
  mixin-exists(mixinname) - 检测指定混入 (mixinname) 是否存在。
  type-of(value) - 返回值类型。返回值可以是 number, string, color, list, map, bool, null, function, arglist。
  unit(number) - 返回传入数字的单位（或复合单位）。
  unitless(number) - 返回一个布尔值，判断传入的数字是否带有单位。
  variable-exists(variablename) - 判断变量是否在当前的作用域下。
  

运算

• 字符串运算 +
• 数字运算 +, -, *, /, %
• 比较运算 <, >, <=, >=
• 逻辑运算 and or 以及 not
• 颜色值运算 #010203 + #040506，则计算 01 + 04 = 05、02 + 05 = 07、03 + 06 = 09，结果为#050709
• 圆括号 ()

控制 @if/@for/@each/@while

• @if：条件控制指令
• @for:循环指令 包含 end @for $var from <start> through <end>，或者 不包含 end @for $var from <start> to <end>
• @each:循环指令 @each $var in <list>
• @while:循环指令

函数 @function

• 内置函数

• 自定义函数

  @function 函数名称(参数列表){
   // 数据处理
  }
  

媒体查询 @media

@media支持嵌套，编译到最外层

根发出 @at-root

@at-root 将样式编译到根层级。

警告@warn/错误@error/调试@debug

• 警告 @warn message;

  警告信息，警告信息一般会在执行 scss 程序生成 css 时触发，所以出现在命令行中。

• 错误 @error message;

  错误信息，错误信息直接显示在编译的 css 文件中。

• 调试@debug 语句

  将 SassScript 表达式的值打印到标准错误输出流