SASS 是 CSS 预处理器的简称。本文太长,工作中用的最多的就是嵌套混合和集成,可以搜索来跳转!
SASS 编译环境 (SASS 最终需要编译为 CSS 才能运行)
- koala (一款拥有图片界面的编译工具,已停止更新)
-
命令行的方式编译(推荐):
-
先安装Ruby环境 https://rubyinstaller.org/
- 安装路径中不能有中文,和特殊符号
- ruby 一定要添加到环境变量
-
gem install sass
Ruby环境安装后,执行此命令安装 sass 预处理器
-
SASS 文件后缀是.scss
sass中的注释
//这样的注释不会被编译
/*
* 这样的注释会被编译到输出文件中
*/
SASS 基本 .scss 文件的编译命令
sass style.scss style_out.css
SASS --watch
监听指定单文件或文件夹
监听单个文件
sass --watch style.scss:style_out.css
监听文件夹
sass --watch somefolder:somefolder_out
其中somefolder为执行命令目录下的文件夹,输出文件夹somefolder_out名称自定义,没有的话会自动创建
SASS 四种输出模式
- 嵌套输出方式 nested
- 展开输出方式 expanded
- 紧凑输出方式 compact
- 压缩输出方式 compressed
以 style.scss 文件为例
@charset "utf-8";
#box{
width:400px;
height:400px;
border:1px solid gray;
h1{
font-size:22px;
color:red;
}
p{
font-size:18px;
color:green;
}
}
- 嵌套输出方式,命令为
sass style.scss:style.css --style nested
#box {
width: 400px;
height: 400px;
border: 1px solid gray; }
#box h1 {
font-size: 22px;
color: red; }
#box p {
font-size: 18px;
color: green; }/*代码有缩进*/
- 展开输出方式常用,命令为
sass style.scss:style.css --style expanded
#box {
width: 400px;
height: 400px;
border: 1px solid gray;
}
#box h1 {
font-size: 22px;
color: red;
}
#box p {
font-size: 18px;
color: green;
}/*代码没有缩进,和我们平常编写的css格式一样*/
- 紧凑输出方式,命令为
sass style.scss:style.css --style compact
#box { width: 400px; height: 400px; border: 1px solid gray; }
#box h1 { font-size: 22px; color: red; }
#box p { font-size: 18px; color: green; }/*一条规则占一行*/
- 压缩输出方式,命令为
sass style.scss:style.css --style compressed
#box{width:400px;height:400px;border:1px solid gray}#box h1{font-size:22px;color:red}#box p{font-size:18px;color:green}
/*一条规则占一行*/
SASS变量和作用域
e.g.还是在style.scss中
@charset "utf-8";
$width:300px;
$height:200px;
$bgc: red;//变量多值如何调用?
//$bgc: red, pink; background-color:nth($bgc, 1);取第一个变量red
//$bgc: red, pink; background-color:nth($bgc, 2);取第二个变量pink
$color: #666;
$yahei: '"Microsoft YaHei", "微软雅黑"';
$bor:10px solid red;//sass允许多值变量
变量作用域
$color:red;
body {
$color:blue;
//选择器内部的$color变量会把外部的$color覆盖,和js差不多
//同时,选择器内部的变量,外部无法调用
}
SASS 嵌套语法
- 选择器嵌套
- 属性嵌套(了解即可,用途不大)
- 跳出嵌套,@at-root 既然要跳出,直接写成全局样式也可以的,所以这应该是特殊情况下使用的!
嵌套是SASS里面最好用的东西,我们可以按照DOM结构的层级关系来写css样式
//选择器嵌套
body {
p {
font-size: 16px;
}
}
//属性嵌套加 在属性前缀加冒号 如font:
//类似像font-size:16px;font-color:#ccc;font-style:normal;font-weight:bold;可以写成
.box {
font: {
size: 16px;
color: #ccc;
style: normal;
weight: bold;
}
}
//单个选择器跳出
.parent-2 {
color:#f00;
@at-root .child {
width:200px;
}
}
//多个选择器跳出
.parent-3 {
background:#f00;
@at-root {
.child1 {
width:300px;
}
.child2 {
width:400px;
}
}
}
//其实@at-root是有一个默认值@at-root(without:rule)
//除此之外,它还有四个值
//1、all(表示所有)
//2、rule(表示常规css)
//3、media(表示media)
//4、support(表示support,因为@support目前还无法广泛使用,所以在此不表示)。
@at-root (without: …)和@at-root (with: …)
/*跳出父级元素嵌套*/
@media print {
.parent1{
color:#f00;
@at-root .child1 {
width:200px;
}
}
}
/*跳出media嵌套,父级有效*/
@media print {
.parent2{
color:#f00;
@at-root (without: media) {
.child2 {
width:200px;
}
}
}
}
/*跳出media和父级*/
@media print {
.parent3{
color:#f00;
@at-root (without: all) {
.child3 {
width:200px;
}
}
}
}
css结果是
@charset "UTF-8";
/*跳出父级元素嵌套*/
@media print {
.parent1 {
color: #f00;
}
.child1 {
width: 200px;
}
}
/*跳出media嵌套,父级有效*/
@media print {
.parent2 {
color: #f00;
}
}
.child2 {
width: 200px;
}
/*跳出media和父级*/
@media print {
.parent3 {
color: #f00;
}
}
.child3 {
width: 200px;
}
@at-root与 & 配合使用
.child{
@at-root .parent &{
color:#f00;
}
}
css输出
.parent .child {
color: #f00;
}
@mixin 声明混合,可理解为js中的函数。
@mixin 和 @include是成对出现的,就像js中的定义函数和调用函数成对出现一样。
//声明混合
@mixin bgc() {
opacity: #f00;
}
//在选择器内可以使用@include调用混合
.demo {
@include bgc();
}
@mixin 混合传参和默认参数
//声明混合,不带参数。正常使用,没毛病
//声明混合,带参数,调用混合时不传参数,编译后的文件会报错
//声明混合,带参数。正常使用,没毛病!
//混合中参数有默认值,调用时候的参数是可选的!
//混合中,形参加三个点的运算符@mixin bgc($bgc...),调用时可以传递多个参数。有点类似js中的展开运行符
//只不过SASS中是将三个点写在后面,js中是写在前面
//声明混合
@mixin bgc($bgc) {
opacity: $bgc;
}
.demo {
@include bgc(#f00);
}
混合中默认参数的写法
//声明混合
@mixin bgc($bgc:#00f) {
opacity: $bgc;
}
//传参时,默认参数不生效,不传参数的时候,默认值生效
.demo {
@include bgc(#f00);
}
if else if 条件判断
$type: audi;
p {
@if $type == benz {
color: red;
} @else if $type == mahindra {
color: blue;
} @else if $type == audi {
color: green;
} @else {
color: black;
}
}
css中输出为
p {
color: green;
}
通过sass的@if,@else if语法,根据传入参数,实现动态输出css样式
// 画三角形@mixin声明
@mixin sj($fx:top,$size:100px,$color:red){
@if ($fx == top) {
border-color: transparent transparent $color transparent;
border-style: dashed dashed solid dashed;
}
@else if($fx == right){
border-color: transparent transparent transparent $color;
border-style: dashed dashed dashed solid;
}
@else if($fx == bottom){
border-color: $color transparent transparent transparent;
border-style: solid dashed dashed dashed;
}
@else if($fx == left){
border-color: transparent $color transparent transparent;
border-style: dashed solid dashed dashed;
}
width: 0px;
height: 0px;
overflow: hidden;
border-width: $size;
}
//mixin的调用
.demo{
@include sj(left);
}
编译后的css
.demo {
border-color: transparent red transparent transparent;
border-style: dashed solid dashed dashed;
width: 0px;
height: 0px;
overflow: hidden;
border-width: 100px; }
SASS 继承 中的 @extend
@extend让你能够在多个选择器中通过继承的方式共享一段样式:
有个问题就是, 如果你不可能用到.fl这个类,而它还是会出现在输出结果中!
占位符选择器% 可以解决这个问题
.fl {
float: left;
}
.box {
@extend .fl
}
//输出的css为
.fl .box {
float: left;
}
占位符选择器%
zoom:1是兼容IE6,7而设置的,后面的属性 IE6 IE7能识别,IE8 IE9……都不能识别;"_"后面的属性,只有IE6能识别,其他版本(IE7 8 9 更高级别)都不能识别
%clearfix {
*zomm: 1;//因为ie6,ie7不能用after或者before伪类
&:after,
&:before {
content: ".";
clear: both;
display: block;
overflow: hidden;
font-size: 0;
height: 0;
}
}
//上面百分号定义的选择器,可以在其它选择器中直接使用,
//而百分号选择器是不会被编译到最后的css中去的
.container {
width; 100px;
height: 100px;
@extend %clearfix
}
字符串插值#{$XXX},这和es6的字符串模板插值${XXX}非常相似
{}插值符号的作用有两个
- 一个是字符串插值
- 另一个是避免运算
$img: '../images/';
.content {
background: url(#{$img}10086.jpg) left top no-repeat;
}
SASS中属性的值可以进行运算,运算符的前后必须要有空格,否则报错
$color: #f00;
//可以写成
$color: #f00 + 100;//rgb(255+100, 0+100, 0+100),这就是它的原理,255加任何值都为255
{}避免运算的例子
$size1 = 12px;
$size2 = 24px;
p {
color: red;
font: 12px / 24px "Microsoft YaHei"
}
//这里表示p元素会显示为12px,行高为24像素 的微软雅黑字体,
//但是当我们用变量的时候
p {
color: red;
font: $size1 / $size2 "Microsoft YaHei"
}
//输出结果是
p {
color: red;
font: 0.5 "Microsoft YaHei";
}
//这里的0.5显然不是我们想要的,可以用插值符号#{}避免运算
p {
color: red;
font: #{$size1} / #{$size2} "Microsoft YaHei"
}
for 、while、each循环
- @for $i from 1 through 10
- @for $i from 1 to 10 这两个for之间唯一 的区别是through可以取到10,而to的语句只能取到9
@for $i from 1 through 10 {
.item#{$i}{
width: 10px * $i
}
}
//输出为
.item1 {width: 10px;}
.item2 {width: 20px;}
...
.item10 {width: 100px;}
while 循环
$a: 5;
@while($a<20) {
.item#{$a} {
width: 20px * $a;
}
$a: $a+1;
}
@each
$icon_name: user, pass, checked,select;
@each $i in $icon_name {
.icon_#{$i} {
width: 10px;
}
}
//输出为
.icon_user { width: 10px; }
.icon_pass { width: 10px; }
.icon_checked { width: 10px; }
.icon_select { width: 10px; }
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。