SASS
安装
ruby

sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby
安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量。

SASS安装

gem install sass
gem install compass

SASS转换CSS

单文件  sass input.scss output.css
多文件  sass --watch assets/sass:dist/sass

sass和scss
sass


Sass 是一门高于 CSS 的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更加强大的功能


扩展名是.sass


书写：

$color:red

div

:color $color

span

color: $color
这两种写法都是可以的，但是注意不能使用{}和；
:color $color  指出该样式是这个元素的
color: $color 普通css写法



scss

Scss 是 Sass 3 引入新的语法，是Sassy CSS的简写，是CSS3语法的超集，也就是说所有有效的CSS3样式也同样适合于Sass
扩展名是.scss
书写

  $color:red;
    div{
  color: $color;
  }
    span{
  color: $color;
	  }


贴近于CSS的写法

Scss就是Sass的升级版
sass的语法
变量的声明


$color:red;
$width:300;
div{
color: $color;
 width: $width+px;
}
span{
color: $color;
}



选择器的嵌套


$color_1:red;
$color_2:blue;
div{
span{color: $color_1}
div{color: $color_2}
}



父选择器
 span{
  color: red;
  &:hover{
    color: blue;
}
   }

这里的&就是span自身这个选择器给它自己加了hover
各种选择器的嵌套
article {
    ~ article { border-top: 1px dashed #ccc }
  
    > section { background: #eee }
    > dl > {
    > dt { color: #333 }
    > dd { color: #555 }
  > }
    > nav + & { margin-top: 0 }
    > }
  

属性嵌套
  nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
}
  }


这是嵌套了属性，border-style被拆分

导入文件


$r:50px;
div{
width: $r;
height: $r;
border-radius: $r/2;
}



上面这个文件起名叫 a.scss


在main.scss中如下写入


@import "a";
div{
span {color: red}
& {@import "a";}
}



这里导入以后就会有把a中的定义内容导入

如果写在标签中，那么导入的内容将会作为这个标签的后代元素样式进入


混合器

普通类型混合器

$r:50px;
@mixin divRadius{
  width: $r;
  height: $r;
  border-radius: $r/2;
}

div{
  @include divRadius;
}



这里的@mixin定义语句块，@include调用语句块


传参混合器


 @mixin divRadius($r){
    width: $r;
    height: $r;
    border-radius: $r/2;
    }

div{
  @include divRadius(50px);
  div{
    @include divRadius(25px)
  }
}





混合器传参的默认值


 @mixin divRadius($r:100px){
    width: $r;
    height: $r;
    border-radius: $r/2;
    }

div{
  @include divRadius;
  div{
    @include divRadius(50px)
  }
}





继承


.div0
  {
  $r:100px;
  width: $r;
  height: $r;
  border-radius: $r/2;
  }

div{
  div{
    @extend .div0;
  }
}



这里使用@extend 继承了类div0的样式

Sass中文网：https://www.sass.hk/
	
在线预览：https://www.sassmeister.com/


1 案例 

1.1 定义变量



1.2 嵌套写法



 

 

 







2 vue集成sass

2.1 在项目中安装sass

λ vue --version
@vue/cli 4.3.1

cnpm install node-sass --save-dev

cnpm install sass-loader --save-dev

"dependencies": {
  "core-js": "^3.6.4",
  "vue": "^2.6.11"
},
"devDependencies": {
  "node-sass": "^4.14.1",
  "sass-loader": "^8.0.2",
  "@vue/cli-plugin-babel": "~4.3.0",
  "@vue/cli-plugin-eslint": "~4.3.0",
  "@vue/cli-service": "~4.3.0",
  "babel-eslint": "^10.1.0",
  "eslint": "^6.7.2",
  "eslint-plugin-vue": "^6.2.2",
  "vue-template-compiler": "^2.6.11"
}

2.2 使用sass



<template>
    <div>
        <div class="box">hello</div>
        <div class="box">world</div>
    </div>
</template>
<style lang="sass">
    $color: pink
    .box
        float: left
        width: 100px
        height: 100px
        margin-left: 20px
        text-align: center
        line-height: 100px
        border: 1px solid red
        background-color: $color
</style>


 


https://www.jianshu.com/p/f6af30ee21a2

  Sass 是对 CSS 的扩展，让 CSS 语言更强大、优雅。 它允许你使用变量、嵌套规则、 mixins、导入等众多功能， 并且完全兼容 CSS 语法。 Sass 有助于保持大型样式表结构良好， 同时也让你能够快速开始小型项目，

  Sass 有两种语法。 第一种被称为 SCSS (Sassy CSS)，是一个 CSS3 语法的扩充版本，这份参考资料使用的就是此语法。第二种比较老的语法成为缩排语法（或者就称为 “Sass”）， 提供了一种更简洁的 CSS 书写方式。 它不使用花括号，而是通过缩排的方式来表达选择符的嵌套层级，而且也不使用分号，而是用换行符来分隔属性。

github地址：https://github.com/San-Shui/sass 

clone远程仓库到本地：


  
git clone https://github.com/San-Shui/sass.git


进入gulp目录


  
cd sass


安装依赖


  
yarn install 或者 npm install 


运行项目


  
gulp


运行之后会生成一个dist目录，dist目录下的文件是通过配置gulp自动生成。



修改src目录下的任何文件都会自动刷新网页



Sass基础—Sass语法：http://www.w3cplus.com/sassguide/syntax.html 

Sass基础—颜色函数: http://www.w3cplus.com/preprocessor/sass-color-function.html 

Sass基础—Sass函数:http://www.w3cplus.com/preprocessor/sass-other-function.html

sass 引入sass
  


 作者 
 克里斯·科耶尔 

 最近更新时间 
 2020年1月9日 

翻译自: https://css-tricks.com/sass-style-guide/
sass 引入sass