SASS概念解析

Posted xuxiaoqiangandhm

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了SASS概念解析相关的知识,希望对你有一定的参考价值。

  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

以上是关于SASS概念解析的主要内容,如果未能解决你的问题,请参考以下文章

scss Sass片段:响应视频

链接器链接过程及相关概念解析

前端面试题

片段(Java) | 机试题+算法思路+考点+代码解析 2023

学习Sass笔记之概念篇

less与sass的区别点