Sass基础

嵌套

.hearder {
  color: $color;
  display: flex;

  .left {
    color: #333;
  }
}

编译后

.hearder {
  color: #333;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.hearder .left {
  color: #333;
}

属性嵌套

当css中出现大量如 font-size font-weight属性时在sass中可以使用属性嵌套

.hearder {
  font: {
    size: 16px;
    weight: bold;
  }

  border: 1px solid #ccc {
    left: 0;
    right: 0;
    radius: 50%;
  }
}

编译后

.hearder {
  font-size: 16px;
  font-weight: bold;
  border: 1px solid #ccc;
  border-left: 0;
  border-right: 0;
  border-radius: 50%;
}

Sass中的 `&` 符号

Sass中的 & 符号表示当前父元素


.hearder {
  color: #333;

  &-left {
    color: #333;
  }
}

编译后

.hearder {
  color: #333;
}

.hearder-left {
  color: #333;
}

定义伪元素

.hearder {
  color: #333;

  //	在每个父级元素之后插入内容
  &::after {
    content: '123';
  }

  //在每个父级元素之前插入内容。
  &::before {
    content: '456';
  }

  //选择每个父级元素的首字母。
  &::first-letter {
    color: #ff0000;
  }

  //选择每个父级元素的首行。
  &::first-line {
    color: #333;
  }

  //选择用户选择的元素部分。
  &::selection {
    color: #333;
  }
}

定义伪类

.hearder {
  &:hover {
    color: #333;
  }
}

定义变量

Sass使用$符号定义变量，在编译后会被去掉

$color: #333;

.hearder {
  color: $color;
}

编译后

.hearder {
  color: #333;
}

mixin 样式混入

mixin是sass中用名字定义好的样式,你可以在任何地方将样式混入到你的父元素中
在mixin中你还可以给它添加参数(中间用,分隔,参数默认值用:定义),让它使用更加灵活
在使用mixin时,使用@include函数，来实现mixin混入，当然你也可以传递参数、使用插槽
在定义mixin时也可以提供插槽，使用@content表示,将来调用着可以在@include函数中传递插槽内容
如果在mixin中使用了嵌套,mixin也会把嵌套元素混入到父元素中

语法规则

//定义
@mixin 名字 (参数1，参数2:参数默认值){
混入样式
//插槽位置
@content;
}
//使用
.hearder{
@include mixin名字(参数1，参数2){
//插槽内容
};
}

使用

@mixin mixin-alert($fontSize, $fontColor:#333) {
  font-size: $fontSize;
  color: $fontColor;
  @content;

  &-a {
    color: $fontColor;
    @content;
  }
}

.hearder {
  color: #000;

  //使用参数默认值 不传递第二个参数 
  //传递插槽
  &-alert {
    @include mixin-alert(16px) {
      background-color: #fff;
    }
  }

  //两个参数都传递
  //不传递插槽
  &-alert-none {
    @include mixin-alert(16px, #000);
  }
}

编译结果

.hearder {
  color: #000;
}

.hearder-alert {
  font-size: 16px;
  color: #333;
  background-color: #fff;
}

.hearder-alert-a {
  color: #333;
  background-color: #fff;
}

.hearder-alert-none {
  font-size: 16px;
  color: #000;
}

.hearder-alert-none-a {
  color: #000;
}

/*# sourceMappingURL=sass-first.css.map */

`@include`指定形参

上述案列中，在使用@include传递形参时顺序为定义mixin时就固定
如果你在使用@include传递形参时指定传递的形参名称，就不必按照顺序传递

语法规则

@include(形参1名称:形参1值,形参2名称:形参2值);

使用

@mixin mixin-alert($fontSize, $fontColor:#333) {
  font-size: $fontSize;
  color: $fontColor;
}

.hearder {
  color: #000;
  @include mixin-alert($fontColor: #999, $fontSize: 18px,);
}

编译后

.hearder {
  color: #000;
  font-size: 18px;
  color: #999;
}

/*# sourceMappingURL=sass-first.css.map */

继承

功能：可以让一个选择器继承另一个选择器定义的所有样式，包含其子类

.title {
  font-size: 18px;

  .left {
    color: #333;
  }
}

.hearder {
  color: #000;
  @extend .title;
}

编译后

.title, .hearder {
  font-size: 18px;
}

.title .left, .hearder .left {
  color: #333;
}

.hearder {
  color: #000;
}

/*# sourceMappingURL=sass-first.css.map */

注意

使用&-left此方法定义的类名无法继承
示例

.title {
  font-size: 18px;

  &-left {
    color: #333;
  }
}

.hearder {
  color: #000;
  @extend .title;
}

编译后

.title, .hearder {
  font-size: 18px;
}

.title-left {
  color: #333;
}

.hearder {
  color: #000;
}

sass里面本身自带了一个导入文件的功能@import,原始的@import 在每一次使用时都会发起http请求，因为每一次http请求都会消耗性能资源
sass扩展了@import功能，他可以在一个sass文件里面把其他的sass文件包含进来
通常用@import导入的sass文件需要使用下划线开头，使sass知道这个文件是一个partials 也就是项目的一部分，在编译时这些partials都会合并到一个sass文件中
partials可以使css模块化更容易维护
partials在引入时不需要输入下划线和文件拓展名

写法

//_base.scss

* {
  margin: 0;
  padding: 0;
}

//_border.scss
* {
  border: 1px solid #ccc;
}

//主文件
@import 'base';
@import 'border';

body {
  color: #999;
}

编译后

* {
  margin: 0;
  padding: 0;
}

* {
  border: 1px solid #ccc;
}

body {
  color: #999;
}

注释

多行注释（在编译后依然存在）

/*
@import 'base';
@import 'border';

body {
    color: #999;
}
*/

单行注释（编译后不存在）

// @import 'base';
// @import 'border';

// body {
//     color: #999;
// }

在编译后强制保留注释

多行注释后加感叹号

/*!
@import 'base';
@import 'border';

body {
    color: #999;
}
*/

sass里的数据类型

在sass中可以使用type-of()函数来判断数据的类型

body {
  //数字类型
  height: type-of($value: 5); //数字
  height: type-of($value: 5px); //数字
  //字符串类型
  height: type-of($value: hellow); //字符串
  height: type-of($value: "hellow"); //字符串
  //列表类型
  height: type-of($value: 1px solid #ccc); //列表 类似数组
  height: type-of($value: 5px 10px); //列表 类似数组
  //颜色类型
  height: type-of($value: #333); //颜色
  height: type-of($value: red); //颜色
  height: type-of($value: rgb(0, 0, 0)); //颜色
  height: type-of($value: hsl(0, 100%, 100%)); //颜色
}

编译后

body {
  height: number;
  height: number;
  height: string;
  height: string;
  height: list;
  height: list;
  height: color;
  height: color;
  height: color;
  height: color;
}

sass数字运算

body {
  //加减
  //没有单位 编译后也不会出现单位
  height: 3+5; //8
  //一个数值带单位
  height: 3px+5+8; //16px
  //都带单位
  height: 3px+5px; //8px
  //带不同的单位 (无法编译)
  // height: 3px+100em;
  //乘除

  height: 3px*3; //9px
  //px*px 在sass中表示px*px(无法编译)
  // height: (3px * 3px);
  //在除法中需要加括号
  height: (3px/3); //1px
  //在除法时两个单位会进行抵消
  height: (3px/3px); //1
  //混合运算
  //先算乘除再算加减
  height: 3px+2*5; //13px
  //如需改变运算顺序加括号
  height: (3px+2)*5; //25px

}

注意

带不同的单位 (无法编译)

body {
  height: 3px+100em;
}

pxpx 在sass中表示pxpx(无法编译)

body {
  height: (3px * 3px);
}

除法中默认保留小数，如需四舍五入请使用round()函数

body {
  height: (5px/3); //1.6666666667px
}

除法中单位一定要写在第一个数字后

body {
  //无法编译
  height: (10/2px/5);
  height: (10px/2/5); //1px
}

在除法时两个单位会进行抵消

body {
  height: (3px/3px); //1
}

数字函数

绝对值 `abs()`

body {
  //无单位
  height: abs($number: -10+8); //10
  //有单位
  height: abs($number: -10px+8); //2px
}

四舍五入 `round()`

body {
  height: round($number: 3.55555px); //4px
  height: round($number: 3.45555px); //3px
}

向上取整 `ceil()`

body {
  height: ceil($number: 3.15555px); //4px
}

向下取整 `floor()`

body {
  height: floor($number: 3.95555px); //3px
}

获取最小值 `min()`

body {
  height: min(1px, 2px, 5px); //1px
}

获取最大值 `max()`

body {
  height: max(1px, 2px, 5px); //5px
}

scss字符串运算

字符串运算中常见的是加号运算
在加号运算中，带引号的字符串可以加入空格
字符串相乘无意义

body {
  height: ni+hao; //nihao
  height: 'ni'+hao; //"nihao"
  height: 'ni '+hao; //"ni hao"
  height: ni-8080; //ni-8080
  height: 'ni'-8080; //"ni"-8080
  height: ni/8080; // ni/8080
  height: 'ni'/8080; //"ni"/8080
}

scss字符串函数

字符大写 `to-upper-case()`

body {
  height: to-upper-case($string: $str); //"NING HAO"
}

字符小写 `to-lower-case()`

body {
  height: to-lower-case($string: $str); //"ning hao"
}

获取字符串长度 `str-length()`

body {
  height: str-length($string: $str); //8
}

获取字符串中字符第一次出现的位置 `str-index()`

body {
  height: str-index($string: $str, $substring: "n") //1
}

在字符串指定位置插入字符 `str-insert($string,$insert,$index)`

$string 原始字符串
$insert 要插入的字符串值
$index 要插入的字符串的位置索引

body {
  height: str-insert($string: $str, $insert: '.net', $index: 8); //"ning ha.neto"
}

color 颜色函数

hsl、hsla表示颜色

H 色相（0~360）
S 饱和度（0~100%）
L 明度（0~100%）
A 透明度（0~1）

调整颜色色相 `adjust-hue(要调整的颜色，调整的度数)`

$base-color: #ff0000;

body {
  background-color: adjust-hue($base-color, 137deg); //#00ff48
}

调整颜色明度

lighten(要调整的颜色，要给颜色增加的明度)让颜色变得更亮
darken(要调整的颜色，要给颜色降低的明度) 让颜色变得更暗

$base-color: #ff0000;

body {
  background-color: lighten($color: $base-color, $amount: 10); //#ff3333
  background-color: lighten($color: $base-color, $amount: 10%); //#ff3333
  background-color: darken($color: $base-color, $amount: 10%); //#cc0000
}

增加减少颜色的饱和度

saturate(要调整的颜色，要给颜色增加的饱和度)增加可颜色饱和度
desaturate(要调整的颜色，要给颜色减少的饱和度)减少颜色饱和度

$base-color: #ff0000;

body {
  background-color: saturate($color: $base-color, $amount: 50%); //red
  background-color: saturate($color: $base-color, $amount: 50); //red
  background-color: desaturate($color: $base-color, $amount: 50%); //#bf4040
}

增加减少不透明度

opacify(需要更改的颜色，增加的数值（0~1，如超出1则等于1）)增加不透明度
transparentize(需要更改的颜色，减少的数值（0~1，如小于0则等于0）)减少不透明度

$base-color: rgba(0, 0, 0, .5);

body {
  background-color: opacify($color: $base-color, $amount: 0.4); //rgba(0, 0, 0, 0.9)
  background-color: transparentize($color: $base-color, $amount: 0.4); //rgba(0, 0, 0, 0.1)
}

列表类型

在scss中列表类型的值可以使用空格分隔开（如border: 1px solid #ccc ）也可以使用逗号分隔开（如font-family: 'Courier New', Courier, monospace;）
列表中可以包含其他的列表（如padding:5px 10px,5px 0）
列表中也可以使用括号分隔开（如 padding:(5px 10px) (5px 0)）
在编译时不管是使用逗号分隔还是使用括号分隔编译结果都会去掉

列表函数

判断列表长度`length(列表)`

注意

length()函数中列表项不可以使用逗号分隔

body {
  padding: length($list: (10px 0) (5px 0)); //2
  padding: length($list: 1px 2px 3px); //3
  padding: length($list: 1px, 2px, 3px); //编译出错
}

根据列表索引值获取列表项 `nth(列表数组,需要获取的列表项索引值)`

注意

nth()函数中列表项不可以使用逗号分隔

body {
  padding: nth($list: 1px 2px 3px, $n: 2); //2px
  padding: nth($list: 1 2 3, $n: 1); //1
  padding: nth($list: 1, 2, 3, $n: 3); //编译出错
}

根据列表值获取列表项所在的索引 `index(列表，列表项)`

注意

index()函数中列表项不可以使用逗号分隔

body {
  padding: index($list: 1px solid 3px, $value: 3px); //3
  padding: index($list: 1px 2px 3px, $value: 1px); //1
  padding: index($list: 1, 2, 3, $value: 3); //编译出错
}

往列表项最后插入元素 `append(要插入的列表，要插入的列表项，分隔符)`

body {
  padding: append(1px #ccc, solid, auto); //1px #ccc solid
}

合并列表 `join(列表1，列表2,合并列表使用的分隔符)`

分隔符参数

space 空格
auto 自动
comma 逗号

body {
  padding: join(1px #ccc, solid 123); // 1px #ccc solid 123
  padding: join(1px #ccc, solid 123, comma); //1px, #ccc, solid, 123
  padding: join(1px #ccc, solid 123, auto); //1px #ccc solid 123
  padding: join(1px #ccc, solid 123, space); //1px #ccc solid 123
}

map类型（对象）

定义:$map:(key1:value1,key2:value2)

判断map类型的长度 `length(map)`

$color: (light:#fff, dark:#000);

body {
  padding: length($list: $color); //2
}

获取map中key的value `map(map,map的key)`

$color: (light:#fff, dark:#000);

body {
  padding: map-get($map: $color, $key: light); //#fff
}

获取map中所有的key `map-keys(map)`

$color: (light:#fff, dark:#000);

body {
  padding: map-keys($map: $color); //light, dark
}

获取map中所有的values `map-values(map)`

$color: (light:#fff, dark:#000);

body {
  padding: map-values($map: $color); //#fff, #000
}

判断map中是否含有指定key的值，返回布尔值

$color: (light:#fff, dark:#000);

body {
  padding: map-has-key($map: $color, $key: light); //true
  padding: map-has-key($map: $color, $key: red); //false
}

合并两个map `map-merge(map1,map2)`

$color: (light:#fff, dark:#000);
$font: (color:red, size:18px);
$newMap: map-merge($color, $font);

body {
  padding: map-keys($map: $newMap); //light, dark, color, size
}

根据map中的key移除项 `map-remove(map,key1,key2)`

$color: (light:#fff, dark:#000, color:red, size:18px);
$newMap: map-remove($color, light, dark);

body {
  padding: map-keys($map: $newMap); //color, size
}

布尔类型

and 相当于 &&
or 相当于 ||
not 相当于！

body {
  padding: 5px>10px; //false
  padding: 5px>2px; //true
  padding: (5px>2px) and (5px>10px); //false
  padding: (5px>2px) or (5px>10px); //true
  padding: not(5px>2px); //false
  padding: not not(5px>2px); //true
}

interpolation `#{}`

相当于模板字符串123${value}456

$color: #fff;

body-#{$color} {
  padding: 1px; //false
}

编译后

body-#fff {
  padding: 1px;
}

`@if`判断

语法: @if 条件 {
...
}@else if 条件{
...
}@else{
...
}

条件为真

$isSurper: true;

body {
  @if $isSurper {
    color: red;
  }

  font-size: 18px;
}

编译后

body {
  color: red;
  font-size: 18px;
}

条件为假

$isSurper: false;

body {
  @if $isSurper {
    color: red;
  }

  font-size: 18px;
}

编译后

body {
  font-size: 18px;
}

`@for` 循环

语法：

@for $var from <开始值> through/to<结束值>{
...
}

to和through的区别 to会在最后一次循环开始时立即停止(不会包含结束值的那次循环)

$num: 4;

@for $i from 1 through $num {
  p-#{$i} {
    padding: #{$i}px;

}

}

@for $i from 1 to $num {
  m-#{$i} {
    margin: #{$i}px;

}

}

编译后

p-1 {
  padding: 1px;

}

p-2 {
  padding: 2px;

}

p-3 {
  padding: 3px;

}

p-4 {
  padding: 4px;

}

m-1 {
  margin: 1px;

}

m-2 {
  margin: 2px;

}

m-3 {
  margin: 3px;

}

`@each`列表循环

语法：

@each $var in $list{
...
}

$list: succ err info;

@each $item in $list {
  .text-#{$item} {
    background-image: url(#{$item});

}

}

编译后

.text-succ {
  background-image: url(succ);

}

.text-err {
  background-image: url(err);

}

.text-info {
  background-image: url(info);

}

`@while`循环

语法

@while 条件 {
...
}

$num: 4;

@while $num>0 {
  .p-#{$num} {
    padding: #{$num}px;

}

$num: $num - 1 }

编译后

.p-4 {
  padding: 4px;

}

.p-3 {
  padding: 3px;

}

.p-2 {
  padding: 2px;

}

.p-1 {
  padding: 1px;

}

`@function`自定义函数

语法:

@function 名称(参数1，参数2){
...
}

$color: (light:#fff, dark:#000);

@function color($key) {
  @return map-get($color, $key)
}

body {
  color: color(light);
  background-color: color(dark);
}

编译后

body {
  color: #fff;
  background-color: #000;
}

显示警告信息 `@warn '警告信息'`

$color: (light:#fff, dark:#000);

@function color($key) {
  @if not map-has-key($map: $color, $key:$key) {
    @warn '在$color里没有找到#{$key}'
  }

  @return map-get($color, $key)
}

body {
  color: color(light);
  background-color: color(123);
}

Sass基础

ON THIS PAGE