sass安装

vue create testsass

npm i node-loader

added 2 packages in 6s

npm i sass-loader

added 1 package in 3s

测试

改HelloWorld.vue:

<div id="sass">
     test sass
</div>
<style lang="scss">
  $color: #F90;
  #sass {
    background: $color;
  }
</style>

简单！方便！ nice！ o(*￣▽￣*)ブ

感觉好治愈，如此的丝滑~

sass使用

官方网址：Sass世界上最成熟、稳定和强大的CSS扩展语言 | Sass中文网

简单教程：

包括两种语法格式scss，sass。scss与css差不多，sass格式使用 “缩进” 代替 “花括号” 表示属性属于某个选择器，用 “换行” 代替 “分号” 分隔属性。

sass:


<style lang="sass">
$color: #F90F11;
#sass 
  background: $color;

</style>

很像python……sass基于Ruby,看起来和python无关，估计都借鉴了perl。

ruby和python关系：Python和Ruby

perl官网：The Perl Programming Language - www.perl.org

所以安装sass为啥需要python2,别问我为啥知道的……各种报错解决……

“在 Node.js 中，采用 gyp 构建工具进行构建 C++ 代码，而 GYP 是基于 Python 2 开发的，所以需要 python，而且不支持 3。”

详见：npm安装某些模块为什么需要python？ - 知乎

再次感叹，python好强大。但是还是喜欢php……python的语法比java还不习惯……

数据类型

数字、字符串、颜色、布尔、空值（null）、数组（12em,2em）、maps 相当于js对象

变量

$width: 5em;
$font_1:6px;
$font-2:10px
.div{
    width:$width;    
}
.div .font1{
    font-sise:$font_1;
}
.div .font2{
    font-sise:$font-2;
}

默认变量值：!default，对应属性无值时使用，否则使用设定的值。

运算

支持+-*\，#{}内可以加变量，内容比较多，具体看文档吧~

嵌套

&父轩选择器，>选择子元素，+选择之后紧跟的元素， ~选择同级元素。可以群组嵌套，可以属性嵌套。

$width: 5em;
$font_1:6px;
$font-2:10px;
.div{
    width:$width;  
    .font1{
        font-size:$font_1;
    }
     & .font2{
        font-size:$font-2;
    }
    h1,a{
        color:#123322;
    } 
    border{
        size:10px;
        color:#555112;
    }
}

混合

@mixin 混合器名（参数:默认值）

@mixin rounded-corners($color) {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  color: $color;
}
.notice {
  background-color: green;
  border: 2px solid #00aa00;
  //color: #fff;
  width: 100px;
  height: 100px; 
  @include rounded-corners(#fffccc);
}}

导入

@import 导入并可以嵌套，局部文件以“_”下划线开头不会编译成单独文件，原生css文件通过把后缀名修改为scss后可以导入。

继承

@extend 继承

$radius:100px;
.errormy{
  width: 100px;
  padding:{
    top:1em;
    bottom: 1em;
  };
  color: red;
  background: rgba($color: #000000, $alpha: .3);
  border-radius: $radius;
}
.error{
  color: #123322;
  @extend .errormy;
  border-radius: 10px;
}