个人参照官网做的学习笔记, 详情见官网
vue项目中 sass 的安装
1.变量的声明与使用
$hightlight-color: blue;
$basic-border: 1px solid black;
1.1 sass的变量如果声明在全局文件中,则可以全局应用;如果只是在单个vue组件中声明的,则只能在当前组件中使用;
<style lang="scss" scoped>
$highlight-color: red;
.merchant-con {
> h1 {
border: 1px solid $highlight-color;
color: $h1-color;
}
}
</style>
1.2 变量名可以是中划线也可以是下划线, 建议使用中划线
$font-size: 20px;
$font_size: 20px;
2.嵌套css 规则
2.1 选择器嵌套使用, 解决重复写选择器的问题
<style lang="scss" scoped>
.merchant-con {
> h1 {
border: 1px solid red;
color: #000;
}
p {
color: green;
}
}
</style>
编译后相当于
.merchant-con > h1 {
border: 1px solid red;
color: #000;
}
.merchant-con p {
color: green;
}
2.2 父选择器的标识符 &;
article a {
color: blue;
&:hover { color: red }
}
相当于
article a { color: blue }
article a:hover { color: red }
2.3 子组合选择器和同层组合选择器：>、+和~;
<style lang="scss" scoped>
$highlight-color: black;
.merchant-con {
> h1 { // 表示merchant-con类名下 直接子元素 h1 标签
border: 1px solid $highlight-color;
color: $h1-color;
}
> h1 + div { // 表示merchant-con类名下 直接子元素 h1 标签 紧跟的一个div 标签你
border: 2px dashed $blue;
@include div-style;
}
> h1 ~ p { // 表示merchant-con类名下 和直接子元素 h1 标签 同层级的所有p标签
border: 4px dotted $blue;
}
}
</style>
3. sass的导入
3.1 可以在main.js 中 直接导入写好的scss文件;如果导入之后出现报错,可能是少装了插件;参考文档
3.2 如果需要导入多个scss 文件,可以在main.js导入的scss文件中,导入其它需要的scss文件;
3.3 导入的文件中,如果声明的变量名或者类名重复, 会存在样式覆盖问题, 只有最后一处声明有效且它会覆盖前边的值
4. 注释
4.1 css 标注格式的注释 如 ''/**/"; 注释的内容在浏览器中是看不到的;
4.2 scss 提供的静默注释 "//"; 以 "//"开头,注释内容直到当前行的末尾; 在浏览器中查看时, 是可以看到开发者写的注释内容
<style lang="scss" scoped>
$highlight-color: black;
.merchant-con {
> h1 {
border: 1px solid $highlight-color; // 注释test
color: $h1-color; /* css 注释 */
}
> h1 + div {
border: 2px dashed $blue;
@include div-style;
}
> h1 ~ p {
border: 4px dotted $blue;
}
}
<style>
示例
5. 混合器
个人理解是对重复css样式的抽取, 简化使用方式
5.1 使用@mixin标识符来定义;
@mixin div-style {
display: inline-block;
width: 500px;
height: 300px;
background: skyblue;
}
5.2 使用@include 来调用已定义的混合器
<style lang="scss" scoped>
$highlight-color: black;
$blue: blue;
@mixin div-style {
display: inline-block;
width: 500px;
height: 300px;
background: skyblue;
}
.merchant-con {
> h1 + div {
border: 2px dashed $blue;
@include div-style;
}
}
</style>
效果图
5.3 混合器中的参数
- 为了使混合器更加的灵活,sass 可以通过给混合器传参的方式, 来定制混合器生成的样式;
<template>
<div class="sass-con">
<h1>sass</h1>
</div>
</template>
<style lang="scss" scoped>
@mixin h1-color($normal, $hover) {
color: $normal;
&:hover {
color: $hover
}
}
.sass-con {
h1 {
@include h1-color($blue, red);
}
}
</style>
- 混合器中的默认参数, 类似于es6中的写法
<style lang="scss" scoped>
@mixin h1-color($normal, $hover: purple) {
color: $normal;
&:hover {
color: $hover;
}
}
.sass-con {
h1 {
@include h1-color(red);
}
}
</style>
6. 选择器的继承
- 通过 @extend 语法可以继承 自定义的所有样式,示例如下:
<template>
<div class="sass-con">
<h1 class="title">sass</h1>
<div class="content-con">
content
</div>
</div>
</template>
<style lang="scss" scoped>
.title {
color: skyblue;
border: 1px dashed #efefef;
background: grey;
height: 60px;
line-height: 60px;
}
.content-con {
@extend .title;
font-size: 20px;
font-weight: bold;
}
</style>
效果图
- 建议不要用后代选择器去继承
网友评论