sass预编译器

突然间就不怎么想用博客写笔记了，想改用有道云笔记

sass

 sass是一个css的预编译程序， 是基于 ruby 的
 先要去安装 ruby
 在命令行中， 执行以下两句代码（安装sass的）， 连网操作的

gem install sass
gem install compass

sass安装的文档 https://www.sass.hk/install/

sass的编译工具

Koala： 不支持中文路径的文件夹
把文件夹放到一个英文的路径下面
把项目文件夹拖入到kaola里， 就可以找到sass文件， 选中它， 执行编译，就可以在css文件中， 生成正确的 css文件
在开发过程中， 要全程打开 koala， 每一次保存scss文件，都会自动编译
在开发中， 如果使用sass， 就不要直接去修改css了

kaola在编译sass时的输出方式

 nested： 编译出缩进的css
 expended: 编译出平时我们看到的css的格式（在开发过程中使用）
 compact： 将每个dom元素的css放在一行
 compressed： 输出一个压缩版的css（项目上线之前使用）

Sass的基本使用

// 使用 import 进行合并
@import 'base.scss';
 
/* 支持 css的 注释 会被编译过去 */ 
 
// 也支持这种 注释 不会被编译
 
// 支持原生的 css写法
body{
  background-color: skyblue;
  color:hotpink;
}
 
// 支持嵌套写法
body{
  header{
    background-color: hotpink;
    div{
      color:skyblue;
      a{
        display: block;
      }
    }
  }
 
  // body添加伪元素
  // 如果想要去掉生成的空格
  &::before{
    content:'';
  }
 
  // 子代元素
  >.nav{
    background-color: hotpink;
  }
}
 
// 颜色的使用有多次
// 变量定义 : 赋值
$westFlowerGreen:hotpink;
$minWidth:100px;
 
.show-box{
  background-color: $westFlowerGreen;
  width:$minWidth;
  height: $minWidth*2;
  border-width: $minWidth - 30px;
  transform: translateX(100px);
}

Sass的高级语法

// 定义混入 @mixin 关键字
@mixin setSize($width,$height){
  width:$width;
  height:$height;
}
 
// 使用混入 @include 关键字
body{
  @include setSize(200px,300px);
}
// 一些 样式类似 但是值不同的 代码 抽取出来
 
// 单独封装算法 可以使用
// 函数来实现
// 在关键字的前面需要添加@
@function bigger($size){
  @return $size*2;
}
 
div{
  // 使用的使用 跟 调用js的方法 十分类似
  width:bigger(100px);
  height: bigger(200px);
  font-size:bigger(10px);
}