简介 Sass 是对 css 的扩展，让css语言更加强大，优雅。
首先说说如何将.sass转成.css吧
//初始化
npm init
npm install node-sass --save-dev
//添加到package.json中,其中文件样式可自定义
"scripts": {
"css-build": "node-sass --omit-source-map-url sass/mystyles.scss css/mystyles.css",
"css-watch": "npm run css-build -- --watch",
"start": "npm run css-watch"
}
//启动转化
npm run css-build
sas文件的后缀名是.scss或.sass
基础语法
- 变量： Sass使用$符号来声明变量
- $blue:blue;
- 直接使用
div { color : $blue; }在Sass中，变量是有作用域的，类似ES6中的let，sass变量支持块级作用域(花括号{}包裹区域)，也就是有全局变量和局部变量之分
也可以使用 !global 将局部变量转换为全局变量
在sass中，&表示父元素
$a-color: white !default
a
&:hover
color: $a-color
//输出为
a:hover {
color: white; }
当有多级嵌套样式时，&表示它所以祖先元素的拼接
此外，&还可以作为选择器的一部分
$main-color: red
.main
&-content
color: $main-color
//输出为
.main-content {
color: red; }
注释方法：
- 多行注释 /* */
- 单行注释 //
- ！多行注释：/* ! * / 通常用于添加版权信息
区别 ：
- 单行注释不会输出到css文件中，但多行注释会
- 单行注释和多行注释不会输出到压缩css文件中，但！多行注释会
支持运算
举个例子
$num1: 10px
$num2: 20px
.side
font-size: $num1+$num2
height: $num1 - $num2
width: $num1%$num2
输出为：
.side {
font-size: 30px;
height: -10px;
width: 10px; }
特殊的除法,只有下面三种情况才被视为除法运算：
- 如果值被圆括号包裹 （20px / 10px）
- 如果值是算术表达式的一部分：（10px+20px/10px）
- 如果值的一部分是变量或函数的返回值: $width / 10
跟js一样，+还可以连接字符串
color: e + -resize
输出为
color: e-resize;
控制语句
-
@if 类似于js中的if语句，当 @if 的表达式返回值不是false或者null时，条件成立，输出{}内代码；
$num3: 1
.side-bar
@if $num3 > 2
color: red
@else if $num3 > 0
color: black
@else
color: blue
输出为
.side-bar {
color: black;
-
@for 与js类似，但是语法有所不同
- form through
@for $num5 from 1 through 5
.lg-#{$num5}
font-size: 10px * $num5
输出为
.lg-1 {
font-size: 10px; }
.lg-2 {
font-size: 20px; }
.lg-3 {
font-size: 30px; }
.lg-4 {
font-size: 40px; }
.lg-5 {
font-size: 50px; }
- from to
@for $num6 from 0 to 7
.ln-#{$num6}
width: 10px * $num6
输出为
.ln-0 {
width: 0px; }
.ln-1 {
width: 10px; }
.ln-2 {
width: 20px; }
.ln-3 {
width: 30px; }
.ln-4 {
width: 40px; }
.ln-5 {
width: 50px; }
.ln-6 {
width: 60px; }
- @each 功能与@for类似，但使用语法不同
@each $icon in user,nav,person
.#{$icon}-icon
background-image: url('./images/#{$icon}.png')
输出为
.user-icon {
background-image: url("./images/user.png"); }
.nav-icon {
background-image: url("./images/nav.png"); }
.person-icon {
background-image: url("./images/person.png"); }
对于多维数组
@each $font,$size in(large-1,10px),(large-2,20px)
.#{$font}
font-size: $size
输出为
.large-1 {
font-size: 10px; }
.large-2 {
font-size: 20px; }
代码重用
-
MIxin
@mixin clearfix
&:after
content: ""
display: block
height: 0
clear: both
visibility: hidden
.mi
@include clearfix
输出为
.mi:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden; }
-
Mixin 还可以带参数和默认值
@mixin text-font($size,$weight,$color: block)
font:
size: $size
weight: $weight
color: $color
p
@include text-font(10px,blod)
输出为
p {
font-size: 10px;
font-weight: blod;
color: block; }
还可以输出不定长参数呢
@mixin box-shadow($shadows...)
box-shadow: $shadows;
@mixin 可以用 = 表示，而 @include 可以用 + 表示
@include 不仅可以用在块内，还可以直接用在最外层
导入外部文件
import "color.scss"