sass特性:
- 变量:
$color:red;
- 计算:
margin:50px+100xp;
- 嵌套:
div{ h2{ font-size:20px; } }
- 注释:
标准的CSS注释/* content */
,会保留到编译后的文件。在/*后面加一个感叹号即(/*!content*/
),表示这是”重要注释”。即使是压缩模式编译,也会保留这行注释,通常可以用于声明版权信息。
单行注释// cocntent
,只保留在SASS源文件中,编译后被省略。 - 继承:
.class1{color:red} .class2{@extend .class1;font-size:100px}
- 混合Mixin:
@mixin font($color,$value){
color:$color;
font-size:$value;
}
在某个class中调用:`.class1{ @include font(red,20px)}`
- sass颜色函数
- 引入外部文件:
@import "./style.scss"
**
- SCSS高级用法:
- 支持if,else条件语句
p {
@if 1 + 1 == 2 { border: 1px solid; }
@else {background-color: #fff;}
} - 支持for,while,each命令
//for循环:
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
//while循环:
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
//each命令:
@each $member in a, b, c, d {
.#{$member} {
background-image: url("/image/#{$member}.jpg");
}
}
**
关于SASS切换淘宝镜像源的问题
因为国内网络的问题导致gem源间歇性中断因此我们需要更换gem源。
$ gem sources --add https://gems.ruby-china.org/ --remove https://rubygems.org/
- –remove 删除原gem源
- –add 添加国内淘宝源
查看是否更换成功
打印是否替换成功
gem sources -l
更换成功后打印如下
*** CURRENT SOURCES ***
https://gems.ruby-china.org/
SASS的编译
//编译格式
sass --watch input.scss:output.css --style compact
//编译添加调试map
sass --watch input.scss:output.css --sourcemap
//选择编译格式并添加调试map
sass --watch input.scss:output.css --style expanded --sourcemap
//开启debug信息
sass --watch input.scss:output.css --debug-info
- – input.scss 需要编译的文件
- – output.css 输入编译完成的文件名
- – style表示解析后的css是什么排版格式;
- – sourcemap表示开启sourcemap调试。开启sourcemap调试后,会生成一个后缀名为.css.map文件。
sass内置有四种编译格式:nested、expanded、compact、compressed
未编译:
.main{
width:100px;
height:100px;
&-content{
width:50px;
height:50px;
}
}
编译后:
nested(嵌套) 编译排版格式:
/*命令行内容*/
sass style.scss:style.css --style nested
/*编译完成后的css格式*/
.main{
width:100px;
height:100px;
.main-content{
width:50px;
height:50px;
}
}
expanded(扩展) 编译排版格式:
/*命令行内容*/
sass style.scss:style.css --style expanded
/*编译完成后的css格式*/
.main{
width:100px;
height:100px;
}
.main-content{
width:50px;
height:50px;
}
compact(紧凑) 编译排版格式:
/*命令行内容*/
sass style.scss:style.css --style compact
/*编译完成后的css格式*/
.main{width:100px;height:100px;}
.main-content{width:50px;height:50px;}
compressed (压缩) 编译排版格式:
/*命令行内容*/
sass style.scss:style.css --style compressed
/*编译完成后的css格式*/
.main{width:100px;height:100px;}.main-content{width:50px;height:50px;}
变量的使用
变量声明:(可在规则块内外部声明,但是在内部使用,则仅限规则块内部使用,外部无法使用,变量名的命名可以是$nav-color
也可以是$nav_color
两个是一样的,即变量声明为$nav-color
,使用时为$nav_color
也是可以识别的)
$nav-color: #F90;
nav {
$width: 100px;
width: $width;
color: $nav-color;
}
.box {
border: 1px solid $highlight-color;
}
//编译后
nav {
width: 100px;
color: #F90;
}
.box {
border: 1px solid #F90;
}
父选择器的标识符&
//代码块
$color:red;
article a {
color: $color;
&:hover { color: $color }
}
#content aside {
color: $color;
body.ie & { color: $color }
}
//编译之后
article a { color: red }
article a:hover { color: red }
#content aside {color: red};
body.ie #content aside { color: red }