Sass系统学习

一、变量$

需要复用的CSS值，比如字体、颜色等，可以使用 $ 将其变成一个变量。

$base-color: #c6538c;
$border-dark: rgba($base-color, 0.88);

.alert {
   
  border: 1px solid $border-dark;
}

在官网文档的”重大变化“中提到：为了提供与纯CSS的最大兼容性，较新版本的 Sass 要求将自定义属性值中的 SassScript 表达式写入插值中。插值也适用于较旧的 Sass 版本，因此建议用于所有样式表。

$accent-color: #fbbc04;


:root {
   
  // Wrong，在最新的版本中将不可用。
  --accent-color-wrong: $accent-color;


  // Good，在所有的Sass版本中可用。
  --accent-color-right: #{
   $accent-color};
}

因为插值会从带引号的字符串中删除引号，所以可能需要将它们包装在 meta.inspect() 函数中以保留它们的引号。

@use "sass:meta";


$font-family-monospace: Menlo, Consolas, "Courier New", monospace;


:root {
   
  --font-family-monospace: #{
   meta.inspect($font-family-monospace)};
}

二、嵌套

	// scss 可以使用变量、可以嵌套。文件扩展名.scss
	$primary-color: #333;
	
	nav {
   
	  color: $primary-color
	  ul {
   
	    margin: 0;
	    padding: 0;
	    list-style: none;
	  }
	
	  li {
    display: inline-block; }
	
	  a {
   
	    display: block;
	    padding: 6px 12px;
	    text-decoration: none;
	  }
	}
	
	
	
	// css 
	nav ul {
   
	  margin: 0;
	  padding: 0;
	  list-style: none;
	}
	nav li {
   
	  display: inline-block;
	}
	nav a {
   
	  display: block;
	  padding: 6px 12px;
	  text-decoration: none;
	}

三、父选择器 &

父选择器 & 是 Sass 发明的一种特殊选择器，在嵌套选择器中用于引用外部选择器。它可以以更复杂的方式来复用外部选择器。

.alert {
   
  // 可用于向外部选择器添加伪类
  &:hover {
   
    font-weight: bold;
  }

  // 可用于在特定上下文中设置外部选择器的样式
  [dir=rtl] & {
   
    margin-left: 0;
    margin-right: 10px;
  }

  // 可用于作为 伪类选择器的参数。
  :not(&) {
   
    opacity: 0.8;
  }
}

四、插值 #{表达式}

用来输出或计算一个表达式的内容。字符串与变量的拼接使用 #{表达式} 。
常用于在写mixins时根据传入的参数创建选择器。

@each $size, $value in variables.$avatar-sizes {
   
    // 根据传入的参数生成选择器
    .thy-avatar-#{
   $size} {
   
        @include mixin.avatarSize($size, $value);
    }
}

五、函数 @function 和 @return

@function 和 @return 结合，用于定义可在 SassScript 表达式中使用的自定义函数，函数最后通过@return返回计算结果。

与所有Sass标识符一样，函数名称将连字符和下划线视为相同。这意味着scale-color和scale_color都指的是相同的功能。

@function pow($base, $exponent) {
   
  $result: 1;
  @for $_ from 1 through $exponent {
   
    $result: $result * $base;
  }
  @return $result;
}

.sidebar {
   
  float: left;
  margin-left: pow(4, 3) * 1px;
}

可选参数：可以通过定义一个默认值来使参数成为可选参数，如果该参数未传递，则将使用该默认值。

@function invert($color, $amount: 100%) {
   
  $inverse: change-color($color, $hue: hue($color) + 180);
  @return mix($inverse, $color, $amount);
}

$primary-color: #036;
.header {
   
  background-color: invert($primary-color, 80%);
}

任意参数：如果@function声明中的最后一个参数以 ... 结尾ÿ