你应该知道的Sass经常使用方法

最近在本身vue的项目中用到Sass，便写下一些经常使用的方法总结和介绍Sass在vue中的配置

像一些Sass是什么的基础概念，在这里我就不提了，只提供干货，相信别的文章关于Sass的描述仍是不少的。

个人项目是用vue-cli脚手架配置的项目

安装Sass

• mac自带ruby环境，能够用经过下列命令查看

ruby -v
复制代码

• 首先输入下列命令：

$ gem install sass
复制代码

若是出现permitted问题一般是权限问题

ERROR:  While executing gem ... (Gem::FilePermissionError)You don't have write permissions for the /Library/Ruby/Gems/2.3.0 directory. 复制代码

那就输入如下命令：

$ sudo gem install sass
$ npm install sass-loader -D
复制代码

若是安装无限等待尝试下面替换RubyGems镜像

$ gem sources --remove https://rubygems.org/
//若是你系统不支持https用http
$ gem sources -a https://ruby.taobao.org/ 
$ gem sources -l
*** CURRENT SOURCES ***
https://ruby.taobao.org# 请确保只有 ruby.taobao.org
$ gem install sass
复制代码

若是出现下面错误

ERROR: While executing gem ... (Errno::EPERM) Operation not permitted - /usr/bin/sass
复制代码

尝试下面方法

$ sudo gem install -n /usr/local/bin sass
复制代码

安装完成尝试查看sass版本

$ sass -v
复制代码

配置

安装完成后在build/webpack.base.conf.js文件的modoles设置内加入如下的配置

module: {
    rules: [
    {
        test: /\.scss$/,
        loaders: ["style", "css", "sass"]
      }
     ]
}
复制代码

使用

而后呢，咱们要使用它了，咱们建立一个vue的文件开始写代码，而后在vue文件的style添加lang

<style lang="scss">
/*  在此处写Sass */
</style>
复制代码

Sass经常使用的用法

（1）变量

SASS容许使用变量，全部变量以$开头。

/* 变量声明 */
$fontStack:    Helvetica, sans-serif;
$primaryColor: #333;

body {
  font-family: $fontStack;
  color: $primaryColor;
}
复制代码

等同于👇css的写法

body {
  font-family: Helvetica, sans-serif;
  color: #333;
}
复制代码

若是变量须要镶嵌在字符串之中，就必须须要写在#{}之中。

$side : left;
#div1 {
    margin-#{left}:10px;
}
复制代码

（2）计算功能

SASS容许在代码中使用算式：

.div2 {
    margin: 10px * 2;
    padding:(14px / 2);
}
复制代码

等同于👇css的写法

.div2 {
    margin: 20px;
    padding: 7px;
}
复制代码

（3）嵌套

SASS容许选择器嵌套。好比:

• 选择器嵌套

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }
}
复制代码

等同于👇css的写法

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}
复制代码

• &的嵌套

在嵌套的代码块内，可使用&引用父元素。好比a:hover伪类，能够写成：

a {
    margin: 10px;
    &:hover {
        color: #000;
    }
}
复制代码

等同于👇css的写法

a {
    margin: 10px;
}
a:hover {
    color: #000;
}
复制代码

• 属性嵌套(不多用，或者说不用，由于这样写更麻烦)

属性也能够嵌套，好比border-color属性，能够写成：

p{
    border: {  //注意，border后面必须加上冒号。
        color: #000;
    }
}

//转化css后
p{
    border-color: #000;
}
复制代码

（4）继承

SASS容许一个选择器，继承另外一个选择器。好比，现有div3：

.div3 {
    margin: 2px;
}

/* .div4继承.div3 */
.div4 {  
    @extend .div3;
    font-size: 10px;
}
复制代码

等同于👇css的写法

.div3, .div4 {
  margin: 2px;
}
.div4 {
  font-size: 10px;
}
复制代码

（5）Mixin

Mixin有点像C语言的宏（macro），是能够重用的代码块。

• 一、使用@mixin命令，定义一个代码块
• 二、后续能够经过@include复用

@mixin p1 {
    float: left;
}

div {
/*使用@include命令，调用这个mixin。*/
    @include p1; 
    top: 10px;
}
复制代码

等同于👇css的写法

div {
  float: left;
  top: 10px;
}
复制代码

mixin的强大之处，在于能够指定参数和缺省值。这样咱们就能够复用一些样式，只须要传递一个参数，就像调用一个函数同样！

• 例子1: 没有默认值

@mixin box-sizing ($sizing) {
    -webkit-box-sizing:$sizing;     
       -moz-box-sizing:$sizing;
            box-sizing:$sizing;
}
.box-border{
    border:1px solid #ccc;
    @include box-sizing(border-box);/*引用*/
}
复制代码

等同于👇css的写法

.box-border {
  border: 1px solid #ccc;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
复制代码

• 例子2:有默认值
  • 没有默认值的参数要放在参数列表的前面。

@mixin p2($val1, $val2:20px) {
/* 若是不加入参数，就用默认参数 */
    float: $val1;
    top: $val2;
}
//使用的时候，根据须要加入参数：
div {
    @include p2(left);
}
复制代码

等同于👇css的写法

div {
  float: left;
  top: 20px;
}
复制代码

（6）导入文件

• @import命令，用来插入外部文件。
• 若是插入的是.css文件，则等同于css的import命令。

@import "path/filename.scss";

@import "foo.css";
复制代码

（7）注释

SASS共有两种注释风格。

• 标准的CSS注释 /* comment */ ，会保留到编译后的文件。
• 单行注释 // comment，只保留在SASS源文件中，编译后被省略。

sass的内容远不止这些，日常使用的话，上面的就够用了,若是看完本博客后也有兴趣继续深刻学习sass能够去看一下官方文档： Sass中文文档