sass基础

sass变量

1.sass变量是以 $ 开头进行标识
2.任何作为css属性值都可以用作变量值，甚至以空格分割的属性值，例如 $ basic-border: 1px solid black; 还有以逗号为分割的属性值，例如 $ plain-font: “Myriad Pro”、Myriad、“Helvetica Neue”、Helvetica、“Liberation Sans”、Arial和sans-serif; sans-serif;

3.变量作用域，如果变量没有声明在｛｝内则做全局变量皆可使用，否则只能在相应的｛｝内使用

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

//编译后

nav {
  width: 100px;
  color: #F90;
}

4.变量的值也可以作为另一个变量的值，进行赋值

$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
  border: $highlight-border;
}

//编译后

.selected {
  border: 1px solid #F90;
}

5.变量名用中划线还是下划线分隔

$link-color: blue;
a {
  color: $link_color;
}

//编译后

a {
  color: blue;
}

sass支持嵌套

1.选择器嵌套跟less一样
2.sass还支持属性嵌套

nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}

//编译后

nav {
  border: 1px solid #ccc
  border-left: 0px;
  border-right: 0px;
  
}

导入sass文件

1.新建sass文件

$color:#000
.aiqi{
	width:300px;
	height:300px;
	border:1px solid $color;
}

//导入sass
<style lang="scss" scpoed>
	@import '~@/styles/aiqi.scss'
</style>

1.默认变量值(没啥意义)

//加了这个!default后，引入到vue文件中，vue文件如果同样选择器下有不同宽度样式，是按照vue中样式来渲染的，所以没什么意义
$fancybox-width: 400px !default;
.fancybox {
width: $fancybox-width;
}

2.嵌套导入（不经常使用）

新建一个blue-theme.scss文件

aside {
  background: blue;
  color: white;
}

.blue-theme {@import "blue-theme"}

//生成的结果跟你直接在.blue-theme选择器内写_blue-theme.scss文件的内容完全一样。

.blue-theme {
  aside {
    background: blue;
    color: #fff;
  }
}

3 scss文件可导入css

在scss 导入css文件，只需将css文件直接引入即可

新建aiqi1.css文件

.aiqi1{
	width:300px;
	height:300px;
	border:1px solid pink
}

在aiqi.scss文件引入

$color:#000;
$width:400px;
@import '@/styles/aiqi1.css'
.aiqi{
	width:$width;
	height:300px;
	border:1px solid $color 
}

4.静默注释

就是sass提供的一种注释，它跟我们平时的注释一样，代码解析后会被去掉

body {
  color /* 这块注释内容不会出现在生成的css中 */: #333;
}

混合器

混合器是拿来解决重复代码段的复用

1.混合器基础使用

首先用@mixin 进行标识 ，用@include进行引用样式代码段

@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

根据前面两个，最终css代码是这样的

.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

2.混合器中css规则

@mixin no-bullets {
  list-style: none;
  li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px;
  }
}

ul.plain {
  color: #444;
  @include no-bullets;
}

根据上面两段代码，解析后生成的代码是

ul.plain {
  color: #444;
  list-style: none;
}
ul.plain li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0px;
}

3.混合器可传参使用

@mixin jj($border,$solid,$colo,$radius){
	border:$border $solid $colo;
	border-radius:$radius;
}

.aiqi2{
	width:300px;
	height:300px;
	/*也可以这么写*/
	/*@include jj($border:1px,$solid:solid,$colo:#000,$radius:50%)*/
	/*下面这种写法比较规范*/
	@include jj($border:1px,$solid:solid,$colo:#000,$radius:50%)
}

混合传参还可以有默认值

@mixin zz($width,$height:$width){
	width:$width;
	height:$height;
}

.aiqi3{
	border:1px solid #000;
	border-radius:50%;
	@include zz(300px)
}

.aiqi4{
	border:1px solid red;
	border-radius:50%;
	@include zz($width:300px,$height:444px)
}

继承

可以通过extend对之前的样式进行继承

//通过选择器继承继承样式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

占位符选择器%

占位符选择器不会解析为css代码

%sfqy-basic {  // 编译后不会出现在css文件中
  float: left;
  margin-top: 15px;
  width: 10px;
  height: 10px;
}
.sfqy-icon {
  @extend %sfqy-basic;  //  @extend继承
  background-color: #b1b1b1;
}
.sfqy-icon-enable {
  @extend %sfqy-basic;
  background-color: #2edb2e;
}

编译后的css文件

.sfqy-icon,.sfqy-icon-enable{
	float: left;
  	margin-top: 15px;
  	width: 10px;
  	height: 10px;
}
.sfqy-icon{
	background-color:#b1b1b1;
}
.sfqy-icon-enable{
	background-color:#2edb2e;
}

!global将局部变量升级全局变量

.aiqi{
	$width:50px !global;
	width:$width;
}

.aiqi1{
	width:$width;
}

编译后的css文件

.aiqi{
	width:50px;
}

.aiqi1{
	width:50px;
}