什么是css

CSS不是编程语言，CSS基本上是设计师的工具。它没有变量，也没有条件语句，只是一行行单纯的描述，写起来相当费事。

什么是sass

SASS是一种CSS的开发工具，使用编程思想写CSS。

vue中安装sass

npm i -D sass sass-loader

sass使用语法

文件后缀.scss

1、变量

以$开头

$blue : #1875e7;

div {
    color : $blue;
}

如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。

$side : left;

.rounded {
    border-#{$side}-radius: 5px;
}

2、计算

body {
    margin: (14px/2);
    top: 50px + 100px;
    right: $var * 10%;
}

3、嵌套

.hello {
    h1 {
        color: red;
    }

    h3 {
        color: blue;
    }
}

在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类，可以写成：

a {
    &:hover { color: #ffb3ff; }
}

4、注释

//只保留在SASS源文件中，编译后被省略

/*  
    会保留到编译后的文件 
    */

/*! 
    重要注释！
    */

5、继承

.class1 {
    border: 1px solid #ddd;
}

.class2 {
    @extend .class1;
    font-size:120%;
}

6、Mixin

使用@mixin命令，定义一个代码块。

@mixin left {
    float: left;
    margin-left: 10px;
}

使用@include命令，调用这个mixin。

div {
    @include left;
}

mixin的强大之处，在于可以指定参数和缺省值。

@mixin left($value: 10px) {
    float: left;
    margin-right: $value;
}

div {
    @include left(20px);
}

7、颜色函数

lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c

8、插入文件

@import "path/filename.scss";

9、条件语句

@if lightness($color) > 30% {
    background-color: #000;
} @else {
    background-color: #fff;
}

10、for循环

@for $i from 1 to 10 {
    .border-#{$i} {
        border: #{$i}px solid blue;
    }
}

11、while循环

$i: 6;
@while $i > 0 {
    .item-#{$i} { width: 2em * $i; }
    $i: $i - 2;
}

12、each命令，作用与for类似

@each $member in a, b, c, d {
    .#{$member} {
        background-image: url("/image/#{$member}.jpg");
    }
}

13、自定义函数

@function double($n) {
    @return $n * 2;
}

#sidebar {
    width: double(5px);
}
Scroll to Top