SASS概念解析

Posted 2021-12-12 xuxiaoqiangandhm

　　CSS是基础简单的语句组合，避免不了重复和冗长。没有传统编程语言的变量，控制语句等高级特性。所以css编写低效，往往通过查找替换，大量复制来修改或者编写。

　　sass为css提供额外的高级功能，使开发更加方便快捷，更易管理。通过sass来编写代码，通过sass编译成具体的css代码，然后使用。

　　sass语法按照一定规则进行缩进，然后编写有关css的属性。可以在scss中直接编写css，即使不会sass语法特性，css代码也能通过编译，只需保存.scss后缀名即可。

　　使用SASS：

　　　　SASS提供四种编译风格的选项：

　　　　　　1.nested：嵌套缩进的CSS代码，它是默认值；

　　　　　　2.expanded：没有缩进的扩展的CSS代码；

　　　　　　3.compact：简洁格式的CSS代码；

　　　　　　4.compressed：压缩后的CSS代码；

　　　　设置项目：

　　　　　　进入项目，命令行输入：sass-style compressed style.scss style.css 设置编码风格，输入sass-watch sass:css监听某个文件或目录，一旦文件改动，就自动生成编译后的版本；html文件只需简单引入css文件即可。

　　sass变量：

　　　　定义方法：$name:value

　　　　使用方法：

　　　　　　1.作为字符串：#{$name}

　　　　　　2.作为属性值：$name

$width:45px;
$i:1;
.main{
    color: greenyellow;
    &.side{
        font-size: $width;
    }
    .side-#{$i}{
        font-size: 50px;
    }
}

　　sass宏：@mixin

　　　　功能：使用宏，可以避免编写重复的代码，依次编写，多次使用

　　　　不带参数宏定义：@mixin name{}

　　　　带参数宏定义：@mixin name($param1,[...]){}

@mixin raius($radius) {
    -webkit-broder-radius:$radius;
    -moz-broder-radius:$radius;
    border-radius: $radius;
}

.main{
    a{
        display: block;
        height: 10px;
        width: 10px;
        background: red;
        font-size: 12px;
        @include raius(5px);
    }
}

　　sass样式嵌套控制：

　　

$width:45px;
$i:1;
$color:#000000;

@mixin raius($radius) {
    -webkit-broder-radius:$radius;
    -moz-broder-radius:$radius;
    border-radius: $radius;
}

.main{
    color: greenyellow;
    &.side{
        font-size: $width;
    }
    .side-#{$i}{
        font-size: 50px;
    }
    a{
        display: block;
        height: 10px;
        width: 10px;
        background: red;
        font-size: 12px;
        @include raius(5px);
        color: darken($color, 10%)
    }
}

sass进阶：

　　sass数据类型：　　

　　sass主要有六种数据类型:数字型(1,2,10px);文本型：单引号，双引号或者不加都可以(”footer“，‘footer’，footer);颜色值类型(red,#000,rgba(255,255,255,0.2));布尔值类型(true,false);值列表:通过空格或者逗号分隔值(1.5em 1em ; 2em Arial );值映射：一个关键词对应一个值(key1:value1,key2:value2)

　　sass变量的作用域：

　　变量声明必须在调用变量的语句上面，这样才能正确的调用变量

　　sass变量没有块级作用域，而是随执行，随覆盖，随调用。调用的前面没有变量的声明，就会报错；有很多变量声明，就会调用离它最近的那个变量值；

$i:1;
.main{
    $i:2;
    .side-#{$i}{
        font-size: 50px;
    }
}

　　sass引用父级：&

　　在嵌套结构中引用父级选择器，这时候可以用&符号代替父级选择器

　　让一切变成字符串：#{}

　　变量能作为属性值来使用，也能用在选择器或者属性上面；需要用#{}将变量变成字符串，这样就可以用在选择器或者属性上面了；

　　sass中的四则运算：暂略

　　深入了解@extend

　　@extend可扩展的选择器：只能扩展单个选择器，可以将多个选择器写进一条@extend中，用逗号间隔

　　

@mixin raius($radius) {
    -webkit-broder-radius:$radius;
    -moz-broder-radius:$radius;
    border-radius: $radius;
}
.font-color{
    color: #fff;
}
.font-s{
    font-size: 24px;
}
.main{
    color: greenyellow;
    &.side{
        font-size: $width;
    }
    .side-#{$i}{
        font-size: 50px;
    }
    a{
        display: block;
        height: 10px;
        width: 10px;
        background: red;
        @include raius(5px);
        @extend .font-color , .font-s;
    }
}

　　　@mixin和@extend的区别：

　　　　@mixin定义的是一个片段，这个片段可以是类似变量的一段文字一条属性，也可以是一整个选择器和内容，也可以是一个选择器的一部分代码。此外还可以传递参数，通过参数生成不容的代码。需要配合@include来配合使用，类似复制的效果，@mixin的内容不会编译输出。@mixin可以带默认参数。

　　　　@extend就是简单的扩展，基于某个选择器，已提高复用程度。

@mixin font($color,$font-size:14px){
    color: $color;
    font-size: $font-size
}
p{@include font(red,20px)}

　　@mixin传递多值参数：需要在后面加...　　表示这个参数可能包含多条属性

　　多值参数还可以用在@include中传值的时候，还可以分解某个变量值

@mixin color($color,$background,$border-c) {
    color:$color;
    background: $background;
    border-color: $border-c
}
$value:red,blue,yellow;
$value-map:(color:red,background:blue,border-c:yellow);
p{@include color($value...)};
a{@include color($value-map...)}

　　向@mixin传递内容

@mixin wrap-nav {
    .wrap{
        @content;
    }
}
@include wrap-nav{
    #nav{
        background: red;
    }
}

　　sass for循环：简单的循环，只能使用数字，每次固定一个步长

@for $i from 5 through 1 {
    .item-#{$i} {
        width:2em*$i;
    }
}

　　sass while循环：while循环可以自定义步长

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

　　sass each循环遍历：遍历一个列表或者映射型的变量，然后循环输出

$list:a,b,c;
@each $anim in list {
    #{$anim}-icon{
        background: url(‘./images/#{$anim}.png‘)
    }
}

　　sass map被称为数据地图，以key:value成对的出现，像一个json数据

　　sass map函数提供了多种方法：

　　　　map-get($map,$key):根据给定的key值返回value

　　　　map-merge($map1,$map2):将两个map合并成一个新的map

　　　　map-remove($map,$key):从map中删除一个key，返回一个新的map

　　　　map-keys($map):返回map中所有的key

　　　　map-values($map):返回map中所有的value

　　　　map-has-key($map):根据指定的key判断map中是否存在对应的value，有返回true，否则false

　　　　keywords($args):返回一个函数参数，这个参数可以动态设置key和value