sass基础知识

sass中的变量

$color: var(--color, red);

.box{
    color: $color;
}

数据类型

数字，1rem、2vh、13、 10px；
字符串，分有引号字符串与无引号字符串，"foo"、 'bar'、baz；
颜色，blue, #04a3f9, rgba(255,0,0,0.5)；
布尔型，true和false；
空值，null是其类型的唯一值。表示缺少值，通常由函数返回以表示缺少结果；
数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em,Helvetica,Arial,sans-serif；
maps，相当于 JavaScript的 object，(key1: value1, key2: value2)；

三元运算符if

.test{
    z-index: if(false, 1, 2);
}

@if与@else

$select: false;

.box{
    @if $select{
        color: red;
    }
    @else{
        color: blue;
    }
}

@while

$value: 5;

@while $value > 0{
    .number#{$value}{
        z-index: $value;
    }
    $value: $value - 1;
}

@for

@for $i from 1 to 4{
    .title#{$i}{
        height: 100px * $i;
    }
}

@each

$sizes: 40px 60px 80px;

@each $size in $sizes {
  .icon-#{$size} {
    font-size: $size;
    height: $size;
    width: $size;
  }
}

编译后

.icon-40px {
  font-size: 40px;
  height: 40px;
  width: 40px;
}

.icon-60px {
  font-size: 60px;
  height: 60px;
  width: 60px;
}

.icon-80px {
  font-size: 80px;
  height: 80px;
  width: 80px;
}

@function

@function qiuHe($number1, $number2){
    @return $number1 + $number2;
}

.test{
    width: qiuHe(210, 200)+'px';
}

@mixin

@mixin theme($color: black){
    background-color: $color;
    color: $color;
}

body{
    @include theme(red);
}

// 编译结果
/*
body {
  background-color: red;
  color: red;
}
*/

@extend

.box1{
    width: 100px;
    height: 100px;
}

.box2{
    @extend .box1;
    color: red;
}

// 编译结果
/*
.box1, .box2 {
  width: 100px;
  height: 100px;
}

.box2 {
  color: red;
}
*/

父选择器&

.container {
    a {
        color: #333;
        &:hover {
             text-decoration: underline;
             color: #f00;
        }
    }
}

编译后

.container a {
    color:#333;
}
.container a:hover {
    text-decoration:underline;
    color:#F00;
}

!default

$content: "First content";
// 如果$content之前没定义就使用如下的默认值
$content: "Second content" !default;
#main {
    content: $content;
}

编译后

#main {
  content: "First content";
}

@at-root

跳出嵌套，在多级嵌套时比较常用

.box{
    width: 100px;
    height: 100px;
    @at-root{
        .contanter{
            color: aquamarine;
        }
        .title{
            font-size: 20px;
            @at-root .red{
                color: red;
                background-color: red;
            }
        }
    }
}

编译后

.box {
  width: 100px;
  height: 100px;
}
.contanter {
  color: aquamarine;
}

.title {
  font-size: 20px;
}
.red {
  color: red;
  background-color: red;
}

@use

多处导入，存在样式重复加载。
因为没有命名空间，为了避免撞名，不敢使用简写的 classname，因此起名总是需要注意。
没有私有函数的概念，样式完全暴露在使用import的地方，这对ui库不够友好。

假如我现在有一个入口scss文件，然后还有一个common文件夹，里面有3个文件

common/_1.scss

$color1: red;

.box1{
    background-color: $color1;
}

common/_2.scss

$color2: yellow;

.box2{
    background-color: $color2;
}

common/_index.scss

@use './1.scss' as a;
@use './2.scss' as b;


body{
    background-color: a.$color1;
    color: b.$color2;
}

入口文件

@use './common/index' as all;

.test{
    width: 100px;
}

编译后的结果

.box1 {
  background-color: red;
}

.box2 {
  background-color: yellow;
}

body {
  background-color: red;
  color: yellow;
}

.test {
  width: 100px;
}

@forward

@forward语句可以引入另一个模块的所有变量、mixins和函数，将它们直接作为当前模块的API暴露出去，不会真的在当前模块增加代码。不同于 @use， @forward不能给变量添加命名空间。

common/_1.scss

$color1: red;

.box1{
    background-color: $color1;
}

common/_2.scss

$color2: yellow;

.box2{
    background-color: $color2;
}

common/_index.scss

@forward './1';
@forward './2';

body{
    color: blue;
}

入口文件

@use './common/forword' as all;

.test{
    color: all.$color2;
}

编译后

.box1 {
  background-color: red;
}

.box2 {
  background-color: yellow;
}

body {
  color: blue;
}

.test {
  color: yellow;
}

内置函数

1. color

scss包含很多操作颜色的函数。例如lighten()与 darken()可用于调亮或调暗颜色，opacify()使颜色透明度减少，transparent()使颜色透明度增加，mix()用来混合两种颜色。

.p1 {
    // 让颜色变亮
    color:scale-color(#5c7a29, $lightness: +30%);
}
 
.p2 {
    // 让颜色变暗
    color:scale-color(#5c7a29, $lightness: -15%);
}
 
.p3 {
    // 降低颜色透明度
    color:scale-color(#5c7a29, $alpha: -40%);
}

2. List

$panding: 10px 20px 30px;
.box{
    padding: append($panding, 100px);//追加
    z-index: index($panding, 20px);//返回索引
    padding: join(10px 20px, 30px 40px);//合并
    z-index: length($panding);//返回长度
    width: nth($list: $panding, $n: 3);//返回值
    padding: set-nth($list: $panding, $n: 2, $value: 2em);
}

3. map

@use "sass:map";

$map1: (width: 90%, height: 100%, color: #fff);
$map2: (border: 1px solid red, backgroud-color: #000);
$map3: map.merge($map1, $map2); //合并
$map4: map.remove($map: $map1, $key:width); //删除
$map5: map.set($map1, "width", 20%); //设置


.box{
    width: map.get($map:$map1 , $key:width ); //获取
    content: map.has-key($map: $map1, $key:color ); //是否存在
    content: map.keys($map: $map3); //获取所有键
    content: map.keys($map: $map4);
    content: map.values($map5);
}

4. math

@use 'sass:math';

.test{
    z-index: math.$pi;
    z-index: math.ceil($number: 4.2);//向上取整
    z-index: math.floor($number: 4.2);//向下取整
    width: math.max(10px, 8px, 20px);//返回最大值
    width: math.min(10px, 8px, 20px);//返回最小值
    z-index: math.round($number: 4.4);//四舍五入
    z-index: math.abs($number: -2);//绝对值
    z-index: math.pow(2, 3);//2的3次方
    z-index: math.sqrt(100);//平方根
    z-index: math.random();//随机数
}

5. string

@use 'sass:string';
$str: 'abcdFG';
.test::after{
    content: string.quote(helloWorld);//转为字符串
    z-index: string.index($str, 'c');//返回对应的索引
    z-index: string.length($str);//返回字符串长度
    content: string.slice($str, 2, 3);//截取字符串
    content: string.to-upper-case($str);//转为大写
    content: string.to-lower-case($str);//转为小写
    content: string.unique-id();//随机生成的不带引号的字符串
}

本文采用署名-非商业性使用-相同方式共享 4.0 国际许可协议，转载请注明出处。