sass安装、常用、vscode自动编译
sass安装
sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。（注:mac下自带Ruby无需在安装Ruby!）
安装完成后需测试安装有没有成功,运行CMD输入以下命令查看：
ruby -v
vscode自动编译sass
1、vscode中安装插件： easy sass
2、Ctrl+Shift+P 打开命令面板
输入settings，选择：
选择>Preferences: Open Settings (JSON)，进行用户自定义设置，加入如下代码
nested：嵌套缩进的 css 代码。
expanded：没有缩进的、扩展的css代码。
compact：简洁格式的 css 代码。
compressed：压缩后的 css 代码。
/** Easy Sass 插件 **/
"easysass.compileAfterSave": true, //保存后启用或禁用自动编译
"easysass.excludeRegex": "^_", //即可排除所有以下划线开头的 scss/sass 文件。
"easysass.formats": [
{
"format": "expanded",
"extension": ".css" //指定导出文件的扩展名和格式。
},
{
"format": "compressed", //压缩
"extension": ".min.css"
}
],
"easysass.targetDir": "css/" // 自定义css输出文件路径 当前目录下
3、新建一个项目，里面就1个index.html 2个文件夹，此时的css目录是空
image.png
4、sass目录新建demo.sass，复制如下代码，直接保存，sass会自动编译到 css目录
.box
color: red
.img
width: 100%;
display: block;
image.png
5、index.html中引入css即可
注意：sass语法是没有大括号的，类似python规范，对于前端人员都不太容易接受，而且容易出错。
32.jpg
vscode vue中html补全
1、先安装HTML Snippets插件。
2、配置setitngs.json
QQ截图20210509144436.png
常用
1、& 父选择器
2、> 所有子元素，不包括孙元素
.box1{
> div{
color:red;
}
}
<div class="box1">1
<div class="box1-1">
1-1 //红
<div class="box1-1-1">1-1-1</div>
</div>
<div class="box1-2">1-2</div> //红
<div class="box1-3">1-3</div> //红
<p>1-p</p>
</div>
3、+ 同级的后一个
.box1-2 {
+ div{
color:blue;
}
}
<div class="box1">1
<div class="box1-1">1-1</div> 不变
<div class="box1-2">1-2</div>
<div class="box1-3">1-3</div> //变蓝
</div>
4、~ 同层的后所有
.box1-2 {
~ div{
color:blue;
}
}
<div class="box1">1
<div class="box1-1">
1-1
<div class="box1-1-1">1-1-1</div>
</div>
<div class="box1-2">1-2</div>
<div class="box1-3">1-3</div> //蓝
<div class="box1-4">1-4</div> //蓝
<p>1-p</p>
</div>
注意：sass并不想强迫任何人一定使用中划线或下划线，所以这两种用法相互兼容
另外：
[ ] 中括号是css中的属性选择器，如：a[target] { color:red;} 为带有 target 属性的 <a> 元素设置样式
@import 导入其他文件
我们创建一个 reset.scss 文件：
html,body,ul,ol {
margin: 0;
padding: 0;
}
然后我们在 standard.scss 文件中使用 @import 指令导入 reset.scss 文件：
standard.scss 文件代码
@import "reset";
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}
将以上代码转换为 CSS 代码，如下所示：
html, body, ul, ol {
margin: 0;
padding: 0;
}
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}
避免重复编译
文件以单下划线开头，如 _colors.scss ，是不会编译成 _colors.css 文件的
常用于@import导入到另一个scss中，避免重复编译成css
import导入时_colors.scss，为：@import "colors"; 不要下划线
注意： wepack打包时@import "colors";方式OK，vscode普通sass是不行的，必须@import "_colors";
@mixin 与 @include
@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。
@include 指令可以将混入（mixin）引入到文档中。
@mixin sexy-border($color, $width: 1in) {
border: {
color: $color;
width: $width;
style: dashed;
}
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2in); }
将以上代码转换为 CSS 代码，如下所示：
p {
border-color: blue;
border-width: 1in;
border-style: dashed;
}
h1 {
border-color: blue;
border-width: 2in;
border-style: dashed;
}
可变参数
有时，不能确定一个混入（mixin）或者一个函数（function）使用多少个参数，这时我们就可以使用 ... 来设置可变参数。
@mixin box-shadow($shadows...) {
-moz-box-shadow: $shadows;
-webkit-box-shadow: $shadows;
box-shadow: $shadows;
}
.shadows {
@include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
将以上代码转换为 CSS 代码，如下所示：
.shadows {
-moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
-webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}
@if @else
@mixin box-shadow($type) {
@if $type == blue {
color: blue;
} @else {
color: red;
}
}
@extend 继承
.button-basic {
border: none;
padding: 15px 30px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
.button-report {
@extend .button-basic;
background-color: red;
}
.button-submit {
@extend .button-basic;
background-color: green;
color: white;
}
将以上代码转换为 CSS 代码，如下所示：
.button-basic, .button-report, .button-submit {
border: none;
padding: 15px 30px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
.button-report {
background-color: red;
}
.button-submit {
background-color: green;
color: white;
}
使用 @extend 后，就不需要指定多个类 class="button-basic button-report" ，只需要设置 class="button-report" 类就好了。
Sass Map
map-keys(map) 返回map里面所有的key(list)
map-values(map) 返回map里面所有的value(list)
map-get(map,key) 返回map里面指定可以的value
map-has-key(map,key) 返回map里面是否含有指定的key
map-merge(map1,map2) 合并map(map)
map-remove(map,keys) 删除指定map中的指定key(map)
keywords(args) 返回一个函数参数组成的map(map)
css里有很多属性可以指定多个值，例如transition、box-shadow等，这个时候我们可以使用map来定义不同的值，然后可以统一使用。例如
/* 使用map定义不同的值 */
$card_transition_map: (
trans1: 200ms transform ease-in-out,
trans2: 400ms background ease-in,
trans3: 600ms color linear
);
/* map-values统一使用 */
.card {
transition: map-values($card_transition_map);
}
编译之后输出
.card {
transition: 200ms transform ease-in-out,
400ms background ease-in,
600ms color linear;
}
主题皮肤 + 循环@each
我们可以使用一个循环来遍历不同的map，达到指定不同皮肤的功效。
$background_color: (
jeremy: #0989cb,
beth: #8666ae,
matt: #02bba7,
ryan: #ff8178
);
$font: (
jeremy: Helvetica,
beth: Verdana,
matt: Times,
ryan: Arial
);
@each $key, $value in $background_color {
.#{$key} {
background: $value;
font-family: map-get($font, $key);
}
}
编译之后输出
.jeremy {
background: #0989cb;
font-family: Helvetica;
}
.beth {
background: #8666ae;
font-family: Verdana;
}
.matt {
background: #02bba7;
font-family: Times;
}
.ryan {
background: #ff8178;
font-family: Arial;
}
