在学习阮一峰的SASS用法指南和网上一些视频,总结sass常用语法
基本用法
首先要下载Ruby语言(略)
- 将scss生成css文件,在命令行输入
//直接生成压缩后的css文件
sass --style compressed new.scss new.min.css
//监视某个文件下的scss改变就会直接生成css
sass --watch new.scss:new.css
sass --watch new.scss:new.css --style compressed//compressed压缩版本
变量
- 生成变量并且赋值,和less的差别是这个使用$符定义变量
$blue: #1875e7;
body {
color: $blue;
}
$blue-sa: #1875e7;
body {
color: $blue_sa;//获取变量的连接符可以是-或者_是一样的
div {//支持变量的嵌套和less运用差不多
margin: 0;
padding: 0;
}
}
- 允许变量拼接和使用算式
$side : left;//允许变量拼接
.rounded {
border-#{$side}-radius: 5px;
}
//允许变量使用算式
body {
margin: (14px/2);
top: 50px + 100px;
right: $var * 10%;
}
//选择器,less也可以
.rounded {
border-#{$side}-radius: 5px;
& &-a {
background: #000;
}
}
//生成下面的,两个等价
.aa .aa-a{background:#000}
- 多个同样前缀的属性可嵌套,less不行
//注释内容是原先的,scss简化后是下面的
.aa {
/* font-size: 1px;
font-family: Arial, Helvetica, sans-serif;
font-weight: 700; */
font: {
size: 1px;
family: Arial, "Helvetica Neue", Helvetica, sans-serif;
weight: 700;
}
margin: 0;
}
.aa {
/* border: 1px solid #1875e7;
border-left: 1px;
border-right: 1px; */
border: 1px solid #1875e7 {
right: 0;
left: 0;
}
}
@mixin函数
@mixin函数,定义公共调用的样式
/*@mixin函数*/
@mixin alert{
...
a{
..
}/*调用时相当于 .xxx a{}*/
}
.aa{
@include alert;/*调用*/
}
/*定义参数,指定默认值*/
@mixin alert($color:0px, $text) {
color: $color;
font-size: $text;
a {
margin: 0;
} /*调用时相当于 .xxx a{}*/
}
.aa {
@include alert($text: '14px', $color: '#1875e7');
/*调用时可以换顺序,会根据传递的值来赋值,但是记得写参数名*/
}
自定义函数
$color:(light:#fff, dark:#000);/*定义一个map值*/
@function double($key) {
@return map-get($color, $key);
}
.b {
background: double(light);/*=> background:#fff,调用函数*/
}
@function double($n) {
@return $n * 2;
}
#sidebar {
width: double(5px);
}
常用list列表函数
padding: 0 20px 10px 30px;/*这样的内容就是list*/
/*list函数*/
join($list1, $list2, [$separator]);/*:将两个列给连接在一起,变成一个列表;*/
append($list1, $val, [$separator]);/*:将某个值放在列表的最后;*/
继承@extend
/*
继承 @extend
*/
.a {
padding: 0;
a {
font-size: 0;
}
}
.b {
@extend .a;
margin: 0;
}
//继承选择器,会把父类选择器的后代标签属性也继承给自身的后代标签
.a,.b{padding:0}.a a,.b a{font-size:0}.b{margin:0}
注释
- 多行注释,压缩版本会没有//
- 单行注释,编译后不会有 /**/
- 强制注释,会存在,一般用于版权等,/*! */
参考阮一峰的网络日志的SASS用法指南,记录了一些自己觉得常用的语法,有错误的话欢迎指出