Skip to main content

Sass Syntax

注释​

CSS中的注释是/* */ ，Sass中支持//来进行注释，//类型的注释在编译后会被擦除：

/*
  Hello
*/

// World

如果是压缩输出模式，那么注释也会被去掉，此时可以在多行注释的第一个字符书写一个! ，即便是在压缩模式，这条注释也会被保留，通常用于添加版权信息：

/*!
  comment
*/

.test{
  width: 300px;
}

变量​

通过$开头来进行声明，赋值方法和CSS属性的写法是一致的：

 /* 声明变量 */
$width: 1600px;
$pen-size: 3em;

div{
  width: $width;
  font-size: $pen-size;
}

变量的声明时支持块级作用域的，如果是在一个嵌套规则内部定义的变量，那么就只能在嵌套规则内部使用(局部变量)，如果不是在嵌套规则内定义的变量那就是全局变量：

$width: 1600px;

div{
  /* 局部变量 */
  $width: 800px;
  $color: red;

  p.one{
    /* 800px */
    width: $width; 
    
    /* red */
    color: $color; 
  }
  
}

p.two{
  /* 1600px */
  width: $width; 

  /* 报错，因为 $color 是一个局部变量 */
  color: $color; 
}

可以通过一个!global将一个局部变量转换为全局变量：

$width: 1600px;

div{
  /* 局部变量 */
  $width: 800px;

  /* 全局变量 */
  $color: red !global;

  p.one{
    width: $width;
    color: $color;
  }
  
}

p.two{
  /* 1600px */
  width: $width;

  /* red */
  color: $color;
}

数据类型​

在Sass中支持7种数据类型：

数值类型​

Sass里面支持两种数值类型：带单位数值和不带单位的数值，数字可以是正负数以及浮点数：

$my-age: 19;
$your-age: 19.5;
$height: 120px;

字符串类型​

字符串类型有引号字符串和无引号字符串：

$name: 'Tom Bob';
$container: "top bottom";
$what: heart;

div{
  background-image: url($what + ".png");
}

布尔类型​

该类型有两个值：true和false，可以进行逻辑运算，支持and、or、not来做逻辑运算：

/* false */
$a: 1>0 and 0>5; 
/* true */
$b: "a" == a; 
/* false */
$c: false; 
/* true */
$d: not $c;

空值​

null表示为空的意思：

$value: null;

因为是空值，因此不能够使用它和其他类型进行算数运算。

数组​

数组用空格或者逗号来进行分隔：

$list0: 1px 2px 5px 6px;
$list1: 1px 2px, 5px 6px;
$list2: (1px 2px) (5px 6px);
  1. 数组里面可以包含子数组，如1px 2px, 5px 6px就是包含了两个数组，1px 2px是一个数组，5px 6px是另一个数组，如果内外数组的分隔方式相同，例如都是采用空格来分隔，这个时候可以使用一个小括号来分隔(1px 2px) (5px 6px)。
  2. 添加了小括号的内容最终被编译为CSS的时候，会被去除掉小括号。
div{
  padding: $list2;
}
/*
div {
  padding: 1px 2px 5px 6px;
}
*/
  1. 小括号如果为空，则表示是一个空数组，空数组不可以直接编译为CSS。
$list3: ();

div{
  /* 报错 */
  padding: $list3;
}
  1. 如果是数组里面包含空数组或者null，编译能够成功，空数组以及空值会被去除掉。
$list2: 1px 2px null 3px;
$list3: 1px 2px () 3px;

div{
  padding: $list2;
}

.div2{
  padding: $list3;
}
  1. 可以使用nth函数去访问数组里面的值，注意数组的下标是从1开始的。
$font-sizes: 12px 14px 16px 18px 24px;

/* 通过索引访问 List 中的值 */
$base-font-size: nth($font-sizes, 3);

body {
  font-size: $base-font-size;
}

字典​

字典类型必须要使用小括号扩起来，小括号里面是一对一对的键值对：

$a: (
  $key1: value1,
  $key2: value2,
)

可以通过map-get方法来获取字典值：

$colors: (
  "primary": #4caf50,
  "secondary": #ff9800,
  "accent": #2196f3,
);


$primary: map-get($colors, "primary");

button{
  background-color: $primary;
}

颜色类型​

支持原生CSS中各种颜色的表示方式，包括十六进制、RGB、RGBA、HSL、HSLA、颜色英语单词。

Sass还提供了内置的Colors相关的各种函数，可以方便我们对颜色进行一个颜色值的调整和操作。

颜色亮度​

lighten是增加亮度，darken是减少亮度：

$color : red;

.div1{
  width: 200px;
  height: 200px;
  /* 亮度增加10% */
  background-color: lighten($color, 10%);
}

.div2{
  width: 200px;
  height: 200px;
  /* 亮度减少10% */
  background-color: darken($color, 10%);
}
颜色饱和度​

saturate增加饱和度，desaturate减少饱和度：

$color:#4caf50;

.div1{
  width: 200px;
  height: 200px;
  /* 饱和度增加10% */
  background-color: saturate($color, 10%);
}

.div2{
  width: 200px;
  height: 200px;
  /* 饱和度减少10% */
  background-color: desaturate($color, 10%);
}
颜色色相​

adjust-hue通过调整颜色的色相来创建新颜色：

$color: #4caf50;
/* 色相增加 30 度 */
$new-hue: adjust-hue($color, 30);
混合颜色​

mix可以混合两种颜色：

$color1: #4caf50;
$color2: #2196f3;
/* 混合两种颜色，权重 50% */
$mixed: mix($color1, $color2, 50%);
颜色补充​

complement可以获取补充颜色：

$color: #4caf50;
/* 色相增加 180 度，获取补充颜色 */
$complementary: complement(adjust-hue($color, 180));

嵌套语法​

嵌套语法让开发这在书写CSS的时候节省了很多的代码量：

$color: skyblue;

.container {
  width: 500px;
  height: 500px;

  .div1 {
    color: $color;
    width: 200px;
    height: 200px;
  }

  p {
    width: 400px;
    background-color: red;
  }
}

选择器结合​

此外，还支持一个&符号，表示和父选择器结合，如果不写&，那么最终编译的时候，会编译为后代选择器：

a {
  color: yellow;
  &:hover {
    color: green;
  }
  &:active {
    color: red;
  }
}
/**
a {
  color: yellow;
}
a:hover {
  color: green;
}
a:active {
  color: red;
}
*/

属性嵌套​

Sass中还允许属性的嵌套：

.test {
  font: {
    family: "Helvetica Neue";
    size: 20px;
    weight: bold;
  }
}
/**
.test {
  font-family: "Helvetica Neue";
  font-size: 20px;
  font-weight: bold;
}
*/

插值语法​

Sass可通过#{ }进行插值，也就是在#{ }可以放入变量，可以解析#{ }变量对应的值，类似于ES6里面的模板字符串：

$name: foo;
$attr: border;

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

插值语法可以避免Sass去运行运算表达式calc，直接编译为带有运算表达式的原生CSS代码：

.div1 {
  padding: calc($base-font-size * $line-height * 2);
}

.div2 {
  padding: calc(#{$base-font-size * $line-height} * 2);
}
/**
.div1 {
  padding: 48px;
}

.div2 {
  padding: calc(24px * 2);
}
*/

插值在在注释里面也可以使用：

$author: tom;
/*!
  Author:#{$author}
*/

/*!
  Author:tom
*/

运算​

calc​

该方法是 CSS3 提供的一个方法，用于做属性值的计算：

.container {
  width: 80%;
  padding: 0 20px;

  .element {
    width: calc(100% - 40px);
  }

  .element2{
    width: calc(100px - 40px);
  }
}

在进行编译时，如果单位相同，会直接运行calc运算表达式，得到计算出来的最终值，但是如果单位不相同，会保留calc运算表达式。

max/min​

min是在一组数据里面找出最小值，max是在一组数据里面找到最大值：

$width1: 500px;
$width2: 600px;

.element{
  width: min($width1, $width2);
}

clamp​

clamp也是CSS3提供的函数，语法为：

clamp(min, value, max)

min代表下限，max代表上限，value是需要限制的值，clamp的作用就是将value限制在min和max之间：

  • 如果value小于了min那么就取min作为值，
  • 如果vlaue大于了 max，那么就取max作为值。
  • 如果value在min和max之间，那么就返回value值本身。
$min-font-size: 16px;
$max-font-size: 24px;

body {
  font-size: clamp($min-font-size, 1.25vw + 1rem, $max-font-size);
}
Last updated on