scss hover用法
时间: 2023-11-10 07:04:31 浏览: 54
在 SCSS 中,可以使用 `&:hover` 来表示鼠标悬停时的样式。例如:
```scss
.button {
background-color: #ccc;
&:hover {
background-color: #aaa;
}
}
```
上面的代码表示当鼠标悬停在 `.button` 元素上时,背景颜色会变成 `#aaa`。
相关问题:
1. SCSS 中如何使用变量?
2. SCSS 中如何使用嵌套规则?
3. SCSS 中如何使用 mixin?
相关问题
scss中&有多少种用法
在 SCSS 中,& 的用法有以下几种:
1. 连接父选择器和子选择器
如前面所述,可以使用 & 来连接父选择器和子选择器,从而简化样式表的书写。
```scss
.wrapper {
.box {
&:hover {
/* 添加 hover 效果 */
}
}
}
```
2. 嵌套伪类
可以使用 & 来嵌套伪类,比如:
```scss
a {
&:hover {
/* 添加 hover 效果 */
}
&:active {
/* 添加 active 效果 */
}
}
```
3. 嵌套属性选择器
可以使用 & 来嵌套属性选择器,比如:
```scss
input[type="text"] {
&:focus {
/* 添加 focus 效果 */
}
}
```
4. 嵌套同级选择器
可以使用 & 来嵌套同级选择器,比如:
```scss
.button {
&.primary {
/* 添加 primary 效果 */
}
&.danger {
/* 添加 danger 效果 */
}
}
```
5. 嵌套父选择器
可以使用 & 来嵌套父选择器,比如:
```scss
.wrapper {
&-header {
/* 添加 header 效果 */
}
&-content {
/* 添加 content 效果 */
}
}
```
这些都是 & 的常见用法,当然还有其他用法,比如结合 @at-root 或者 @each 等语句使用,但是这些用法相对比较少见。
vue3 setup scss封装下拉框
好的,这里是一个 Vue3 下拉框组件的 SCSS 和 setup 封装示例:
```vue
<template>
<div class="select-wrapper" :class="{ open: isOpen }">
<div class="select-header" @click="toggleOpen">
<span>{{ selected }}</span>
<i class="arrow" :class="{ 'arrow-up': isOpen, 'arrow-down': !isOpen }"></i>
</div>
<div class="select-options">
<div class="option" v-for="(option, index) in options" :key="index" @click="selectOption(option)">
{{ option }}
</div>
</div>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
props: {
options: {
type: Array,
required: true,
},
},
setup(props) {
const isOpen = ref(false);
const selected = ref(props.options[0]);
const toggleOpen = () => {
isOpen.value = !isOpen.value;
};
const selectOption = (option) => {
selected.value = option;
isOpen.value = false;
};
return {
isOpen,
selected,
toggleOpen,
selectOption,
};
},
};
</script>
<style lang="scss" scoped>
.select-wrapper {
position: relative;
width: 200px;
.select-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
border: 1px solid #ccc;
cursor: pointer;
span {
flex: 1;
margin-right: 10px;
}
.arrow {
width: 0;
height: 0;
border-style: solid;
border-width: 5px 4px 0 4px;
}
.arrow-down {
border-color: #999 transparent transparent transparent;
}
.arrow-up {
border-color: transparent transparent #999 transparent;
}
}
.select-options {
position: absolute;
top: 100%;
left: 0;
width: 100%;
z-index: 999;
background-color: #fff;
border: 1px solid #ccc;
border-top: none;
max-height: 200px;
overflow-y: auto;
.option {
padding: 10px;
cursor: pointer;
&:hover {
background-color: #f2f2f2;
}
}
}
&.open {
.select-header {
border-bottom: none;
.arrow {
transform: rotate(180deg);
}
}
.select-options {
border-top: 1px solid #ccc;
}
}
}
</style>
```
这个下拉框组件的 SCSS 样式使用了嵌套规则和变量,使得样式更加清晰和易于维护。在组件内部,使用 `isOpen` 和 `selected` 两个响应式变量来控制下拉框的状态和选中的选项。当用户点击下拉框头部时,调用 `toggleOpen` 方法来切换下拉框的状态;当用户点击下拉框中的某个选项时,调用 `selectOption` 方法来更新选中的选项,并关闭下拉框。
你可以在父组件中使用这个下拉框组件,如下所示:
```vue
<template>
<div>
<Select :options="options" />
</div>
</template>
<script>
import Select from './Select.vue';
export default {
components: {
Select,
},
data() {
return {
options: ['Option 1', 'Option 2', 'Option 3'],
};
},
};
</script>
<style lang="scss">
// 全局样式
$primary-color: #409eff;
button {
color: #fff;
background-color: $primary-color;
border: none;
padding: 10px;
border-radius: 4px;
cursor: pointer;
&:hover {
background-color: darken($primary-color, 10%);
}
}
</style>
```
这个父组件将一个包含三个选项的数组传递给下拉框组件,然后将下拉框组件渲染到页面中。你可以根据需要调整下拉框的样式和功能。