文章目录

• 官网
• 引言
• 什么是Sass?
• Sass的原理
• 安装
• 编译Sass
• VS Code中使用Sass
• 使用
• • 1.注释
  • 2.使用变量
  • 3.默认变量值
  • 4.CSS
  • • 4-1.嵌套CSS 规则
    • 4-2.群组选择器的嵌套
    • 4-3.子组合选择器和同层组合选择器：> +和~
    • 4-4.嵌套属性
  • 5.混合 @mixin @include
  • 6.继承 @extend
  • 7.引入 @import
  • 8.if判断
  • 9.循环
  • 10.函数 @function

官网

• Sass 中文官网: https://www.sass.hk/

引言

• CSS3之前的CSS都大都是枚举属性样式，而编程语言强大的变量、函数、循环、分支等功能基本都不能在CSS中使用，Sass就是一种增强CSS编程的扩展语言

什么是Sass?

• 世界上最成熟、最稳定、最强大的专业级CSS扩展语言
• Sass是一门高于CSS的语言,它能用来 清晰的、结构化地描述文件样式,有着比普通CSS更加强大的功能.
• 能够提供更简洁、更优雅的语法、同时提供多种功能来创建可维护和管理样式表
• 它是css预处理器
• 其它css预处理器: Sass(scss) 、 LESS 、 Stylus 、 DT CSS 、 Switch CSS 、 Turbine 、 Switch CSS 、 CSS Cacheer

Sass的原理

• Sass本质就是在CSS的语法的基础上增加了自定义的变量、循环、分支、函数、mixin、继承、运算等功能，让CSS编程变得异常强大。
• 当然浏览器是不认识Sass语法。开发人员写完了Sass的语法文件后需要通过工具转成原始的CSS代码。

安装

• Sass基于Ruby语言开发而成，因此安装sass前需要安装Rub https://rubyinstaller.org/downloads/
• 安装完成后需测试安装有没有成功,运行CMD输入以下命令：
  ruby -v (查看版本号)
  gem install sass (安装Sass)
  gem install compass (安装compass)

编译Sass

• 单文件转换命令: sass input.scss output.css
• 单文件监听命令: sass --watch input.scss:output.css
• 如果你有很多的sass文件的目录，你也可以告诉sass监听整个目录：sass --watch app/sass:public/stylesheets

VS Code中使用Sass

1. 现在 VS Code 商店中,搜索 easy sass,然后安装
2. 修改VS Code 的配置, 点击管理,找到文本编辑器,点击 在settings.json中编辑

"easysass.compileAfterSave": true,
  "easysass.formats": [ //nested：嵌套缩进的 css 代码。//expanded：没有缩进的、
  //扩展的css代码。//compact：简洁格式的 css 代码。//compressed：压缩后的 css 代码
        {
            "format": "expanded",
            "extension": ".css"
        },
        {
            "format": "compressed",
            "extension": ".min.css"
        }
    ],
    "easysass.targetDir": "./css" 
    //保存编译时的路径,会在你编译的这个文件当前下的 css 文件中转换 css 文件,需要手动添加这个css 文件夹

使用

1.注释

//       单行注释(静默注释)不会被编译到 css 文件里面
/* */    多行注释 会在 xxx.css 中编译,  min.css 则不会
/*! */   强制注释,在任何版本下都会被保留

2.使用变量

1. 定义变量用 “$” 符替代

$color:yellow;
$a123:green;
$top:top;

2. 特殊变量,比如和css属性混在一起,为了能解析变量,把这个变量用 #{} 包起来

<style>
	div{
		width:100px;
		height:200px;
		border-#{$top}:12px solid green;  // $top 在上面定义变量时定义的
	}
</style>

3. 全局变量

<style>
	p{
		$abc:80px;
	}
	
	div{
		font-size:$abc; // 无法使用
	}
	
	在花括符内定义的变量在其它或括符内访问不到,如果想成为全局变量,
	在定义这个变量的后面加上 !global
	
	p{
		$abc:80px !global;
	}
</style>

3.默认变量值

• 一般情况下，你反复声明一个变量，只有最后一处声明有效且它会覆盖前边的值

$link-color:blue;
$link-color:red;

<style>
	a {
		color: $link-color; // red
	}
</style>

• 使用 !default 默认值

$bb:red !default;// 红色为默认值

<style>
	div {
		width:100px;
		height:100px;
		font-color:$bb; // red
		$bb:blue; // 此时,就把默认颜色改为 蓝色了
		font-color:$bb; // blue
	}
</style>

4.CSS

4-1.嵌套CSS 规则

• css中重复写选择器是非常恼人的。如果要写一大串指向页面中同一块的样式时，往往需要 一遍又一遍地写同 一个ID：

#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

• 现在选择器嵌套

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

• 特殊hover

article a {
  color: blue;
  &:hover { color: red }
}

4-2.群组选择器的嵌套

<style>
	.container {
  		h1, h2, h3 {margin-bottom: .8em}
	}
	
	.container h1, .container h2, .container h3 { 
		margin-bottom: .8em 
	}
	
	nav, aside {
  		a {
  			color: blue
  		}
	}

	nav a, aside a {
		color: blue
	}
</style>

4-3.子组合选择器和同层组合选择器：> +和~

article section { margin: 5px }  // 会选择article下的所有命中section选择器的元素

article > section { border: 1px solid #ccc } // 只会选择article下紧跟着的子元素中命中section选择器的元素。

header + p { font-size: 1.1em } // header元素后紧跟的p元素

article ~ article { border-top: 1px dashed #ccc } // 选择所有跟在article后的同层article元素，不管它们之间隔了多少其他元素

4-4.嵌套属性

nav {
  border: {
  	style: solid;
  	width: 1px;
  	color: #ccc;
  }
}

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

nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

5.混合 @mixin @include

• @mixin 自定义一个名字 {代码块}
• @include 接收@mixin定义的名字 (引用代码)

@mixin border{
	border:1px solid red;
}

#div{
	@include border;  // 在 #div 就可以使用了 @mixin 定义的代码
}

6.继承 @extend

.btn{
	width:100px;
}

.dd{
	@extend .btn;  // 继承了.tbn 里面的属性  width:100px;
	height:50px;
}

7.引入 @import

假如现在这是 a.scss 文件,我们在里面编辑以下代码:
// a.scss
@charset="utf-8";
*{
	padding:0px;
	margin:0px;
}



假如现在在b.scss文件中,我们可以引入 a.scss文件
// b.scss
@import "a.scss"

8.if判断

• 在 if 前加上@符,省略或括符,直接判断

$a = red;

.box{
	@if $a == red{

	}@else if $a ==blue{
		
	}@else{

	}
}

9.循环

1. @for循环 (through包含结束位置 , to不包含结束位置)

$count: 12;
//包含结束位置
@for $i from 1 through $count{
    li:nth-child(#{$i}){
        width: 100px / 12 * $i;
    }
    // $i = 1,2,3,4,5,6,7,8,9,10,11,12
}


//不包含结束位置
@for $i from 1 to $count{
    li:nth-child(#{$i}){
        width: 100px / 12 * $i;
    }
    // $i = 1,2,3,4,5,6,7,8,9,10,11
}

2. @each

$icons: success warning error primary info;
@each $icon in $icons{
    #box li:nth-child(#{$icon}){
        background: url(images/#{$icon}.png) no-repeat;
    }
}

3. @while

$i : 6;
@while $i > 0 {
    li:nth-child(#{$i}){
        font-size: #{$i*16}px;
    }
     $i : $i - 1;
}

10.函数 @function

$colors:(red:red,light:white,dark:black);
@function color($key){
	@if not map-has-key($colors,$key){

		@warn "警告，gulp不会终端"
		@error "会终止监听"
	}
	@return map-get($colors,$key);
}

//函数调用
body{
	background-color:color(red);
}