初始scss

初始scss

sass是css预处理器，可以理解为类css

sass和scss的关系

scss是sass的升级，简单区分一下，sass的格式是靠缩进表示嵌套关系，scss是花括号

安装

使用

基础用法

变量

使用$开头

$blue：#12768e7；

如果嵌套是在字符串中，必须写在#{}中

boder-#{side}-radius:5px;

嵌套

一般多为标签的嵌套，但属性也可以嵌套

//css写法：
div h1{
    color: red;
}

//scss写法：
div{
    h1{
        color: red;
    } 
}

使用&引用父级元素

//scss写法：
a{
    color: red;
    &:hover{
        color: #ffb3ff;
    } 
}

//编译后
a{
    color: red;
}
a:hover{
    color: #ffb3ff;
} 

计算

top:5px+10px;
//引用变量
right:$var * 10%;

注释

//：单行注释，只会保留在scss文件中
/*...*/：会保留到编译后的文件中
/*!...*/：加了！，表示这是一个重要的注释，即便在压缩模式下编译，注释也会留下

代码重用

继承

允许一个选择器继承另一个选择器

//使用@extend关键字

.class1{
    color: red;
    font-size: 18px;
}
.class2{
    float: left;
    @extend .class1;
}

混合Mixin

使用@mixin定义代码块
@mixin left{
    float: left;
    margin-left: 10px;
}

使用@include，调用@mixin定义的代码块
div{
    @include left;
    color: red;
}

颜色函数

常用的内置颜色函数

• lighten(#cc3,10%)
• darken(#cc3,10%)
• grayscale(#cc3)
• complement(#cc3)

插入文件

使用@import

@import "path/filename.scss";

高级语句

if

使用@if：

p{
    @if 1+1 == 2 {
        color: red;
    }
}

配套@else的用法：

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

循环语句

for

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

while

$i:5;
@while $i > 0 {
    .item-#{$i} {width:2m * $i;}
    $i:$i - 1;
}

each

作用与for类似

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

自定义函数

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

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