乐趣区

关于scss:scss用法大全

jiezi

介绍

这是一篇对于 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)
*/
退出移动版