vsCode SASS 上手

这是一种更高效简洁的css控制方式

Hbuider安装Sass

[https://www.cnblogs.com/padding1015/p/7133811.html]:

VS Code安装Sass

插件easy sass, live sass compiler(预览版)

配置setting.json

//sass配置
 "liveSassCompile.settings.formats": [{
        "format": "expanded",
        "extensionName": ".css",
        "savePath": "~/../css"
        }],
        "liveSassCompile.settings.generateMap": false,
        //自动建CSS输出路径
        "easysass.targetDir": "~/../css"

项目目录结构(配置好setting后会自动生成css文件夹)

• html(用于存放写好的代码)

• img

• sass

  • name.scss

• name.html

操纵name.html和name.scss即可，(scss会自动生成css内容，命令面板Live sass：watch sass)

使用

  <div class="div1">
    <p>s s </p>
  </div>
  <a href="">链接</a>
  <ul>
    <li><a href="#">LI中的链接</a> </li>
    <li>
      <p>LI中的P</p>
    </li>
    <li>
      <div>
        <p>嵌套的文字</p>
      </div>
    </li>
  </ul>

$定义变量

#拼接

@extend 选择器; 可以继承目标的css

@mixin functionname定义方法

@media screen and (max-width: 1440px) { //用and添加条件 }

@include functionname

&选择自己

@charset "utf-8";
// 用变量替代相应的代码
$sb: skyblue;
$direction: top;
.div1 {
  width: 200px;
  height: 200px;
  border-#{$direction}: 1px solid black;
  background: greenyellow;
}
a {
  color: $sb;
}
//方法可()传参, 形参:后面是默认值
@mixin border_ul($size, $style, $color: red) {
  border: $size $style $color;
}
ul {
  @include border_ul(1px, solid);
  a {
    color: yellow;
  }
  > li:nth-child(2) {
    color: gray;
  }
  > li:nth-child(3) {
    &:hover {
      background: red;
    }
  }
}