一、认识sass
SASS(Syntactically Awesome Stylesheet)是一个CSS预处理器,有助于减少CSS的重复, 节省时间。它是更稳定和强大的CSS扩展语言,描述文档的样式干净和结构。 扩展了 CSS3,增加了规则、变量、混入、选择器、继承、内置函数等等特性。生成良好格式化的 CSS 代码,易于组织和维护,Sass 文件后为.Sass和.Scss。
.sass和.scss区别是什么(了解性内容)
简言之可以理解scss是sass的一个升级版本,完全兼容sass之前的功能,又有了些新增能 力。语法形式上有些许不同,最主要的就是sass是靠缩进表示嵌套关系,scss是花括号。
Sass 和 SCSS 其实是同一种东西,我们平时都称之为 Sass,两者之间不同之处有以下
两点:
- 文件扩展名不同,Sass 是以“.sass”后缀为扩展名,而 SCSS 是以“.scss”后缀为扩展 名
- 语法书写方式不同,Sass 是以严格的缩进式语法规则来书写,不带大括号({})和分 号(;),而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似
例如:Sass语法
$font-stack: Helvetica, sans-serif //定义变量
$primary-color: #333 //定义变量
body
font: 100% $font-stack
color: $primary-color
Scss 语法:
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
编译成
body {
font: 100% Helvetica, sans-serif; color: #333;
}
二、Sass安装
Sass的运行依赖Ruby环境。下载Rudy
我们可以使用npm来安装 Sass,这是最常用的安装方式。为了提高下载速度,一般都使用淘宝 NPM 镜像定制的 cnpm。
只需要安装 以下命令就会自动下载安装一个包。
- npm install -g cnpm --registry=https://registry.npm.taobao.org
就可以使用cnpm命令使用这个包,这下就可以通过cnpm安装sass啦
- cnpm install -g sass
三、sass的使用方法
3.1 sass 监听
首先要建立2个文件夹,文件夹名称可以随便起,再启动以下命令监听
- sass --watch sass:css //(sass:css为文件夹名称,可以自设定)
3.2 sass 变量
sass文档代码:
$a:#fff;
$b:#000;
body {
color: $a;
background: $b;
width: 500px;
height: 100px;
}
会在.css文档出现以下执行代码
body {
color: #fff;
background: #000;
width: 500px;
height: 100px;
}
3.3 sass注释
多行注释是在 /* */ 的两个星号中间来编写注释内容,
以 /* 开头,换行的话每一行都以 * 号开头,最终以 */ 结尾,多行注释是会被编译到 CSS 中的
单行注释是在 // 后面跟你的注释内容,直到行尾, 单行注释是不会被编译到 CSS 中的
3.4 sass嵌套和属性
Sass 嵌套 CSS 选择器类似于 HTML 的嵌套规则。 如下我们嵌套一个导航栏的样式
nav{
ul{
margin:0;
padding:0;
list-style:none;
}
li{
display:inline-block;
}
a{
display:block;
padding:6px 12px;
text-decoration:none;
}
}
再如:
.father {
color: red;
.child {
color: green;
&:hover {
color: red;
}
&-item {
color: orange;
}
}
}
在sass的嵌套的过程中,如果需要用到父元素,在 SASS 中通过&符号引用父属性
3.5 sass 插值
插值也就是可以在特定的区域插入一段表达式或者插入一个变量,以此来实现内容动态变
换的需求。
$name: color;
$position: top;
body {
background-#{$name}: red;
border-#{$name}: blue;
padding-#{$position}: 5px;
margin-#{$position}: 10px;
#{$position}: 20px;
}
--------------------------
body {
background-color: red;
border-color: blue;
padding-top: 5px;
margin-top: 10px;
top: 20px;
}
3.6 sass 继承
.a {
width: 10px;
}
.b {
@extend .a;
height: 10px;
color: red;
}
-----------------------------
.a, .b {
width: 10px;
}
.b {
height: 10px;
color: red;
}
3.7 sass 导入
在 CSS 中我们可以通过 @import 来导入一个样式文件,Sass 扩展了 CSS 的 @import 规 则,使得可以导入 CSS 后缀的样式文件和 Scss 后缀的样式文件,并且提供了对 mixin 、函 数和变量的访问。
// _a.scss
. item {
width: 100px;
height: 200px;
}
我将在 style.scss 中导入上面的 _a.scss 文件
// style.scss
.box {
@import '_a.scss';
}