[外链图片转存失败(img-G32u6UQ8-1563572536495)(https://upload-images.jianshu.io/upload_images/11158618-a03a58b9b5ed5fc8.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
CSS 的辅助工具
增加了变量,嵌套,混合,导入 等高级功能
[外链图片转存失败(img-9YJDW7rN-1563572536498)(https://upload-images.jianshu.io/upload_images/11158618-a661a8ea37eed680.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]
# Convert Sass to SCSS
$ sass-convert style.sass style.scss
# Convert SCSS to Sass
$ sass-convert style.scss style.sass
使用变量
变量声明
Sass变量声明和CSS属性的声明很像：
$highlight-color: #F90;
$nav-color: #F90;
nav {
$width: 100px;
width: $width;
color: $nav-color;
}
//编译后
nav {
width: 100px;
color: #F90;
}
变量引用
$highlight-color: #F90;
.selected {
border: 1px solid $highlight-color;
}
//编译后
.selected {
border: 1px solid #F90;
}
$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
border: $highlight-border;
}
//编译后
.selected {
border: 1px solid #F90;
}
$link-color: blue;
a {
color: $link_color;
}
//编译后
a {
color: blue;
}
嵌套CSS规则
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }
#content {
article {
h1 { color: #333 } p { margin-bottom: 1.4em }
} aside { background-color: #EEE }
}
/* 编译后 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }
父选择器标识符&
下面这种情况sass就无法正常工作：
article a {
color: blue;
:hover { color: red }
}
article a {
color: blue;
&:hover { color: red }
}
群组选择器的嵌套
.button, button {
margin: 0;
}
.container h1, .container h2, .container h3 { margin-bottom: .8em }
.container {
h1, h2, h3 {margin-bottom: .8em}
}
article {
~ article { border-top: 1px dashed #ccc }
> section { background: #eee }
dl > {
dt { color: #333 }
dd { color: #555 }
}
nav + & { margin-top: 0 }
}
Sass 导入SASS文件
Sass的@import规则在生成css文件时就把相关文件导入进来
$link-color: blue;
$link-color: red;
a {
color: $link-color;
}
.blue-theme {@import "blue-theme"}
//生成的结果跟你直接在.blue-theme选择器内写_blue-theme.scss文件的内容完全一样。
.blue-theme {
aside {
background: blue;
color: #fff;
}
/*...*/的注释语法
Sass 混合器
混合器使用@mixin标识符定义
@mixin rounded-corners {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
notice {
background-color: green;
border: 2px solid #00aa00;
@include rounded-corners;
}
//sass最终生成：
.notice {
background-color: green;
border: 2px solid #00aa00;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
放在@include被调用的地方
选择器继承
通过@extend语法实
//通过选择器继承继承样式
.error {
border: 1px solid red;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
使用sass编写清晰、无冗余、语义化的css
请点赞！因为你们的赞同/鼓励是我写作的最大动力！
欢迎关注达叔小生的简书！
这是一个有质量，有态度的博客
[外链图片转存失败(img-soNJ7vV0-1563572536500)(https://upload-images.jianshu.io/upload_images/11158618-9ab0d3fef85d80ce?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]