SASS 用法

sass 用法：
1 $highlight-color: #F90; 空格或者逗号 分割多个属性值,用$作为声明的变量
可在块内和外存在
$nav-color: #F90;
nav {
$width: 100px;
width: $width;
color: $nav-color;
}

变量中可以再次嵌套变量
$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
border: $highlight-border;
}

中划线和下划线 表示意思相同
$link-color: blue;
a {
color: $link_color;
}

<style rel="stylesheet/scss" lang="scss" scoped>

2 可以嵌套，完全可以理解
有不可理解&忽略
:hover { color: red } 鼠标悬浮则文字变红

3 导入外部 css方法，
css : 也有但是会慢，因为用到了才下载，
scss则直接下载

themes/_night-sky.scss
@import "themes/night-sky";
会取消扩展名

4 静默注释方法：
// 这种注释内容不会出现在生成的css文件中
5 有点鸡肋的混合器 mixin，适合于代码重用功能

//在style文件夹下定义一个mixin.scss文件
//定义宽高
@mixin wh($width, $height) {
width: $width;
height: $height;
}

//定义margin的值
@mixin mg($top, $right, $bottom, $left) {
margin-top: $top!important;
margin-left: $left;
margin-bottom: $bottom;
margin-right: $right;

使用方法：
<style lang='scss'>
@import '../../style/mixin.scss';

#work{
.head-index {
@include wh(100%, 100px);
background-color: #fff;
box-shadow: 0 1px 0 0 #ddd;
.head-index-logo span{
text-align: left;
font-size: 40px;
}
}
.work-nav {
@include wh(100%, 300px);
background-color: #ddd;
margin-top: 0!important;
.nav-left {
@include mg(0, 0, 0, 20px);
}
}
}
</style>
使用@include 导入方法，用来传值

 

 

SASS 
坑点: 安装是 sass，扩展名却必须是 scss，否则格式无法识别
使用的变量必须带$,支持了 自动监视


预处理器,变量，嵌套，组合，继承
问题：CSS 难以维护， 重复代码
使用power shell可以打开像 linux一样的终端
安装：
1 github下载
2 npm 安装
3 brew 使用macos 安装


使用npm 安装 
cnpm install -g sass
sass 出现帮助表示安装成功
2 新建html 用vscode
  新建input.scss
$main-color:red;
body{
 margin:0;
 padding:0;
 h1{
  font-size:4rem;
 }
}
3 手动的
sass input.scss output.css
4 监视变化 ，自动的
sass --watch input.scss:output.css
text-decoration:underline，自动变化




5 实时预览插件 live-server
6 实现登录功能
  title 登录
  link xxx。css

  div.card. 登录之后更加精彩
  form input type =email id =email name=email, placeholder 邮箱
  复制 选中三个 密码
  复制 submit value 登录
  注册和扽牢固
  ul li a href 注册，忘记密码


  css
  $main-color:#2cc71
  #second-color:#27a160
  *{
   margin:0;
   padding:0;
   box-sizing:border-box;

  }

  body{
    background: url(../img/bg.jpg) noxxxxx;
    
  }