scss用法大全

Posted 2021-09-14 河畔的风

介绍

这是一篇关于sass的语法大全,欢迎访问我的博客

语法

变量

$color: #fff;
/* 默认变量: */
$color: #fff !default;
$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{
    line-height: $baseLineHeight;
}

嵌套

    nav {
        a {
            color: red;
            header & {
                color:green;
            }
        }
    }
    // 编译后的css代码：
    nav a {
        color: red;
    }

    header nav a {
        color: green;
    }

属性嵌套

    .box {
        border: {
            top: 1px solid red;
            bottom: 1px solid green;
        }
    }
    编译后的css代码：
    .box {
        border-top: 1px solid red;
        border-bottom: 1px solid green;
    }

声明混合宏（复用的公共样式）

@mixin border-radius($radius: 5px){
    -webkit-border-radius: $radius;
    border-radius: $radius;
}
@mixin box-shadow($shadow...) {
    /* @if @else 用法 */
    @if length($shadow) >= 1 {
        @include prefixer(box-shaow, $shadow);
    } @else {
        $shadow: 0 0 4px rgba(0, 0, 0, .3)
        @include prefixer(box-shaow, $shadow);
    }
}

调用混合宏

button {
    @include border-radius(3px);
}

扩展和继承

.btn {
    border: 1px solid #ccc;
    padding: 6px 10px;
    font-size: 14px;
}
.btn-primary {
    background-color: #f36;
    color: #fff;
    @extend .btn;
}

[sass]占位符%

编译出来的代码会将相同的代码合并在一起

%mt5{
    margin-top: 5px;
}
.btn {
  @extend %mt5;
}
.block {
  @extend %mt5;
}
//   编译后的css代码：
.btn, .block {
    margin-top: 5px;
}

其他(插值: #{}, 逻辑运算: 加减乘除)

$col-width: 60px;
$col-gap: 20px;

/* for循环
*@for $i from <start> through <end>
*@for $i from <start> to <end>
*through 表示包括 end 这个数，而 to 则不包括 end 这个数。
*/
@for $i from 1 through 12 {
    .col-#{$i}{
        width: ($col-width + $col-gap) * $i;
    }
}


/*列表 用()表示一组列表*/
$properties: (margin, padding);
@mixin set-value($side, $value) {
    /* each 遍历列表 */
    @each $prop in $properties {
        #{$prop}-#{$side}: $value;
    }
}
.login-box {
    @include set-value(top, 14px);
}

@mixin e($element, $content) {
    background: \'yellow\';
    &__#{$element} {
        color: \'black\';
        @each $k, $v in $content {
            #{$k}: $v
        }
    }
}

@include e(\'content\', (\'display\': flex, \'height\': 100))

/* while */
$types: 4;
$type-width: 20px;
@while $types > 0 {
    .while-#{$types} {
        width: $type-width + $types;
    }
    $types: $types - 1;
}

/*颜色可以相加*/
p{
    color: #010203 + #040506 /* #050709; */
}
/*函数*/
@function widthFn($n) {
  @return $n * $twoWidth + ($n - 1) * $oneWidth;
}

/* 特殊函数
* unquote($string) 删除字符串中的引号
* quote($string) 给字符串添加引号
* to-upper-case() 字符串小写字母转换成大写字母
* to-lower-case() 字符串大写字母转换成小写字母
* percentage() 将一个不带单位的数字转换成百分比形式
* round() 函数可以将一个数四舍五入为一个最接近的整数
* ceil() 函数将一个数转换成最接近于自己的整数
* floor() 函数刚好与 ceil() 函数功能相反，其主要将一个数去除其小数部分
* abs() 函数会返回一个数的绝对值
* min()函数功能主要是在多个数之中找到最小的一个 min(1px,2,3px)
* random() 获取一个随机数
*/

/*列表函数
* nth($list,$n) 用来指定列表中某个位置的值
* join() 函数是将两个列表连接合并成一个列表 join (10px) (20px)
* length() 计算列表长度
* append() 用来将某个值插入到列表中，并且处于最末位
* index() 你找到某个值在列表中所处的位置 index(solid red, red)
*/