JavaScript-Sass

Sass的基础使用

1.简介

1.1简介

• Sass是世界上最成熟，最稳定，最强大的CSS扩展语言
• Sass是css预编译工具
• 可以更加优雅的书写css
• sass写出来的东西浏览器不认识需要进行转换
• VSCode推荐使用Easy Sass插件
• Sass中可以使用加减乘除，条件分支以及循环语句，可以编写“函数”，实现继承和扩展等

1.2VScode插件安装

1.第一步：搜索“Easy Sass”

2.安装成功后，创建一个index.scss文件。保存可以自动生成两个css文件。

注意：推荐编写Sass的时候使用以scss为扩展名的，方便书写

 

 

2.Sass基础语法

1.基础语法

• $变量名:变量值，例如$width:100px;
• @if，@else指定的是条件分支
• @for $item from 1 to n，循环1~n-1之间的数字
• @for $item from 1 through n，循环1~n之间的数字
• @each $item in $要便利的集合对象
• @mixin 定义一个函数

2.基础语法对应的代码

$color: blue; //定义变量
$width: 100px;

.box {
    background-color: $color;
}

.footer {
    border-bottom: 1px solid $color;
}

// 1.加减乘除的测试
.box2 {
    width: $width;
}

.box3 {
    width: $width*2
}

.box4 {
    width: $width/2;
}

.box5 {
    width: $width*2-50;
}

$isShowTab: true;
$isColor: true;

// 2.分支语句
.tabbar {
    position: fixed;
    left: 0;
    top: 0;
}

// 2.1 if分支-Sass中支支持两个==
@if($isShowTab==true) {
    .tabbar2 {
        position: fixed;
        left: 0;
        top: 0;
        background-color: brown;
    }
}

// 2.2 else分支
@else {
    .tabbar2 {
        position: fixed;
        left: 0;
        top: 0;
        background-color: aqua;

        @if($isColor) {
            color: red($color: #000000);
        }
    }
}

// 3.for循环
/*
注意to是从1，2，3，4没有5
to换成 through ，是1，2，3，4，5
*/
@for $item from 1 to 5 {

    // 选择器中是#()的传递数据的模式
    li:nth-child(#{$item}) {
        position: absolute;
        left: ($item - 1) * 100px;
        top: ($item - 1) * 100px;
    }
}

// 4.forEach的写法
// 4.1先定义一个用于测试的集合
$colors: red, green, blue;

@each $item in $colors {
    // 用于获取索引的值
    $index: index($colors, $item);

    li {
        background-color: $item;
    }
}

// 5.函数
/*
$a指定的是参数
$b: 1，指定的是默认的参数
*/
@mixin test($a, $b: 1) {
    transition: all $a;
    -webkit-transition: all $a;
    -moz-transition: all $a;
}

.test1 {
    // 引入函数
    @include test(1)
}

3.Sass嵌套

3.1嵌套写法

嵌套直接在一换个大括号中直接的编写下一个就行

 1.Scss语句代码

// 1.嵌套写法
div {
    width: 100px;
    height: 100px;

    p {
        width: 50px;
        height: 50px;
    }

    span {
        width: 5px;
        height: 5px;
    }
}

2.产生的css

div {
  width: 100px;
  height: 100px;
}

div p {
  width: 50px;
  height: 50px;
}

div span {
  width: 5px;
  height: 5px;
}

 3.2父子级写法

父子级就是>这种的，只需要在li前面加上一个>就可以

1.Sass代码。

// 2.ul和li父子关系的写法
ul {
    background-color: wheat;

    >li {
        height: 100px;
        width: 100px;
    }
}

2.生成的css。

ul > li {
  height: 100px;
  width: 100px;
}

 3.3伪类写法

写伪类的时候需要写一个&:hover，不写&符号的会被认为不是当前节点对应的伪类

1.sass代码

// 3.伪类
ul {

    >li {
        height: 100px;
        width: 100px;

        // 加上^就是相当于给li加上伪类，不加的话就是给li的子加上
        &:hover {
            background-color: wheat;

        }
    }
}

2.生成的css

ul > li {
  height: 100px;
  width: 100px;
}

ul > li:hover {
  background-color: wheat;
}

4.Sass的继承和导入

公用的可以采用函数的方式也是可以的，采用继承的也是不错的

4.1基本语法

继承就是一些公共的样式被提取出来了，导入就是将另外一个sass文件中的内容导入到另外一个sass文件中。

• 继承@extend
• 导入@import

4.2继承

案例：一个基类，base，其余为了设置不同button的背景色，宽高等一致，所以提取出来一个公共的类。base。

1.基类的代码

// 需要继承的类
.base {
    width: 100px;
    height: 100px;
    outline: auto;
}

2.继承基类的代码

@extend 要导入的Xxx名

// 1.继承
.btn_primary {
    // 继承
    @extend .base;
    background-color: blue;
}

.btn_danger {
    // 继承
    @extend .base;
    background-color: red;
}

.btn_success {
    // 继承
    @extend .base;
    background-color: green;
}

.btn_info {
    // 继承
    @extend .base;
    background-color: gray;
}

4.3导入

导入就是将a.scss文件中的内容导入到b.scss中。

1.a.scss代码

// 需要继承的类
.base {
    width: 100px;
    height: 100px;
    outline: auto;
}

// 1.继承
.btn_primary {
    // 继承
    @extend .base;
    background-color: blue;
}

.btn_danger {
    // 继承
    @extend .base;
    background-color: red;
}

.btn_success {
    // 继承
    @extend .base;
    background-color: green;
}

.btn_info {
    // 继承
    @extend .base;
    background-color: gray;
}

2.b.scss导入a.scss中的内容。

// 3.导入scss
@import "./indx.scss";