SASS详解

SASS详解

变量

必须以$开头， 后面加上!default那就代表这个是当前变量的默认值。

$test-time-color: orange;

div {
	color: $test-time-color;
}

// 编译后
div {
	color: orange;
}

一般适用于通过@import导入的sass库文件，可以定制修改sass库文件中的某些值。

$test-time-color: red;
$test-time-color: orange !default;

div {
	color: $test-time-color;
}

// 编译后
div {
	color: red;
}

嵌套属性

通常情况下，我们这么写：

div {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

在sass中，我们可以这样写：

div {
    border: 1px solid #ccc {
        left: 0px;
        right: 0px;
    }
}

导入SASS文件

sass也有一个@import规则，但不同的是，sass的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求。

文件名为base.scss通过以下方式导入：

@import '@/assets/style/base';

SASS局部文件

sass源文件中可以通过@import指令导入其他sass源文件，被导入的文件就是局部文件，局部文件让sass模块化编写更加容易。

如果一个目录正在被sass程序监测，目录下的所有scss/sass源文件都会被编译，但通常不希望局部文件被编译，因为局部文件是用来被导入到其他文件的。约定以下划线_开头来命名这些文件。

文件名为_base.scss通过以下方式导入(可以不写文件的全名，即省略文件名开头的下划线)：

@import '@/assets/style/base';

混合器

可以通过sass的混合器实现大段样式的重用。

@mixin center {
    display: flex;
    justify-content: center;
    align-items: center;
}
div {
	@include center;
}

// 编译后
div {
	display: flex;
    justify-content: center;
    align-items: center;
}

混合器传参：

@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
}

a {
  @include link-colors(blue, red);
}
// 或者：
a {
    @include link-colors(
      $normal: blue,
      $hover: red
  );
}

// 编译后
a { color: blue; }
a:hover { color: red; }

混合器默认值：

@mixin link-colors(
    $normal,
    $hover: red
  )
{
  color: $normal;
  &:hover { color: $hover; }
}

// 或
// 可以选择传入参数
@mixin link-colors(
    $normal,
    $hover: $normal
  )
{
  color: $normal;
  &:hover { color: $hover; }
}

选择器继承

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


// 编译后
.seriousError {
  border: 3px solid red;
  background-color: #fdd;
}

复杂变量

$linkColor: #b6b6b6 #ddd;

.text {
    color: nth($linkColor, 1);
    &:hover {
        color: nth($linkColor, 2);
    }
}

一般我们都将变量当做属性值来使用， 但是也有极特殊情况下我们会将变量当做class里的类来使用。 这时候， 我们必须以#{$name}的方式来使用变量名.

$name: top !default;

.class-#{$name} {
    border-#{$name}: 1px solid #b6b6b6;
}

多值变量

• list
  多值变量代表的是多维数据的存储方式，换句话说，list相当于js中的数组map相当于js中的对象。 list数据一般用空格分割， 但是也可以用逗号或者小括号分割多个值。

$list: (20px 40px)(30px 20px)(40px 30px);// 相当于多维数组，其他格式同理

$list: 20px 30px 40px 50px 60px;

$list: 20px, 30px, 40px, 0px, 60px;

属性	描述
length($list)	返回list的长度
nth($list, $n)	返回索引的项目
set-nth($list, $n, $value)	设置list中第n个的值
join($list1, $list2,[$separator])	将两个列表链接在一起
append($list1, $val,[$separator])	追加一个值到列表最后
zip($lists…)	将几个列表组合成多维列表
index($list, $value)	返回一个列表中值的位置

• map
map的数据是以键值对形式出现的， 其中value可以是list。 格式为：$map : (key1: value1, key2: value2,key3:value3)。最常用的取值方法就是用map-get($map,$key)进行取值。

属性	描述
map-get($map, $key)	返回key值
map-merge($map1, $map2)	合并两个$map
map-remove($map, $keys…)	删除某个value并返回value值
map-keys($map)	以list形式返回所有$map 的key
map-values($map)	以list形式返回所有$map中的value
map-has-key($map, $key) )	查看当前的$map是否有这个key
keywords($args)	返回一个关键字

@each

语法为：@each $var in <list or map>。其中$var表示变量，而list和map表示list类型数据和map类型数据。
@each用法那和我们js中的for in 用法基本一致，只不过写法不同。 $key 相当于for in 中的 变量， $value 相当于for in中的 obj[i]。

$headers:(h1:20px,h2:30px,h3:40px);

@each $key, $value in $headers{
  #{$key}{
    font-size: $value;
  }
}

$values: 5, 8, 10, 12, 15, 16, 20, 24;
// class的key和对应的属性
$names: (
    p: padding,
    m: margin,
    pt: padding-top,
    pr: padding-right,
    pb: padding-bottom,
    pl: padding-left,
    mt: margin-top,
    mr: margin-right,
    mb: margin-bottom,
    ml: margin-left
);
// 遍历生成
@each $key, $name in $names {
    @each $num in $values {
        .#{$key}#{$num} {
            #{$name}: $num * 1px;
        }
    }
}

使用：

<!-- margin-bottom: 24px;  -->
<div class="mb24"></div>
<!-- padding-top: 10px;  -->
<div class="pt24"></div>

示例：

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


$animal-data: (puma, black, default),(sea-slug, blue, pointer),(egret, white, move);
@each $animal, $color, $cursor in $animal-data {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}


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

颜色函数

$linkColor: red;

.text {
    color: darken($linkColor, 20%);
    background-color: lighten($linkColor, 20%);
}

// 编译后
.text {
	color: #990000;
	background-color: #ff6666;
}

运算

.container{
  width: 100%;
}

.aside{
  width:600px / 960px * 100%;
}