以vue项目为例带你了解Sass基本语法

发布于：2022-12-02 ⋅ 阅读:(398) ⋅ 点赞:(0)

Sass是一种样式语法
很多语法与css用法相同 但一些方面比css更简便 例如可以在样式中定义变量和函数
我们先构建一个vue项目
然后在项目中引入Sass

npm install sass-loader -D

npm install node-sass -D

然后我们来编写一个vue组件

参考代码如下

<template>
  <div id = "app">
     <div class = "text">你好</div>
  </div>
</template>

<script>

export default {
  name: 'App',
    data() {
    return {
      name: ""
    }
  },
  methods:{
    
  },
}
</script>

<style lang="scss" scoped>
#app{
  margin: 0;
  padding: 0;
}
.text{
  color: #0000FF;
}
</style>

首先 我们的 style 标签上声明了两个东西
scoped大家比较熟了 意思就是标签内的样式只作用于当前组件

lang代表使用的语言类型 我们声明为scss
这里面的语法大家也不会陌生 我们声明id为app的元素 内外边距都为0 类名为text的元素字体颜色为蓝色
我们的组件效果为这样
在这里插入图片描述
这就是个css很基本的写法 我们知道css中有一个子集选择器.text在#app下
所以我们.text也可以写成

<style>
#app > .text{
  color: #0000FF;
}
</style>

然而在Sass中我们可以这样写

<style lang="scss" scoped>
#app{
  margin: 0;
  padding: 0;
  .text{
    color: #0000FF;
  }
}
</style>

这就是Sass的第一个方便的写法 可以用花括号嵌套关系 编写子集选择器样式
按元素的嵌套关系写样式 非常的便捷
那么这是就有人想了 那伪类选择器呢？
我们以hover为了 用户鼠标触碰#app 将自己下面的.text变为红色
我们编写代码如下

<style lang="scss" scoped>
#app{
  margin: 0;
  padding: 0;
  .text{
    color: #0000FF;
  }
  &:hover{
    .text{
      color: #FF0000;
    }
  }
}
</style>

然后我们运行项目 然后触碰#app .text就变红了
在这里插入图片描述
如果你想碰.text自己时 他才变红就直接写在.text下就好了

<style lang="scss" scoped>
#app{
  margin: 0;
  padding: 0;
  .text{
    color: #0000FF;
    &:hover{
        color: #FF0000;
    }
  }
}
</style>

也是非常的方便

然后就是通过Sass 将样式定义为变量

<style lang="scss" scoped>
$default: #0000FF;
$touch: #FF0000;
#app{
  margin: 0;
  padding: 0;
  .text{
    color: $default;
    &:hover{
        color: $touch;
    }
  }
}
</style>

界面效果是一样的 不过这里大家不难看出 我们将两个颜色值定义为了变量
Sass中的变量 声明时前面要用美元符号 $ 使用时前面也要加美元符号

还有就是注意代码是从上往下执行这件事哦 你别声明变量的代码还没执行 你就开始用了 那你的程序不出问题才有鬼呢

然后我们来看这样的代码

<template>
  <div id = "app">
     <div class = "text">你好</div>
     <div class = "min">你好</div>
     <div class = "max">你好</div>
  </div>
</template>

#app下有三个元素 如果我想给他们三个一样的样式 那我们可以这样写

<style lang="scss" scoped>
$default: #0000FF;
$touch: #FF0000;
#app{
  margin: 0;
  padding: 0;
  .text,.min,.max{
    color: $default;
    &:hover{
        color: $touch;
    }
  }
}
</style>

我们同一级 如果想给同一个样式 直接用逗号隔开就好了
非常简单

还有就是大家要知道 我们这个嵌套是不限层级的 比如我们这样

<template>
  <div id = "app">
    <div class = "text">
        <div class = "min">
            <div class = "max">你好</div>
        </div>
    </div>
  </div>
</template>

有多少层 你就一直往下套就好了

<style lang="scss" scoped>
$default: #0000FF;
$touch: #FF0000;
#app{
  margin: 0;
  padding: 0;
  .text{
    margin: 0;
    padding: 0;
    .min{
        margin: 0;
        padding: 0;
        .max{
            color: $default;
            &:hover{
                color: $touch;
            }
        }
    }
  }
}
</style>

然后我们来试css中一些比较新的选择器

<template>
  <div id = "app">
    <div class = "text">
    </div>
    <div class = "max">你好</div>
  </div>
</template>

这里 .text和.max是同级的兄弟节点 css中就应该写 .text+.max{样式} Sass中我们可以这样写

<style lang="scss" scoped>
$default: #0000FF;
$touch: #FF0000;
#app{
  margin: 0;
  padding: 0;
  .text{
    margin: 0;
    padding: 0;
    +.max{
        color: $default;
        &:hover{
            color: $touch;
        }
    }
  }
}
</style>

子选择器 将+改成>就行了 其他也是同理

当想给多个子集选择器编写样式时我们来看

<template>
  <div id = "app">
    <div class = "text">
      <div class = "max">你好</div>
      <div class = "min">你好</div>
    </div>
  </div>
</template>

如果这种情况 我想把max和min都用子集选择器给样式 且样式还不一样 我们可以这样写

<style lang="scss" scoped>
$default: #0000FF;
$touch: #FF0000;
#app{
  margin: 0;
  padding: 0;
  .text{
    margin: 0;
    padding: 0;
    > {
      .max{
        color: $default;
        &:hover{
            color: $touch;
        }
      }
      .min{
        color: $touch;
        &:hover{
            color: $default;
        }
      }
    }
  }
}
</style>

在这里插入图片描述

看着也是非常的清晰 写起来更是方便

我们将元素改成这样

<template>
  <div id = "app">
    <div class = "text">
      <div class = "max">你好</div>
    </div>
  </div>
</template>

然后我们如果想给max加一个实线边框 颜色为黑色 宽度为2px
css中可以这样写

<style scoped>
.max{
  color: #0000FF;
  border-width: 2px;
  border-style: solid;
  border-color: #333;
}
</style>

Sass中则可以写成

<style lang="scss" scoped>
.max{
  color: #0000FF;
  border:{
    width: 2px;
    style: solid;
    color: #333;
  }
}
</style>

效果是一样的 但感觉这个并没有变简化哦 因为我还是觉得css自己的简写好用 当然在Sass中也可以用css的简写

<style lang="scss" scoped>
.max{
  color: #0000FF;
  border: 2px solid #333;
}
</style>

我觉得还是这样看着比较简便

然后我们找到项目src项目中的 assets目录 在项目创建一个文件夹 叫sass
在这个文件下创建一个 index.sass文件
index.sass参考代码如下

$default: #0000FF;
$touch: #FF0000;

然后我们将组件的内容改成

<template>
  <div id = "app">
    <div class = "text">
      <div class = "max">你好</div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'App',
    data() {
    return {
      name: ""
    }
  },
  methods:{
    
  },
}
</script>

<style lang="scss" scoped>
@import '@/assets/index.sass';
#app{
  margin: 0;
  padding: 0;
  .text{
    margin: 0;
    padding: 0;
    > {
      .max{
        color: $default;
        border: 2px solid $touch;
      }
    }
  }
}
</style>

组件就会变成这样
在这里插入图片描述
大家会注意到 我们的组件并没有定义 d e f a u l t 和 default和 default和touch 他们定义在index.sass里呢
然后我们组件通过@import引入了index.sass

sass和scss文件格式都是可以的

然后我们改写 index.sass的内容

$default: #0000FF;
$default: #333;
$touch: #FF0000;

我们到界面上去看
在这里插入图片描述
这里我们采用了$default的字体 用了第二个颜色 #333 的黑色
因为代码是从上往下走 下面的把上面的覆盖了

但如果我想上面的优先级最高
我们就可以这样写

$default: #0000FF;
$default: #333 !default;
$touch: #FF0000;

我们再去看界面
在这里插入图片描述
这次我们就采用了第一个 因为第二个声明了 !default
他的意思就是 如果这个变量没有声明过 那就用我的 如果声明过了 那就用原来的
团队开发时你可以都加一个这个 不然你把同事的变量覆盖了 容易挨打

然后我们将index.sass改成

$default: #0000FF;
$default: #333 !default;
$touch: #FF0000;
@mixin max {
    color: $default;
    border: 2px solid $touch;
}

组件的style改成

<style lang="scss" scoped>
@import './assets/index.scss';
#app{
  margin: 0;
  padding: 0;
  .text{
    margin: 0;
    padding: 0;
    > {
      .max{
        @include max;
      }
    }
  }
}
</style>

这里我们将max的样式改成了 一个叫 max的大型插入体定义在index.sass 然后插入在组件的.max中

多元素的嵌套结构 也可以用大型插入体 反正就是把代码放在了其他地方 然后对应插入一下 大部分东西都能插
具体的你们可以自己去试

mixin还可以定义成一个函数
我们将index.sass 代码改成

@mixin text($default,$touch) {
    margin: 0;
    padding: 0;
    > {
      .max{
        color: $default;
        border: 2px solid $touch;
      }
    }
}

这里我们就定义了一个 mixin 函数

然后我们编写组件代码

<template>
  <div id = "app">
    <div class = "text">
      <div class = "max">你好</div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'App',
    data() {
    return {
      name: ""
    }
  },
  methods:{
    
  },
}
</script>

<style lang="scss" scoped>
@import './assets/index.scss';
#app{
  margin: 0;
  padding: 0;
  .text{
   @include text(#0000FF,#FF0000);
  }
}
</style>

这里我们就在text中调用了这个函数 当然 要传参数
两个颜色值
我们的text函数中也有使用这两个接收来的参数

然后就是Sass中可以用js的单行注释 //的语法了 相对也方便一些
当然 原本css的多行注释也是可以用的
在这里插入图片描述

然后我们改一下 .max的样式

.max{
  @extend .text;
  color: $default;
  border: 2px solid $touch;
}

然后我们在页面用F2 看一下他的样式
在这里插入图片描述
这里我们可以看到 #app .text的样式也影响到他了 @extend 选择器 就是继承父级某个选择器的样式

比较常用的方法基本上也就这些

本文含有隐藏内容，请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布