你应该知道的Sass常用方法-CSDN博客

最近在自己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），是可以重用的代码块。

1、使用@mixin命令，定义一个代码块
2、后续可以通过@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中文文档