目录
- 常用命令
- 变量
- 嵌套css规则
- 群组选择器
- 子选择器，相邻，同级选择器
- 属性嵌套
- import导入
- 嵌套导入
- sass注释
- sass乱码解决
常用命令
sass 命令
sass input.scss output.css:将sass文件输出到指定css文件
sass --watch input.scss:output.css:自动监视sass文件更新到指定css文件
sass --watch app/sasss:public/styles:sass监视一个目录里面的sass文件更新到指定目录
sass --update /sass:/css:将一个文件夹的所有scss文件编译到另一个一个目录
sass变量
sass使用“$”声明变量如
$theme-color:#f98;
sass变量有块级作用域，也就是一个{}的变量不能在另一个{}里面使用
#main{
$testColor:red;
color:$testColor;
border:1px solid $testColor;
}
section{
background-color:$testColor;
}
编译时报错
sass引用变量:直接写变量名,sass的一个变量可以被另一个变量引用
$themeColor:blue;
#main{
$testColor:$themeColor;
color:$testColor;
}
//编译后
#main {
color: blue; }
嵌套css规则
sass中可实现css的嵌套。
如我们在编写这样的css时
#main {
font-size:15px;
}
#main .left{
float:left;
}
#main .left ul li {
color:red;
}
在sass中这样表示
#main{
font-size:15px;
.left{
float:left;
ul{
li{
color:red
}
}
}
}
//编译的结果
#main {
font-size: 15px; }
#main .left {
float: left; }
#main .left ul li {
color: red; }
但是上面这种方式不能正常添加伪类 如:hover :active等等
如下
article{
a{
color:red;
:hover{
color:blue
}
}
ul{
li{
float:left
}
}
}
//预期的结果
article a{
color:red;
}
article a:hover{
color:blue
}
........
//实际编译的结果
article a{
color:red;
}
article a :hover{
color:blue
}
可以看到实际编译的结果a与伪类选择器中间多了一个空格 表示的是 a元素里面的子元素经过时变蓝，这与我们最初预料的结果不一致
<article>
<a href="#">测试
<span>324</span>
</a>
</article>
解决办法：给伪类元素加一个“&”表示“&”表示当前设置样式的选择器
article{
a{
color:red;
&:hover{
color:blue
}
}
}
//编译后
article a{
color:red;
}
article a:hover{
color:blue
}
群组选择器
我们在编写css时有时会这样做
.con h1,.con h2 .con h3{
font-weight:400;
}
而在sass中可以简写为
.con{
h1,h2,h3{
font-weight:400
}
}
编译结果与上面一致
还可以这样写
.nav,aside{
a{
color:red
}
}
//编译后
.nav a,aside a{
color:red
}
子选择器，相邻，同级选择器
子选择器 >
相邻选择器 +
同层选择器 ~
article{
~li{
color:red
}
>section{
color:blue
}
+div{
color:orange
}
dl>{
dt{
color:red
}
}
}
//编译后
article ~ li { color: red; }
article > section {color: blue; }
article + div {color: orange; }
article dl > dt {color: red; }
属性嵌套
在编写css时我们有时会这样写
#main{
border-top:1px solid red;
border-left:3px solid blue;
border-bottom:4px solid orange
}
sass中支持属性嵌套，上面的方式可以写出如下
#main{
border:{
top:1px solid red;
left:3px solid blue;
bottom:4px solid orange
}
}
还可以指定例外规则
nav {
border:1px solid red{
left:0;
right:0;
}
}
import导入
sass支持import导入，可以将一个sass文件内容导入到另一个sass文件，导入文件用@import
如
//a.scss
$themeColor:red
//b.css
#main{
color:$theme.color
}
//c.scss
@import "a.scss";
@import "b.scss";
.test{
background:$themeColor
}
//编译c.scss的结果
#main {color: red; }
.test {background: red; }
很多时候我们不希望在编译时将那些被导入的sass文件也编译出来，如这里我们就不需要编译a.scss和b.scss但是当我们执行某些命令如将如果文件夹的sass全部编译这时候a和b都会被编译 如果我们不希望他们被编译，直接在文件名前面加下划线即可,导入时去掉下划线。
//_a.scss
$themeColor:red
//_b.css
#main{
color:$theme.color
}
//c.scss
@import "a.scss";
@import "b.scss";
.test{
background:$themeColor
}
//编译c.scss的结果
#main {color: red; }
.test {background: red; }
import默认值
有些时候我们导入一些sass文件，但某个sass文件可能会跟我当前的sass文件类名冲突，这时候可能会优先执行被导入sass文件的样式
//a.scss
$themeColor:red;
//b.scss
$themeColor:blue ;
@import "a.scss";
#main{
color:$themeColor;
}
在b.scss中故意将import写在变量下面编译后的结果
#main {color: red; }//执行了a.scss变量
而如果我们希望a.scss不影响主文件的执行我们可以在a.css的变量后面加上!default
表示默认变量，当主文件没有定义被引入文件相同变量时则使用被引入文件的那个变量，当发生重名时则优先使用主文件的变量
//a.scss
$themeColor:red !default;
嵌套导入
sass还支持嵌套导入，在代码块中导入
//a.scss
.a{
color:red
}
//b.scss
.b{import "a.scss"}
//编译b.scss
.b .a { color: red; }
sass注释
sass有两种注释
//这种注释不会出现在编译后的css文件中
/*这种注释会出现在编译后的css文件中*/
border 1px /*这种不会出现在css文件中*/ solid red
sass中文乱码
在编译sass中如果出现中文乱码的问题，找到你的sass安装目录，编辑
engine.rb文件 在require…最后面添加如下代码
Encoding.default_external=Encoding.find('utf-8')
我的sass目录
E:\Ruby27-x64\lib\ruby\gems\2.7.0\gems\sass-3.7.4\lib\sass
